React에서 자식 요소에 props 전달하기

React 컴포넌트는 태그 사이에 중첩된 콘텐츠를 props.children으로 렌더링할 수 있습니다. 이 콘텐츠를 렌더링한다고 해서 그 안의 요소에 props가 자동으로 추가되지는 않습니다. 하위 컴포넌트들과 값을 공유하려면 Context를 사용하고, 특정 자식 요소 하나에 prop을 추가하려면 React.cloneElement()를 사용하세요.

예를 들어 메시지 대화상자는 텍스트나 이모지, 또는 여러 요소의 조합을 콘텐츠로 받을 수 있습니다. 재사용 가능한 대화상자 컴포넌트는 그 콘텐츠를 미리 알 필요 없이 본문이 들어갈 위치에 props.children을 렌더링하면 됩니다.

React에서 자식 요소에 props 전달하기

래퍼 컴포넌트는 마크업 안에서 {children}을 반환해 중첩된 콘텐츠를 표시할 수 있습니다. 예를 들어 function Box({ children }) { return <div>{children}</div>; }는 부모가 <Box>와 </Box> 사이에 넣은 내용을 렌더링합니다. 부모는 function App() { return <Box><Text /></Box>; }처럼 자식 컴포넌트와 함께 조합할 수 있습니다.

이렇게 조합하면 Text 요소가 Box의 children prop으로 전달되지만, Text에 color prop이 설정되는 것은 아닙니다. 자식 요소에 값이 필요하다면 <Text color="red" />처럼 자식 요소를 만들 때 명시적으로 전달하거나, 래퍼가 그 값을 제공해야 하는 경우 아래 방법 중 하나를 선택하세요.

이 JSX 조각은 컴포넌트 연결 방식을 보여 주며 애플리케이션에서 React를 사용할 수 있다고 가정합니다. 독립적으로 실행할 수 있는 파일이나 실행 결과가 아닙니다. 자식 컴포넌트는 function Text({ color }) { return <p style={{ color }}>Welcome to App</p>; }와 같은 함수 시그니처로 값을 읽을 수 있습니다.

Context API를 사용해 React에서 자식 요소에 props 전달하기

하위 트리의 여러 컴포넌트에서 같은 값이 필요하고, 중간에 있는 각 컴포넌트를 거쳐 값을 전달하는 작업이 불필요한 연결 코드를 늘린다면 Context를 사용하세요. Context는 provider 아래에 있는 소비자가 값을 사용할 수 있게 합니다. Context는 props와 별개이며, 모든 컴포넌트에 prop을 하나씩 전달하는 방식은 아닙니다.

예를 들어 const ColorContext = React.createContext("black");로 context를 만들고, 값이 필요한 콘텐츠를 provider로 감쌉니다: <ColorContext.Provider value="red">{children}</ColorContext.Provider>. 하위 컴포넌트는 const color = React.useContext(ColorContext);로 값을 읽어 <p style={{ color }}>Welcome to App</p>처럼 사용할 수 있습니다. provider 안에서 렌더링되는 컴포넌트가 값을 받을 수 있으므로, 필요한 하위 트리를 provider로 감싸세요. 소비자 위에 일치하는 provider가 없을 때만 기본값이 사용됩니다. 일치하는 provider가 있으면 그 값이 undefined인 경우에도 소비자는 기본값 대신 provider가 전달한 값을 받습니다.

이 방법은 여러 하위 컴포넌트가 사용하는 테마나 언어 설정 같은 값에 적합합니다. 자식 하나에 값 하나만 추가하면 된다면 요소 복제가 더 간단할 수 있습니다.

React.cloneElement()를 사용해 React에서 자식 요소에 props 전달하기

React.cloneElement()는 유효한 React 요소와 props 집합을 바탕으로 새 요소를 만듭니다. 래퍼는 React.cloneElement(children, { color: "red" })를 사용해 자식 하나의 color를 추가하거나 덮어쓰면서 다른 props는 유지할 수 있습니다. 그러면 자식은 앞서 나온 Text 예시처럼 color를 사용할 수 있습니다.

이 방법에서 children은 유효한 React 요소 하나여야 합니다. props.children은 텍스트나 여러 요소 또는 다른 형태일 수도 있으므로 React.cloneElement()를 호출하기 전에 형태를 확인하거나 적절히 처리하세요. 단일 요소를 받는 이 형식에 일반 텍스트나 여러 자식을 하나의 요소인 것처럼 전달할 수는 없습니다. 래퍼가 다양한 콘텐츠를 받아야 한다면 해당 콘텐츠를 그대로 렌더링하고, 하위 컴포넌트들이 공유 값을 필요로 한다면 Context를 사용하세요.

하위 트리 전반에서 사용할 값에는 Context를 선택하세요. 래퍼가 알고 있는 자식 요소 하나를 의도적으로 수정하려면 React.cloneElement()를 선택하세요. 어느 방법도 props.children의 기본 역할을 바꾸지는 않습니다. props.children은 부모가 전달한 중첩 콘텐츠를 나타냅니다.