composition

상속?

Facebook에서는 수천 개의 React 컴포넌트를 사용하지만, 컴포넌트를 상속 계층 구조로 작성을 권장할만한 사례를 아직 찾지 못했습니다.

-리액트 공식 문서 중-

적어도 리액트를 사용할 때는 상속을 잊어도 좋다는 말일 것이다

그렇다면 컴포넌트 끼리 코드 재사용이 필요할 땐 어떻게 할까?

합성

컴포넌트 담기

props.children는 컴포넌트에 들어올 자식을 나타내는 값이다

아래의 코드를 보자

function Parent(props) {
    return (
        <div>
            <h1>I'm Parent</h1>
            <div style={{border: '1px solid black'}}>
                <h2>this place is children's</h2>
                {props.children}
            </div>
        </div>
    );
}

부모 컴포넌트는 언젠가 자기의 자식으로 들어올 props.children을 출력할 공간을 마련해둔 채 렌더링되고 있다

이제 부모 컴포넌트에 자식을 담아서 렌더링해보자

function Child(){
    return (
        <Parent>
            <h3>I'm Child</h3>
        </Parent>
    )
}

ReactDOM.render(
  <Child/>,
  document.querySelector('#root')
);

쉽게 설명해보자면 Child 컴포넌트에서 Parent태그로 감싸고 있는 JSX를 children값으로 건내주고

Parent 컴포넌트에서 그 children을 {props.children}로 그대로 출력하고 있는 것

---

나는 처음에 태그만 보고 당연히 이렇게 나오는 거 아니야? 했다가 Parent에 있는 props.children을 지워보고 당연한게 아닌 것을 깨달았다..

function Child(){
    return (
        <Parent children={'<h3>I\'m Child</h3>'}/>
    )
}

대충 이런 코드로 해석된다고 이해하면 될 것 같다

물론 이렇게하면 제대로 된 결과를 얻을 수 없다

특수화

이 경우가 상속과 비슷하다

function Introduce(props){
    return(
        <div>
            <h1>Hello, my name is {props.myName}</h1>
            <p>
                I am the creator of Speaking of English, a blog for intermediate English learners who want to become more fluent in the language. I am originally from the United States and I currently live in Germany. I have been a teacher since 2008, and specialize in business writing and IELTS preparation. Before becoming a teacher, I worked as a copyeditor for government agencies in Washington DC and as a ghostwriter for startup founders and independent consultants around the world. In my free time, I enjoy hiking, practicing photography, and exploring the city by bike.
            </p>
        </div>
    )
}

여기 자기소개 틀의 컴포넌트가 있다

매우 범용적으로 사용될 수 있는 컴포넌트이지만 실제로 사용할 때는 누군가의 이름이 들어가야한다

function Jane(){
    return(
        <Introduce myName="Jane"/>
    )
}

마치 Jane이 Introduce를 상속한 것 같은 모습..

이것이 리액트의 합성이다