[개념정리 14탄] React Props / childern

Props란?

부모 컴포넌트로부터 받아온 데이터이며 부모에서 자식으로만 일방통행으로 전달이 가능하다.

 

Props 예시

import React from "react";

function GrandFather() {
  return <Mother />;
}

function Mother() {
  const name = "홍부인";
  return <Child motherName={name} />; // "props로 name을 전달했다"
}

function Child(props) {
  console.log(props); // object 타입이기때문에 안에 속성값인 .motherName으로 불러올 수 있다.
  return <div>{props.motherName}</div>; // props를 통해 받아오기
}

function App() {
  return <GrandFather />;
}

export default App;


// props를 여러번 전달해야 할 때
import React from "react";

function GrandFather() {
  const name = "할아버지";
  return <Mother GrandFatherName={name} />; // "props로 name을 전달했다"
}

function Mother(props) {
  return <Child GrandFatherName={props.GrandFatherName} />; // 받아온 값을 다시 Child로 전달
}

function Child(props) {
  return <div>{props.GrandFatherName}</div>; // props를 통해 받아오기
}

function App() {
  return <GrandFather />;
}

export default App;

props를 여러번 전달 할때에도 중간에 있는 컴포넌트도 최하단에 있는 자식 컴포넌트의 부모이기 때문에 props의 데이터를 가지고 있다가 자식 컴포넌트에 내려줄 수 있는 것이다. 하지만 props를 통해 데이터를 전달할 때 5~10번 정도는 직접 찾을 수 있지만 20~30번 이상으로 된다면 이 데이터가 어디에서 온건지 찾기 어렵게 된다. 이걸 Props Drilling이라 한다.

 

Props Drilling

Props Drilling은 props가 데이터 전달을 구현하는데 가장 단순한 방법이지만 수십개의 컴포넌트에서 props를 주고 받는다면 시작점이 어딘지 찾기 힘든걸 뜻한다.

 

해결방법은 전역상태관리 라이브러리를 사용하거나 Render Props를 사용하는 방법이 있다.

전역상태관리 라이브러리는 redux, Mobx, recoil 등이 있는데 이런 라이브러리들을 사용하면 해당값이 필요한 컴포넌트에서 직접 불러서 사용할 수 있다.

 

Children

<Components props={props}/>

이와는 다른 방식으로 자식 컴포넌트에 정보를 전달해줘도 사용할 수있는 props를 Children이라 한다.

 

사용예시

import React from "react";

function User() {
	return <div></div>;
}

function App() {
	return <User>안녕하세요</User>;
}
export default App;

App 컴포넌트에 있는 User 컴포넌트에 "안녕하세요"라는 정보를 보냈지만 화면에는 아무것도 나오지 않는다. User 컴포넌트에서 정보를 받지 않았기 때문이다. 원래 부모 컴포넌트에서 정보를 보냈을  때, 자식 컴포넌트에서 사용하려면 props를 통해 받아와야했다.

하지만 위 예시는

<User>안녕하세요</User>

라는 기존 props 전달방식과는 조금 다른 방식으로 props를 보내는데 이것을 children props라고 한다.

 

이때 자식 컴포넌트는

function User(props) {
	return <div>{props.children}</div>;
}

function App() {
	return <User>안녕하세요</User>;
}
export default App;

이렇게 값을 받아와야 한다.

Children은 레이아웃 컴포넌트를 만들 때 자주 사용한다. Layout 컴포넌트 안에는 Header라는 컴포넌트가 있고, Header 아래에 {props.children}을 통해서 props를 받아 렌더링하고 있다. 즉, Layout 컴포넌트가 쓰여지는 모든 곳에서 Layout 컴포넌트 안에 있는 정보를 받아서 가져올 수 있다.

// About 컴포넌트
import React from "react";
import Layout from "./components/Layout";

function About() {
	return (
    	<Layout>
        	<div>여긴 About의 컨텐츠가 들어갑니다.</div>
        </Layout>
    );
}
export default About;

// App 컴포넌트
import React from "react";
import Layout from "./components/Layout";

function App() {
	return (
    	<Layout>
        	<div>여긴 App의 컨텐츠가 들어갑니다.</div>
        </Layout>
    );
}
export default App;