[React] - [처음 만난 리액트] - 14. Components와 Props의 정의(Components란?, Props란?)

🧹 두서없이 적는 쉬운 정리

1. 리액트는 컴포넌트 기반의 구조가 특징이며 모든 페이지가 컴포넌트로 구성되어 있다

2. 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다.

4. 다시 말해 컴포넌트들은 마치 내고 블록을 조립하 듯 끼워 맞춰 새로운 컴포넌트를 만들 수 있다.

5. 재사용성 코드 양 감소로 인하여 자연스레 개발 시간과 유지보수 비용도 줄일 수 있다.

6.  컴포넌트는 자바스크립트의 함수와 비슷한데 입력은 Props라는 것이고 출력은 리액트 엘리먼트이다.

7. 컴포넌트는 만들고자 하는 대로 Props 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타난 엘리먼트를 만들어 주는 것

8. 하나의 컴포넌트로 여러 개의 엘리먼트를 찍어낼 수 있다.(붕어빵 틀 -> 붕어빵(슈크림, 팥)

9.  Props는 리액트 컴포넌트의 속성 (붕어빵 속 재료)

10. Props는 컴포넌트의 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다. [팥, 반죽.. 등]

 

(자세한 내용은 아래 참고)

 

---

 

🧱 Components란?

리액트는 컴포넌트 기반의 구조라는 중요한 특징이 있다는 것을 배웠다.

리액트는 모든 페이지가 컴포넌트로 구성되어 있고

하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다.

 

이러한 컴포넌트들을 마치 내고 블록을 조립하 듯 끼워 맞춰 새로운 컴포넌트를 만들 수 있다.

 

그림을 보도록 하자 아래 그림은 에어비앤비 웹사이트 화면을 캡처한 뒤에 컴포넌트를 표시한 것이다.

여기에서 a로 표시된 부분과 b로 표시된 부분이 리액트 컴포넌트이다.

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

 

리액트를 컴포넌트 기반이라고 부르는 것은

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

 

이렇게 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드 양을 줄일 수 있어

자연스레 개발 시간과 유지보수 비용도 줄일 수 있다.

 

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

함수가 입력을 받아서 출력을 내뱉는 것처럼

리액트 컴포넌트 도 입력을 받아서 정해진 출력을 내뱉는다.

 

그래서 이 컴포넌트를 그냥 하나의 함수라고 생각하면 좀 더 쉽게 개념을 이해할 수 있다

하지만 리액터 컴포넌트의 입력과 출력은 일반적인 자바스크립트 함수 않은 조금 다르다

 

 

컴포넌트에  입력은 Props라는 것이고 출력은 리액트 엘리먼트가 된다

결국 리액트 컴포넌트의 역할은 어떠한 속성들을 입력으로 받아 알맞은 리액트 엘리먼트를 생성하여 리턴해 주는 것이다.

 

 

🎏 컴포넌트 그림 이해

앞에서 리액트 엘리먼트는 리액트 앱을 구성하는 가장 작은 빌딩 블록들이라고 했었다.

그리고 자바스크립트 객체 형태로 존재하며 화면에 보이는 것을 기술한다는 것도 배웠다.

 

이 컴포넌트는 만들고자 하는 대로 Props 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타난 엘리먼트를 만들어 주는 것이다

마치 붕어빵을 굽는 과정과 비슷하다

 

붕어빵 기계에는 붕어 모양의 틀이 여러 개 있고 거기에 반죽을 부어서 붕어빵을 만든다

이 과정은 리액트 컴포넌트로부터 리액트 엘리먼트가 만들어지는 과정과 비슷하다.

 

• 리액트 컴포넌트 = 붕어빵 틀
• 리액트 앨리먼트 = 각 붕어빵 들

 

이 과정은 객체지향 개념에서 나오는 클래스와 인스턴스의 개념과 비슷하다

• 붕어빵 틀 = 클래스
• 실제 붕어빵 = 인스턴스 

리엑트 컴포넌트는 객체지향 까지는 아니지만 비슷한 개념을 가지고 있다고 이해하면 된다.

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

---

🤷🏻 Props란?

Props 복수형을 나타내는 알파벳 's'를 붙여서 Prop이 여러 개인 것을 의미한다.

Prop은 Property라는 영어단어를 줄여서 쓴 것이다.

Property는 재산이라는 뜻도 있지만 속성 특성이라는 뜻도 갖고 있는데

리액트에서는 속성이라는 뜻으로 사용됩니다

 

다시 말해 Props는 리액트 컴포넌트의 속성입니다

 

붕어빵 그림을 다시 한번 보면

리액트 컴포넌트는 붕어빵 틀이라고 했다.

그렇다면 Props는 붕어빵에 속재료 같은 것이다.

 

 

아래 그림에서는 총 3개의 각기 다른 붕어빵이 등장합니다

붕어빵이 라고 다 같은 붕어빵이 아니다 여기에서 붕어빵에 들어가는 재료가 바로 Props이다

 

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

컴포넌트의 속 재료라고 생각하면 된다

---

 

📺 컴포넌트와 Props 실사용 예제

컴포넌트와 Props 가 실제로 사용되에어비앤비 첫 화면을 보자.

여기서 위에 빨간색으로 표시되어 있는 부분은 여행할 지역을 나타내고 있다.

모양만 놓고 보면 모두 동일한 형태를 가지고 있다.

 

하지만 4개의 여행지의 배경 이미지와 하단 영역 의 색상과 글자는 전부 다르다.

이것을 리액트 컴포넌트의 관점에서 보면 4가지 모두 다 같은 컴포넌트에서 생성된 엘리먼트 라고 할 수 있다.

 

이러한 컴포넌트의 모습과 속성을 결정하는 것이 바로 Props이다

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

 

정리하자면 우리가 컴포넌트의 어떤 데이터를 전달하고

전달 데이터에 따라 다른 모습의 엘리먼트를 화면에 렌더링 하고 싶을 때

해당 데이터를 Props에 넣어서) 전달하는 것이다.

 

 

 

 

위 내용은 '소플' 님의 '처음 만난 리액트' 영상을 참고하여 작성되었습니다.