[React] Props / children

오늘은 props, children에 대해서 간단히 정리 해보려고 한다.

🔥 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는 데이터 전달을 구현하는 가장 단순한 방법이지만 수십개의 컴포넌트에서 props를 주고받는다고 하면 근원이 어디인지 찾기 힘들다는 현상을 props drilling 이라고 한다.

해결방법으로는

• 전역상태관리 라이브러리 사용
• 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;