자바스크립트 + 리액트 디자인 패턴

291

Chapter 12_

리액트 디자인 패턴

value={value}

onChange={(e) => setValue(e.target.value)}

placeholder="Temp in °C"

/>

{props.render(value)}

</>

);

}

export default function App() {

return (

<div className="App">

<h1>Temperature Converter</h1>

<Input

render={(value) => (

<>

<Kelvin value={value} />

<Fahrenheit value={value} />

</>

)}

/>

</div>

);

}

12.3.2

컴포넌트의 자식으로 함수 전달하기

일반적인

JSX

컴포넌트 외에도, 컴포넌트의 자식으로 함수를 전달할 수 있습니다. 이 함수는

children

prop

을 통해 접근할 수 있으며, 엄밀히 말하면 렌더링

Props

패턴이기도 합니다.

이제

Input

컴포넌트를 변경해 봅시다. 렌더링

prop

을 명시적으로 전달하는 대신,

Input

컴포넌트의 자식으로 함수를 전달합니다

export default function App() {

return (

<div className="App">

<h1>Temperature Converter</h1>

<Input> ...