React Component 합성과 추출

■ Component 합성과 추출

- Component 합성

: 여러 개의 컴포넌트를 합쳐 하나의 컴포넌트를 만드는 것이다.

  리액트에서는 컴포넌트 안에 다른 컴포넌트를 사용할 수 있기 때문에

  복잡한 화면을 여러개의 컴포넌트로 나눠서 구현이 가능하다.

 

 

예제 코드)

# props의 값을 다르게해서 welcome 컴포넌트를 여러번 사용한다.

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

   여러개의 컴포넌트를 합쳐서 또 다른 컴포넌트를 만드는 것을 컴포넌트 합성이라 한다.

---

# 앱 컴포넌트 안에 3개의 웰컴 컴포넌트가 있고 각각의 웹컴 컴포넌트는

   각기 다른 props를 가지고 있다.

# 앱 컴포넌트를 루트로 해서 하위 컴포넌트들이 존재하는 형태가 리액트로만 구성된 앱의 기본적인 구조다.

# 기존에 있던 웹 페이지에 리액트를 연동한다면 루트 노드가 하나가 아닐 수 있기 때문에 위 구조와 다를 수 있다.

---

- Component 추출

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

  이러한 과정을 컴포넌트 추출이라 한다.

  ※ 큰 컴포넌트에서 일부를 추출하여 새로운 컴포넌트를 만든다는 뜻!

 

컴포넌트 추출을 잘 활용하면 컴포넌트의 재 사용성이 올라가게 된다.

컴포넌트가 작아질수록 해당 컴포넌트의 기능과 목적이 명확해지고 프랍스도 단순해지기 때문에 재사용성이 높아진다.

 

 

예제 코드)

# 위 컴포넌트는 댓글을 표시하기 위한 컴포넌트로

   내부에 작성자의 프로필 이미지와 이름, 댓글 내용과 작성일을 포함하고 있다.

# 해당 컴포넌트의 props는 오른쪽과 같은 형태

---

 

# 해당 부분을 추출하여 아바타라는 별도 컴포넌트 생성

 

 

아바타 컴포넌트 예제)

# props에 기존에 사용하던 author 대신 좀더 보편적인 의미를 가지고 있는 user 사용

# 보편적인 단어를 사용하는 것은 재사용성 측면을 고려하는 것!

 

 

실제 comment 컴포넌트 반영 예제)

 

---

# 유저정보 추출하여 별도 컴포넌트 생성

 

 

유저 컴포넌트 예제)

# 사용자 정보를 담고 있는 부분을 UserInfo 컴포넌트로 추출

# 아바타 컴포넌트도 해당 컴포넌트에 함께 추출되었다.

 

 

comment 컴포넌트 반영 예제)

# 코드가 간결해진 것을 볼 수 있다.

---

# Comment 컴포넌트가 UserInfo 컴포넌트를 포함하고 있고 UserInfo 컴포넌트는 Avatar 컴포넌트를 포함하고 있다.

# 컴포넌트를 어느정도 수준까지 추출하는 것이 좋은지에 대해 정해진 별도의 기준은 없으며,

   기능 단위로 구분하는 것이 좋고 나중에 곧바로 재사용이 가능한 형태로 추출하는 것이 좋다.