props

React는 단방향 데이터 흐름으로 상위 컴포넌트에서 하위 컴포넌트로 데이터를 이동 시킨다. 이때, 이동 시키는 데이터를 props라고 한다.

export default function App() {
  const content = "content"
  return (
    <div className="App">
      <FirstComponent content={content} />
    </div>
  );
}

function FirstComponent(props.content ) {// or {content}
  return (
    <div>
      <span>{content}</span>
    </div>
  );
}

• content라는 props객체를 생성해 FirstComponent로 content를 내려주고, FirstComponent는 받은 props를 사용할 수 있다.

props drilling

한번의 props를 내리면 상관이 없지만, 프로젝트가 커지고 복잡해질수록 props를 여러개의 컴포넌트를 거쳐서 내려야 하는데 이를 props drilling이라고 한다.

export default function App() {
  const content = "content"
  return (
    <div className="App">
      <FirstComponent content={content} />
    </div>
  );
}

function FirstComponent({ content }) {
  return (
    <div>
      <SecondComponent content={content} />|
    </div>
  );
}

function SecondComponent({ content }) {
  return (
    <div>
      <ThirdComponent content={content} />
    </div>
  );
}

function ThirdComponent({ content }) {
  return (
    <div>
      <LastComponent content={content} />
    </div>
  );
}

function LastComponent({ content }) {
  return 
  <div>
    <span>{content}</span>
  </div>;
}

• App부터 시작한 props가 LastComponent를 위해 무려 3개의 props를 거치는데 이는 유지보수와 가독성 측면에서 좋지 않다.

해결법

children 사용

children이란? 컴포넌트의 태그 사이에 있는 요소들을 포함하며, 이를 통해 부모 컴포넌트는 자식 컴포넌트에게 HTML 또는 다른 컴포넌트를 전달할 수 있습니다.
https://react-ko.dev/learn/passing-props-to-a-component#passing-jsx-as-children

export default function App() {
  const content = "content"
  return (
     <div className="App">
      <FirstComponent>
        <SecondComponent>
          <ThirdComponent>
            <ComponentNeedingProps content={content}  />
          </ThirdComponent>
        </SecondComponent>
      </FirstComponent>
    </div>
  );
}

function FirstComponent({ children }) {
  return (
    <div>
      {children}
    </div>
  );
}

function SecondComponent({ children }) {
  return (
    <div>
      {children}
    </div>
  );
}

function ThirdComponent({ children }) {
  return (
    <div>
      {children}
    </div>
  );
}

function LastComponent({ content }) {
  return 
  <div>
    <span>{content}</span>
  </div>;
}

• children으로 하위 요소들을 모두 포함하여 내려주면서 가독성이 좋아진다.

전역 상태 라이브러리

라이브러리를 사용해, 전역상태를 띄우고 해당 전역 상태를 계층에 관계없이 참조하면서 props drilling을 피할 수 있다.

//Context API를 활용한 전역관리
const UserContext = createContext(null);

function App() {
  const [user, setUser] = useState({ name: "John Doe" });

  return (
    <UserContext.Provider value={user}>
      <ComponentA />
    </UserContext.Provider>
  );
}

function ComponentA() {
  return <ComponentB />;
}

function ComponentB() {
  const user = useContext(UserContext);
  return <div>User: {user.name}</div>;
}

• props로 데이터를 내리지 않아도 데이터를 참조할 수 있다.

참조 글
https://slog.website/post/13
https://velog.io/@ahsy92/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EC%99%80-Props-Drilling