[React] 완전 중요한 Components와 Props 개념

MOON HEE·2022년 6월 10일
0
post-thumbnail

1. Components(컴포넌트) 핵심개념


리액트는 컴포넌트 기반(Component-based)이다.

모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 컴포넌트의 조합으로 구성될 수 있다. 컴포넌트를 활용하면 전체 코드양과 유지보수 비용이 줄어든다는 장점이 있다.

리액트 컴포넌트는 아래 그림처럼 입력과 출력이 있다는 점에서 자바스크립트의 함수와 공통점이 있다. 자스의 함수 개념이 더 익숙하기 때문에 리액트 컴포넌트를 함수라고 생각하면 이해하기 쉬울 것 같다. 하지만 리액트 컴포넌트의 입력과 출력은 자스 함수와 차이점이 있다.

아래 그림처럼 리액트 컴포넌트에서의 입력은 props라는 것이고 출력은 리액트 element이다. 결국 리액트 컴포넌트가 해주는 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 element를 생성하여 return해주는 것이다.

리액트 element는 리액트 앱을 구성하는 가장 작은 빌딩 블록들이다. 그리고 자바스크립트 '객체' 형태로 존재하며 화면에 보이는 것을 기술한다. 리액트 컴포넌트는 만들고자 하는대로 'props', 즉 '속성'을 넣으면 해당 속성에 맞춰 화면에 나타나는 element를 만들어주는 것이다.

보통 붕어빵에 많이 비유한다. 클래스와 인스턴스의 개념과도 비슷해 보인다.

붕어빵 틀 = Component
각 붕어빵 = 리액트 Element


2. Props 핵심개념


property(속성)를 줄인 말로, Component의 속성을 의미

위 붕어빵 비유를 계속 이어가자면, Props는 붕어빵의 속재료를 의미한다.

이처럼 Props는 같은 리액트 컴포넌트에서 눈에 보이는 글자나 색상 등의 속성을 바꾸고 싶을 때 사용하는 컴포넌트의 속재료이다.

정리하자면 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체, 이것이 Props이다.

profile
자고 일어나면 해결되는게 더 많은 듯 그럼 잘까

0개의 댓글