리액트의 합성과 상속

 

리액트의 합성은 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 의미함.

합성이라고 해서 무작정 그냥 컴포넌트들을 붙이는 것이 아니라, 여러 개의 컴포넌트를 어떻게 조합할 것인가에 대한 고민이 필요함.

 

1) Containment

 

하위 컴포넌트를 포함하는 형태의 합성 방법.

리액트 컴포넌트의 props 에 기본적으로 들어 있는 children 속성을 사용하면 됨.

 

function FancyBorder (props) {
    return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
        </div>
    )
}

 

위 코드에서 FancyBorder 라는 컴포넌트에 props.children 을 사용하면 해당 컴포넌트의 하위 컴포넌트가 모두 children 으로 들어오게 됨.

children 이라는 prop 은 개발자가 직접 넣는 게 아니라 리액트에서 기본적으로 제공해 주는 것임.

 

리액트의 createElement() 함수를 살펴보면...

 

React.createElement (
    type,
    [props],
    [...children]
)

 

여기에 세 번째에 들어가는 파라미터가 바로 children 임.

children 이 배열로 되어 있는 이유는 여러 개의 하위 컴포넌트를 가질 수 있기 때문임.

결과적으로 위 코드의 FancyBorder 컴포넌트는 자신의 하위 컴포넌트를 모두 포함하여 예쁜 테두리로 감싸주는 컴포넌트가 됨.

 

function Welcome (props) {
    return(
        <FancyBorder color="pink">
            <h1 className="Welcome-title">
                어서오세요!
            </h1>
            <p className="Welcome-msg">
                별깅이 블로그에 오신 것을 환영합니다!
            </p>
        </FancyBorder>
    );
}

 

위 코드를 보면 Welcome 컴포넌트 안에 FancyBorder 컴포넌트를 사용하고 있음.

FancyBodrder 컴포넌트로 감싸진 부분에는 <h1> 태그와 <p> 태그 이렇게 두 개의 태그가 들어가 있습니다.

이 두 개의 태그는 모두 FancyBorder 컴포넌트에 children 이라는 이름의 props로 전달됨.

결과적으로 분홍색 테두리로 모두 감싸지는 결과가 나올 것임.

 

리액트에서는 props.children 을 통해 하위 컴포넌트를 하나로 모아서 제공해 줌.

 

여러 개의 children 집합이 필요한 경우는 어떻게 할까? 

ㄴ 별도로 props 를 정의해서 각각 원하는 컴포넌트를 넣어 주면 됨.

 

function SplitPane (props) {
    return(
        <div className="SplitPane">
            <div className="SplitPane-top">
                {props.top}
            </div>
            <div className="SplitPane-btm">
                {props.btm}
            </div>
        </div>
    );
}

function App (props) {
    return (
        <SplitPane
            top={
                <Store />
            }
            btm={
                <board />
            }
        />
    );
}

 

위의 코드는 화면을 상하단으로 분할해서 보여 주는 SplitPane 이라는 컴포넌트가 있음.

그리고 아래쪽에 나와 있는 App 컴포넌트에서는 이 SplitPane 컴포넌트를 사용하고 있는데, top과 btm 이라는 두 개의 props 를 정의하여 그 안에 각각 다른 컴포넌트를 넣어 주고 있음.

SplitSpane 에서는 top, btm 을 props 로 받게 되고, 각각 화면의 상단과 하단에 분리해서 렌더링 하게 됨.

이처럼 여러 개의 children 집합이 필요한 경우에는 별도의 props 를 정의해서 사용하면 됨.

 

props.children 이나 직접 정의한 props를 이용하여 하위 컴포넌트를 포함하는 형태로 합성하는 방법을

Containment 라고 함.

 

 

2) Specialization

 

범용적인 개념을 구별되게 구체화하는 것을 말함.

 

function Dialog (props) {
    return (
        <FancyBorder color="pink">
            <h1 className="Diglog-title">
                {props.title}
            </h1>
            <p className="Dialog-msg">
                {props.msg}
            </p>
        </FancyBorder>
    );
}

function WelcomeDialog (props) {
    return (
        <Diglog
            title="안농하세요"
            msg="별깅이 블로그에 오신 것을 환영합니다~"
        />
    );
}

 

Dialog 라는 범용적인 컴포넌트와 이것을 사용하는 WelcomeDialog 컴포넌트가 나옴.

Dialog 컴포넌트는 title, msg 라는 두 가지 props 를 가지고 있음.

이 title 과 msg 를 어떻게 사용하느냐에 따라서 경고 다이얼로그가 될 수도 있고, 인사말 다이얼로그가 될 수도 있는 거임.

 

그러니까, 범용적으로 쓸 수 있는 컴포넌트를 만들어 놓고 이를 특수화 시켜서 컴포넌트를 사용하는 합성 방식임.

 

 

 

3) Containment 와 Specialization 을 같이 사용하기

 

둘을 같이 쓰려면 일단...

Containment 를 위해 props.children 을 사용하고,

Specialization 을 위해 직접 정의한 props 를 사용하면 됨.

 

function Dialog (props) {
    return (
        <FancyBorder color="pink">
            <h1>
                {props.title}
            </h1>
            <p>
                {props.msg}
            </p>
            {props.children}
        </FancyBorder>
    );
}

function SignUpDialog (props) {
    const [nickname, setNickname] = useState("");
    const handleChange = (event) => {
        setNickname(event.target.value);
    }
    const handleSignUp = () => {
        alret(`환영해요, ${nickname}님~!`);
    }

    return (
        <Diglog
            title="별깅이 블로그"
            msg="닉네임을 입력하시오"
        >
            <input
                value={nickname}
                onChange={handleChange}
            />
            <button
                onClick={handleSignUp}
            >
            입력하기
            </button>
        </Diglog>
    );
}

 

위의 코드에서 Diglog 컴포넌트는 Containment  를 위해 끝 부분에 props.children 을 추가했음.

이를 통해 하위 컴포넌트가 다이얼로그 하단에 렌더링 됨.

 

Diglog 를 사용하는 SignUpDialog 컴포넌트는 Specialization 을 위해 props인 title 과 msg 에 값을 넣어 주고 있고,

사용자로부터 닉네임을 입력받기 위해 <input> 과 <button> 태그가 들어 있음.

이 두 개의 태그는 모두 props.children 으로 전달되어 다이얼로그에 표시됨!

 

이러한 형태로 Containment 와 Specialization 을 동시에 사용할 수 있음.

각 방법을 따로 사용하거나, 또는 동시에 함께 사용하면 다양하고 복잡한 컴포넌트를 효율적으로 개발할 수 있음.

 

 

 

4) 상속

 

합성과 대비되는 개념으로 상속(Inheritance) 이 있음.

컴퓨터 프로그래밍에서의 상속은 객체지향 프로그래밍에서 나온 개념임.

부모 클래스를 상속받아서, 새로운 자식 클래스를 만든다는 개념으로 자식 클래스는 부모클래스가 가진 변수나 함수 등의 속성을 모두 갖게 됨.

 

리액트에서는 상속이라는 방법을 사용하는 것보다는 앞에서 배운 합성을 사용해서 개발하는 것이 더 좋은 방법임.

따라서, 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 만들고, 만든 컴포넌트들을 조합하여 새로운 컴포넌트를 만드셈!