[React]children에 대해서

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Parent>
        <Child></Child>
      </Parent>
    </div>
  );
}

const Parent = () => {
  return <div>부모</div>;
};

export const Child = () => {
  return <div>자식컴포넌트</div>;
};

위 코드를 출력해보면

자식컴포넌트 라는 텍스트가 출력이 안되는것을 볼 수 있다.

Parent밑에 child가 나오게 하려면
children로 자식컴포넌트가 위치할곳을 지정해줘야한다.

const Parent = ({ children }) => {
  return <div>부모{children}</div>;
};

위 코드처럼 하면 잘 나오는것을 확인할 수 있다.

내가 햇갈렸던 점

기존 프로젝트를 진행할때 children을 사용해본적이 없다.

const Parent = ({ children }) => {
  return (
    <div>
      부모
      <Child></Child>
    </div>
  );
};

출력

이런식으로 Parent코드 에서 Child 를 사용하는방식으로 많이 사용하였다.

App.js에서 처음 리턴하는 컴포넌트는 무조건 첫째 이기에 children을 사용하지 않고 사용할수 있었다.

위 코드가 잘 실행되는첨은 Parent가 제대로 생성후 Child를 return하기때문에 엄밀히 말하면 하나의 컴포넌트고, 첫째라서 실행이 되었다는점이다.

props, children 정리

• props: 어떤 컴포넌트를 import해와서 사용하는 부모(상위) 컴포넌트 (ex. App.js)에서 정하는 값입니다. 부모 컴포넌트에서 설정해서 자식 컴포넌트로 전달하여, 자식 컴포넌트에서 쓰입니다.
• children: A 컴포넌트 사이에 B 컴포넌트가 있을 때, A 컴포넌트에서 B 컴포넌트 내용을 보여주려고 사용하는 props입니다.

styled-component는 태그와styled를 컴포넌트처럼쓰기때문에 위치는 태그처럼 들어간다.