📌 Props
지금까지 우리는 부모 컴포넌트인 App과 그의 자식 컴포넌트들인 MinutesToHours과 KmToMiles을 이용하여 코드를 작성하였고, 부모 컴포넌트 App은 자식 컴포넌트들을 render하였다.
⭐ Props
props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방법이다.
props의 예시를 알아보기 위해 다음과 같이 코드를 초기화한다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
return(
<div></div>
)
}
ReactDom.render(<App />, root);
</script>
</html>
props 예시)
1. SaveBtn 컴포넌트와 ComfirmBtn 컴포넌트를 만들어 주었고, 이것을 App 컴포넌트의 자식 컴포넌트로 넣어 화면에 render 시키는 코드를 작성한다.
컴포넌트: 어떤 JSX를 반환하는 함수 (or 클래스)
// 함수형 컴포넌트 SaveBtn
function SaveBtn() {
return <button>Saves Changes</button>;
}
// 함수형 컴포넌트 ComfirmBtn
function ConfirmBtn() {
return <button>Confirm</button>;
}
function App() {
return (
// JSX의 내부
<div>
<SaveBtn />
<ConfirmBtn />
</div>
);
}
2. button에 style 속성을 부여해 준다. style 속성의 값을 작성할 때는 js 객체를 작성하듯이 작성하면 된다.
function SaveBtn() {
return (
<button
style={{ // 주목!
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
Saves Changes
</button>
);
function ConfirmBtn() {
return (
<button
style={{ // 주목! (SaveBtn 컴포넌트에서 작성한 style 복붙)
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
Confirm
</button>
);
3. but 위와 같은 방식으로 style을 복사 붙여넣기 하는 것 대신, 위와 같은 style 설정 코드를 넘겨 줄 수 있는 컴포넌트가 존재한다면 더 좋을 것이다.
위의 경우 button tag부터 style 내용까지 전부 같고, text 내용만 다르기 때문이다.
이때 'props'를 사용하여 코드를 작성한다.
function Btn(props) {
console.log(props);
// 결과
// {banana: 'Save Changes', x: false}
// {banana: 'Continue', y: 7}
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
Saves Changes
</button>
);
}
.....
function App() {
return (
<div>
<Btn banana="Save Changes" x={false} /> // 주목!
<Btn banana="Continue" y={7} /> // 주목!
</div>
);
}
- Btn 컴포넌트에 banana라는 속성(props)을 부여해 주었고, 그의 값은 "Save Changes"와 "Continue"라고 적어 주었다. 또한 각각 다른 prop인 x와 y도 부여해 주었다.
- banana든 다른 어떤 prop이든 특정 컴포넌트에 보내면 적어준 prop 순서대로 그 컴포넌트(함수)의 인자로 들어가게 된다. 이것을 React.js가 자동으로 해 주는 것이다.
- props는 첫 번째이자 유일한 인자로, 위의 예시에서는 Btn이 전달 받는 유일한 인자라고 설명할 수 있다. 그리고 props는 우리가 보낸 모든 것들을 받는 object(객체) 이다.
- 따라서 위의 console.log(props)의 결과로 전달된 props와 그 값을 담은 객체 2개가 출력(Btn 컴포넌트를 2번 써주었으므로)되게 된다.
4. 이어서 props를 활용해 보겠다.
function Btn(props) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{props.banana} // 주목!
</button>
);
}
.....
function App() {
return (
<div>
<Btn banana="Save Changes" x={false} />
<Btn banana="Continue" y={7} />
</div>
);
}
props는 객체라고 하였다. props는 우리가 Btn 컴포넌트의 속성으로 적어준 모든 것이 저장되어 있다.
따라서 props 중에서도 banana라는 prop에 접근하기 위하여 'props.banana' 이렇게 점 표기법을 사용해 주었다. js 객체에서 key를 통해 value에 접근하는 방식과 같다.
결과로는 Save Changes와 Continue가 각각의 버튼의 내용으로 들어가게 된다.
[shortcut]
function Btn({ banana }) {
// 주목!
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{banana} // 주목!
</button>
);
}
props 객체 전체를 인자로 받지 않고, banana라는 특정 속성을 Btn의 인자로 작성해 주었다. 그러면 이것을 활용할 때 이전처럼 {props.속성명} 이렇게 적어주지 않고 그냥 바로 {속성명} 처럼 사용하면 된다.
추가로 알아두기
- prop의 이름은 자신이 필요한 대로 정하면 된다.
- 바로 위와 같은 방식으로 prop을 전해줄 때, 여러개를 전해주고 싶으면 중괄호 안에 속성명을 여러 개 적으면 된다.
- 만약 전달해 주지 않은 속성을 사용한다면, undefined가 전해진다.
댓글