패스트캠퍼스 챌린지 13일차 - 리액트 합성 (Composition)

 

합성 (Composition)

 

  - 코드를 재사용할때 리액트에서는 상속대신 합성을 사용하는 것이 더 좋다.

    (합성과 상속은 객체지향에서 기능의 재사용을 하기 위해 사용하는 대표적인 기법이다. 리액트는 합성모델을 사용)

  - 여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다.

 

See the Pen Untitled by Dan Abramov (@gaearon) on CodePen.

컴포넌트에서 다른 컴포넌트를 담기

 

1) 컴포넌트에서 자식 엘리먼트를 예상할 수 없을때, children prop을 사용하여 자식 엘리먼트를 그대로 전달한다.

   html 태그를 열고 닫는 것 처럼 컴포넌트의 close 부분을 분리하여 children props을 전달한다.

   (JSX에 children이 내장되어있다.)

 

props.children은 배열의 형태로 전달되어 props.children[0] 의 형태와도 같이 사용할 수 있다.

 

 

See the Pen Untitled by Dan Abramov (@gaearon) on CodePen.

 

2) prop으로 children 대신 컴포넌트를 전달한다

   리액트 엘리먼트(컴포넌트)는 객체이기 때문에 prop으로 전달 가능하다. 

   (리액트에서 prop으로 전달할 수 있는 것에는 제한이 없다.)

 

function Page(props) {
  const user = props.user;
  const userLink = ( // props를 넣은 컴포넌트로 합성해서 통째로 넘김
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}

// 이제 이렇게 쓸 수 있습니다.
<Page user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<PageLayout userLink={...} />
// ... 그 아래에 ...
<NavigationBar userLink={...} />
// ... 그 아래에 ...
{props.userLink}

 

특수화

 

더 구체적인 컴포넌트가 일반적인 컴포넌트를 렌더링하고 props를 통해 내용을 구성한다.

더 구체적인 component인 Page에서 PageLayout > userLink > Link > Avatar로 props를 전달하여 활용할수 있게 한다.

 

 

 

 

https://bit.ly/3FVdhDa

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.