React Components와 Props 정의
■ React Components와 Props 정의
Component
# 리액트는 컴포넌트 기반 구조이다.
# 모든 페이지가 컴포넌트로 구성되어 있으며, 하나의 컴포넌트는 또 다른 여러개의 컴포넌트 조합으로 구성될 수 있다.
# A와 B로 표시된 부분이 리액트 컴포넌트라 볼 수 있다.
이러한 컴포넌트를 여러번 반복적으로 사용해서 하나의 페이지를 구성하고 있다.
# React를 컴포넌트 기반이라고 부르는 것은 작은 컴포넌트들이 모여 하나의 컴포넌트를 구성하고
이러한 컴포넌트들이 모여 전체 페이지를 구성하기 때문이다.
# 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄이고 개발시간 및 유지보수 비용도 줄일 수 있다.
# 리액트 컴포넌트는 개념적으로 자바스크립트 함수와 비슷하다.
함수가 입력을 받아 출력을 내뱉는 것처럼 리액트 컴포넌트도 입력을 받아 정해진 출력을 내뱉는다.
※ 리액트 컴포넌트를 하나의 함수라 생각하면 쉽게 개념을 이해할 수 있다.
# 리액트 컴포넌트의 입/출력은 일반적인 자바스크립트 함수와 조금 다르다.
리액트 컴포넌트에서의 입력은 props라는 것이고 출력은 리액트 엘리먼트가 된다.
※ 리액트 컴포넌트가 해주는 역할은 어떠한 속성들을 입력으로 받아 그에 맞는
리액트 엘리먼트를 생성하여 리턴해주는 것이다.
- 리엑트 엘리먼트는 리액트 앱을 구성하는 가장 작은 빌딩 블록들
# 리액트 컴포넌트는 만들고자 하는 대로 props, 즉 속성을 넣으면 해당 속성에 맞춰
화면에 나타날 엘리먼트를 만들어 준다.
■ Props
Props(prop 뒤에 s를 붙여 복수형을 나타낸다.)
프랍은 property(재산, 속성, 특성)라는 영어 단어를 줄여서 쓴 것이며, 리액트에선 속성이란 뜻으로 사용된다.
※ 즉, Props는 리액트 컴포넌트의 속성!
# 위 그림에서 Props는 붕어빵에 들어가는 재료를 의미
# props는 React 컴포넌트에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용하는 컴포넌트 속 재료
# 컨포넌트의 모습과 속성을 결정하는 것이 props이다.
# props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체다.
# 컴포넌트의 어떤 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 엘리먼트를
화면에 랜더링하고 싶을 때 해당 데이터를 props에 넣어 전달