처음 만난 리액트 - 6. Components and Props

매우 중요하게 사용될 개념이다.

 

Component란?

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

컴포넌트들을 레고 블럭 조립하듯이 끼워서 페이지를 구성한다고 생각하면 편하다.

 

 

리액트 컴포넌트는 자바스크립트의 함수와 같은 역할을 하게 되는데,

이때 리액트 컴포넌트의 입력은 props, 출력은 앞 장에서 배운 리액트 엘리먼트가 된다.

 

=> 결국 리액트 컴포넌트가 해주는 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해 주는 것

 

 

붕어빵 굽는 과정과 비슷함

컴포넌트 - 붕어빵을 굽는 틀

 

Props란?

property. 리액트 컴포넌트의 속성

Props - 붕어빵에 들어가는 재료

 

React 컴포넌트의 관점에서 보면 4가지 모두 다 같은 컴포넌트에서 생성된 엘리먼트임.

다만 안의 내용이 다른것은 Props가 다르게 설정되었기 때문

=> 컴포넌트의 모습과 속성을 결정하고 있는것이 바로 Props

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

 

Props의 특징

- read-only, 즉 읽기 전용 -> 읽을 수만 있고 값을 변경할 수는 없음

만약 다른 Props의 값으로 엘리먼트를 생성하고 싶으면 새로운 값을 컴포넌트에 전달하여 새로운 엘리먼트를 생성해야 함.

이미 만들어진 엘리먼트의 Props를 바꿀 수는 없음.

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여주어야 함.

 

Props의 사용법

컴포넌트에 Props라는 객체를 전달하기 위해서는 어떻게 해야 할까?

 

JSX를 사용하는 경우

- App 컴포넌트가 나오고 그 안에서 Profile 컴포넌트를 사용하고 있는 코드

- 여기서 profile 컴포넌트에 name, introduction, viewCount라는 3가지 속성들을 넣어주었음

- 중괄호 유무의 차이 - 문자열 이외에 정수, 변수 그리고 다른 컴포넌트 등이 들어갈 경우에는 중괄호를 사용해서 감싸주어야 함

- 이렇게 하면 이 속성의 값들이 모두 프로필 컴포넌트의 props로 전달되며 props는 이와 같은 형태의 자바스크립트 객체가 됨

 

JSX를 사용하지 않는 경우

createElement함수를 사용해준다.

- type : 컴포넌트의 이름 : profile이 들어감

- props : JavaScript 객체가 들어감

- children : 하위 컴포넌트가 들어감 : 없기 때문에 null이 들어감

 

가능하면 JSX를 사용하는 것을 권장함.

 

---

Component 만들기

리액트의 컴포넌트는 크게

Function Componenet와 Class Component로 나뉜다.

 

Function Component

Class Component

 

두 코드의 가장 큰 차이점은 React의 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다는 것.

Function Component의 경우 하나의 props 객체를 받아서 인삿말이 담긴 React 엘리먼트를 리턴함.

 

 

* 컴포넌트의 이름은 항상 대문자로 시작해야 한다! *

(소문자로 시작하는 컴포넌트는 DOM 태그로 인식해버림)

 

 

 

Component 렌더링

^실제 렌더링하는 코드

 

Componenet 합성

컴포넌트 합성: 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것

 

컴포넌트 합성을 하는 예제 코드

- props의 값을 다르게 해서 Welcome 컴포넌트를 여러번 사용

- 이렇게 하면 앱이라는 컴포넌트는 welcome 컴포넌트 3개를 포함하고 있는 컴포넌트가 됨

=> 이렇게 여러 개의 컴포넌트를 합쳐서 또 다른 컴포넌트를 만드는 것을 컴포넌트 합성이라고 함

 

컴포넌트 합성과 반대로 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나눌 수도 있다.

Component 추출

큰 컴포넌트에서 일부를 추출해서 새로운 컴포넌트를 만든다는 뜻.

 

컴포넌트를 추출하는 과정을 보자.

다음과 같이 댓글을 표시하기 위한 Comment 컴포넌트가 있다. 

이 컴포넌트는 댓글을 표시하기 위한 컴포넌트로 내부에 작성자의 프로필 이미지와 이름 그리고 댓글 내용과 작성일을 포함하고 있다.

 

이제 이 컴포넌트에서 하나씩 컴포넌트를 추출해 보도록 하자.

 

1) 아바타 추출

#5~#8 줄을 추출

 

이제 이렇게 추출된 아바타 컴포넌트를 실제로 커멘트 컴포넌트에 반영하면 다음과 같은 모습이 된다.