Props란?
상위 컴포넌트에서 > 하위 컴포넌트로 (오직 단방향) 전달되는 데이터를 의미합니다.
Props는 컴포넌트 간에 데이터를 주고받기 위한 가장 기본적인 방법중 하나입니다.
매개변수를 객체 디스트럭처링으로 받는 방법
<body>
<div id="root"></div>
<script type="text/babel">
const Component = ({fruit}) => {
console.log(fruit);
return <div>
<h1>It's a {fruit}</h1>
</div>
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component fruit = "사과"/>);
</script>
</body>{fruit: "사과"}
{fruit} = {fruit : "사과"}
{fruit}
매개변수를 props 변수로 받는 방법
<body>
<div id="root"></div>
<script type="text/babel">
const Component = (props) => {
console.log(props);
return <div>
<h1>It's a {props.fruit}</h1>
</div>
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component fruit = "사과"/>);
</script>
</body>{fruit: "사과"}
props = {fruit: "사과"}
{props.fruit}
Props의 특징
props로 데이터 뿐만이 아닌 컴포넌트, 함수도 전달할 수 있습니다.
그래서 Props를 왜 사용하는데?
Props를 적절히 사용할 경우 전달받은 데이터에 따라 화면에 표시하는 컴포넌트 본연의 역할만 수행하여 관심사를 분리할 수 있고, 데이터를 한 곳에서 관리하기 때문에 추적에 용이합니다.
'React' 카테고리의 다른 글
| useEffect (0) | 2023.12.25 |
|---|---|
| useState (0) | 2023.12.25 |
| State (1) | 2023.12.22 |
| 컴포넌트(Component) (0) | 2023.12.22 |
| JSX 문법 return문 <> </> (0) | 2023.12.13 |
