Components와 Props 정의 [처음 만난 리액트 #15]

5강. Components and Props

[무료] 처음 만난 리액트(React) - 인프런 | 강의

 

---

Components

Componenet-Based : 리액트는 컴포넌트 기반의 구조

● 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음 

● 이러한 컴포넌트들을 레고 블록 조립하듯 컴포넌트들을 모아서 개발

 

 

▲ 에어비엔비 웹사이트 화면을 캡쳐한 뒤 컴포넌트들을 표시

 

● A로 표시된 부분과 B로 표시된 부분이 리액트 컴포넌트

● 이러한 컴포넌트를 여러 번 반복적으로 사용해서 하나의 페이지를 구성

 

작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성

하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어서 개발 시간과 유지보수 시간도 줄일 수 있음

 

---

● 리액트 컴포넌트는 개념적으로는 자바스크립트의 함수와 비슷 

● 함수가 입력을 받아서 출력을 내뱉는 것처럼, 리액트 컴포넌트도 입력을 받아서 정해진 출력을 내뱉음

But 리액트 컴포넌트의 입력과 출력은 일반적인 자바스크립트의 함수와 다름

 

 

리액트 컴포넌트의 입력은 Props, 출력은 React element

● 리액트 컴포넌트의 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 element를 생성하여 리턴하는 것

react element는 리액트 앱을 구성하는 가장 작은 빌딩 블록들, 자바 스크립트 객체 형태로 존재하며 화면에 보이는 것을 기술

● 리액트 컴포넌트는 만들고자하는 대로 props(속성)을 넣으면 해당 속성에 맞춰 화면에 나타날 element를 만들어주는 것 

 

 

● 리액트 컴포넌트로부터 element를 만드는 과정은 붕어빵 틀에 반죽을 부어서 붕어빵을 굽는 과정과 비슷

● React Component는 붕어빵 틀을, Element는 각 붕어빵들을 의미

 

● 객체지향의 클래스, 인스턴스의 개념과 비슷 

● 클래스라는 붕어빵 틀에서 인스턴스라는 실제 붕어빵이 만들어져서 나옴

 

리액트 컴포넌트는 객체지향까지는 아니지만, 비슷한 개념을 가지고 있음

붕어빵 틀만 있으면 계속해서 붕어빵을 만들어낼 수 있는 것

 

---

Props

리액트 컴포넌트의 입력으로 들어가는 Props는 무엇일까?

 

Prop + s (복수형)

prop: property(속성)라는 단어를 줄인 것 

Component의 속성

 

리액트 컴포넌트는 붕어빵 틀에 해당, Props는 붕어빵의 재료에 해당 

같은 붕어빵이라도 어떤 재료를 넣느냐에 따라 다른 맛이 남

 

 

● 팥을 넣으면 팥 붕어빵이, 슈크림을 넣으면 슈크림 붕어빵이, 고구마를 넣으면 고구마 붕어빵이 됨

같은 붕어빵 틀에서 구워져서 나온 것이기 때문에 모양은 붕어 모양으로 같지만, 속을 뜯어보면 안의 재료도 다르고 색깔도 다름

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

 

---

 

● 빨간색으로 표시되어있는 부분은 여행할 지역을 나타내고 있음

● 모두 모서리가 둥근 사각형 모양에 상단에는 그림이 배경으로 들어가있고 하단에는 색깔로 된 배경과 글자가 들어가있는 형태 

 

모양은 모두 동일한 형태지만, 안의 그림과 색상, 글자, 거리 등은 모두 다름

 

 

총 네 개의 여행지가 존재, 모두 같은 모양이지만 배경 이미지와 하단 영역의 색상과 글자는 모두 다름

-> 네 가지 모두 같은 컴포넌트에서 생성된 elements

 

컴포넌트의 모습과 속성을 결정하는 것이 props

 

---

Props: 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

컴포넌트에 어떤 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 element를 화면에 렌더링하고 싶을 때 해당 데이터를 props에 넣어서 전달