props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법입니다.
지난 포스팅에서 만든 단위변환기입니다. 현재 이 예제에서 보면 자식컴포넌트인 MinutesToHours와 KmToMiles 두 컴포넌트는 부모컴포넌트의 데이터를 필요로 하지 않습니다. 두 컴포넌트는 독립적으로 존재할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function MinutesToHours () {
//생략
}
function KmToMiles(){
//생략
}
function App () {
const [index, setIndex] = React.useState("xx");
const onSelect = (event)=>{
setIndex(event.target.value);
}
return (
<div>
<h1>Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="xx">Select your units</option>
<option value="0">Minutes & Hours</option>
<option value="1">Km & Miles</option>
</select>
<hr />
{index==="xx" ? "Please select your units" : null}
{index==="0"?<MinutesToHours />: null}
{index==="1"?<KmToMiles />: null}
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root)
</script>
</html>
지금부터 props를 이해하기 위해서, 진정으로 props가 왜 필요한지 알기 위해서 props로 해결이 가능하게 될 문제들을 먼저 겪어보겠습니다.
text만 변경할 수 있고 같은 스타일을 가진 버튼을 재사용이 가능한 Btn 컴포넌트로 만들어보겠습니다. 이 때, 버튼의 text는 어떻게 변경할 수 있을까요?
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 함수형 컴포넌트
function Btn(props){
console.log(props)
return <button style={{
backgroundColor: "tomato",
color:"white",
padding:"10px 20px",
border:0,
borderRadius:10
}}>{props.text}</button>
}
function App () {
return (
// JSX의 내부
<div>
<Btn text="Save Changes"/>
<Btn text="Continue"/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root)
</script>
</html>결과
<해설>
브라우저에 스타일은 같지만 text가 다른 버튼 두개를 출력했습니다.
우선 버튼 스타일을 정의한 컴포넌트 Btn을 만들었습니다. Btn 컴포넌트는 App 컴포넌트에서 호출할 때 <Btn text="Save Changes">에서 text와 같은 속성들을 인자로 전달받습니다. 그 인자를 props라고 하며 App에서 작성한 모든 속성을 props에 object 객체로 전달합니다. props를 콘솔창에 출력하면 전달받은 text들이 출력되는 것을 확인할 수 있습니다.
이 때 , App을 부모컴포넌트라고 하고 App에서 호출한 Btn 컴포넌트를 자식컴포넌트라고 합니다.
즉, React JS는 부모 컴포넌트에서의 모든 property를 자동으로 자식 컴포넌트 props로 전달합니다. 따라서 같은 컴포넌트여도 property를 다르게 전달하여 다른 결과를 출력하는 것입니다.
다음 포스팅에서 props를 더 자세하게 배워보도록 하겠습니다.
'프론트엔드 > ReactJS 시작하기' 카테고리의 다른 글
| [React] Prop Types - 설정 가능한 컴포넌트 만들기 (0) | 2023.04.12 |
|---|---|
| [React] props(2) (0) | 2023.04.11 |
| [React] state와 useState 이해하기 - 단위변환기(2) (0) | 2023.04.11 |
| [React] state와 useStsate 이해하기 - 단위 변환기(1) (0) | 2023.04.11 |
| [React] 리액트 작동원리 이해하기(2) - JSX, state, useState (0) | 2023.04.10 |
