[리액트] Props란, Prop Drilling (칸트 도덕철학)

Props란

리액트 공식 웹사이트에 따르면 props는 읽기전용으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 것이다. props는 property의 준말이며, 객체 형태로 자식 컴포넌트에 전달되는 데이터를 담고 있다.

props는 전달하는 주체인 부모 컴포넌트가 결정하고 받아서 사용하는 자식 컴포넌트는 수정하거나 삭제 할수 없다. 그러기 위해선 state라는 개념이 필요하다. 즉, 리액트에서 단방향으로 데이터를 전달하는 매커니즘을 뜻한다.

props 전달

/* 부모 컴포넌트 */
function App() {
    return <Hello name="Alice" />;
}
/* 자식 컴포넌트 */
function Hello(props) {
    return <div>Hello, {props.name}!</div>;
}

App 컴포넌트에서 Hello 컴포넌트를 불러오고 있으며 Hello 컴포넌트에 name이란 키 값을 가지는 ‘Alice’ 문자열을 전달해주고 있다.

Hello 컴포넌트를 살펴보면 인풋으로 props란 변수에 부모가 준 객체를 받고 있으며, 해당 객체의 name이란 key값을 찾아서 해당하는 값을 출력한다.

기본값 전달하기

그렇다면 자식은 props를 받기로 했는데 부모가 깜빡하고 안주면 어떻게 될까? 당연하게도 자식은 출력할 값이 없다. 이럴때를 대비해서 자식 컴포넌트에서 기본값을 지정해 줄 수 있다.

/* 부모 컴포넌트 */
function App() {
    return <Hello/>;
}
/* 자식 컴포넌트 */
function Hello(props) {
    return <div>Hello, {props.name}!</div>;
}
Hello.defaultProps = {
    name : '김아무개'
}

기본값을 정해주면 부모가 props를 전달해주지 않더라도 기본값으로 출력하게 된다.

또 다른 이름으로 전해지는 props : children

/* 부모 컴포넌트 */
function App() {
    return <Hello>안녕이란말 헬로헬로, 이젠 굿바이 굿바이</Hello>;
}
/* 자식 컴포넌트 */
function Hello(props) {
    return (
        <>
            <div>Hello, {props.name}!</div>
            <div>{props.children}</div>
        </>
    );
}
Hello.defaultProps = {
    name : 'FT아일랜드'
}

이렇게 부모에서 호출하는 컴포넌트 태그 사이에 내용을 입력하면 어떻게 될까?

HTML 코드는 다음과 같이 작성될 것이다.

<div>Hello, FT아일랜드!</div>
<div>안녕이란말 헬로 헬로, 이젠 굿바이 굿바이</div>

부모컴포넌트에서 자식컴포넌트를 호출하는 태그 사이에 입력된 값은 따로 지정해주지 않더라도 children 이란 키값으로 자식컴포넌트에 전달된다.

children은 보통 명시적으로 넘겨주지 않더라도 계속해서 반복적으로 쓰이는 경우, 공통 layout 등을 잡을때 활용한다고 한다.

깔끔하게 받아보자! 구조분해할당!

매번 props.머머머 props.블라블라 이렇게 데이터를 받아오면 코드가 지저분해진다. 뿐만아니라. 자식 컴포넌트가 인풋으로 받는 객체 안에 어떤 데이터가 있는지 매번 부모컴포넌트를 찾아가서 확인해주어야한다.

이러한 불편함을 해소하기 위해 ES6에서 추가된 구조분해할당을 사용해보자.

/* 부모 컴포넌트 */
function App() {
    return <Hello singer="FT아일랜드" lyrics="안녕이란말 헬로헬로, 이젠 굿바이 굿바이"/>;
}
/* 자식 컴포넌트 */
function Hello({singer, lyrics}) {
    return (
        <>
            <div>Hello, {singer}!</div>
            <div>{lyrics}</div>
        </>
    );
}

구조분해 할당을 통해 코드를 작성하게 되면 매번 props로 찍지 않아도 되지만 그거보다 자식 컴포넌트만 보아도 부모 컴포넌트로부터 어떤 props를 받았는지 명시적으로 알게 된다.

Prop Drilling

부모-자식-자식 이런 구조로 컴포넌트가 호출되고 있을 때 부모가 자식의 자식에게 데이터를 넘겨주기 위해선 props를 자식에게, 자식은 그걸 다시 본인의 자식에게 전달해주어야 한다. 이런 경우를 props driling이라고 한다. 중간에 끼인 자식은 그저 데이터를 전달해주는 터널 역할만을 수행하기 때문이다.

/* 썸남 컴포넌트 */
function Duke() {
    return <Abigail message="에블린! 넌 너무 아름다워"/>
}
/* 중간지인 컴포넌트 */
function Abigail(props){
    return <Evelyn dukesMessage={props.message}/>
}

/* 썸녀 컴포넌트 */
function Evelyn(props){
    return <div>OMG, {props.dukesMessage}!! is true?!</div>
}

단순히 듀크와 에블린의 사랑놀음의 메신저 역할만 하는 에비게일은 얼마나 짜증나겠는가!!!!
이런 현상을 props Drilling 이라고 한다.
장점은..장점이 있을까? 칸트의 도덕철학에서 사람을 수단으로 삼지말라고 한게 생각난다....
장점은 데이터 전달이 빠르고..단순히 컴포넌트 호출 흐름만 쫓아가면 데이터의 흐름을 알 수있다는 점이다.
이런 props drilling은 리덕스와 같은 상태관리 라이브러리를 통해 해결할 수 있다고 한다.