2023.02.04
Props의 개요
props란?
컴포넌트 끼리의 정보교환 방식이다.
부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터. 즉, 컴포넌트 간의 정보 교류 방법이다.
- props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향).
- props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.
props로 값 전달하기
(1) 전달하기 - [주체 : 부모]
Mother 컴포넌트가 가지고 있는 정보(값)를 Child에게 주고 싶을 때는 아래 코드와 같이 합니다.
// src/App.js
import React from "react";
function App() {
return <GrandFather />;
}
function GrandFather() {
return <Mother />;
}
function Mother() {
const name = '홍부인';
return <Child motherName={name} />; // 💡"props로 name을 전달했다."
}
function Child() {
return <div>연결 성공</div>;
}
export default App;
(2) 받기 - [주체 : 자식]
컴포넌트의 인자에서 props의 값을 받을 수 있다.
function Child(props){
console.log(props) // 이게 바로 props다.
return <div>연결 성공</div>
}- props란 결국 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음.
- 리액트에서는 Props를 통해 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 넘겨줄 수 있다.
props로 받은 값을 화면에 렌더링 하기
코드로 살펴보기
props는 object literal 형태이기 때문에 {props.motherName} 로 꺼내서 사용할 수 있다. object literal의 key가 motherName 인 이유는 우리가 Child로 보내줄 때 motherName={name} 으로 보내주었기 때문이다.
import React from "react";
// div안에서 { } 를 쓰고 props.motherName을 넣어보세요.
function Child(props) {
return <div>{props.motherName}</div>;
}
function Mother() {
const name = "홍부인";
return <Child motherName={name} />;
}
function GrandFather() {
return <Mother />;
}
function App() {
return <GrandFather />;
}
export default App;prop drilling
[부모] → [자식] 컴포넌트간 데이터 전달이 이루어지는 방법이 props.
[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 한다. 이걸 바로 prop drilling, props가 아래로 뚫고 내려간다는 뜻이다.
아래와 같은 예시는 피해주어야 한다.
export default function App() {
return (
<div className="App">
<FirstComponent content="Who needs me?" />
</div>
);
}
function FirstComponent({ content }) {
return (
<div>
<h3>I am the first component</h3>;
<SecondComponent content={content} />|
</div>
);
}
function SecondComponent({ content }) {
return (
<div>
<h3>I am the second component</h3>;
<ThirdComponent content={content} />
</div>
);
}
function ThirdComponent({ content }) {
return (
<div>
<h3>I am the third component</h3>;
<ComponentNeedingProps content={content} />
</div>
);
}
function ComponentNeedingProps({ content }) {
return <h3>{content}</h3>;
}이를 피하기 위해 나중에 ‘Redux’와 같은 데이터 상태관리 툴을 배워야 한다.
Props Children
children이란?
자식 컴포넌트로 정보를 전달하는 또 다른 방법. props의 한 종류.
children 값 받아서 렌더링하기
import React from "react";
function User(props) {
return <div>{props.children}</div>;
}
function App() {
return <User>안녕하세요</User>;
}
export default App;<User hello='안녕하세요'/> 이렇게 props를 보내던 방식과는 조금 다르게 <User>안녕하세요</User> 이렇게 정보를 보내는게 children props를 보내는 방식이다.
자식 컴포넌트에서 정보를 받는 방식은 기존과 동일하나 그 이름이 children 으로 정해져 있다.
children의 용도
Layout 컴포넌트를 만들 때 자주 사용한다.
Layout 컴포넌트 안에는 header 라는 컴포넌트가 있고, header 아래에 {props.children} 를 통해서 props를 받아 렌더링을 하게된다. 즉, Layout 컴포넌트가 쓰여지는 모든 곳에서 <Layout>…</Layout> 안에 있는 정보를 받아서 가져올 수 있는 것이다.
// src/About.js
import React from "react";
import Layout from "./components/Layout";
function App() {
return (
<Layout>
<div>여긴 App의 컨텐츠가 들어갑니다.</div>
</Layout>
);
}
export default App;
Props 추출
구조분해 할당과 Props
지금까지 자식 컴포넌트에서 props를 받을 때 이렇게 했다.
function Todo(props){
return <div>{props.todo}</div>
}문제는 없지만 todo 라는 props를 사용하는 모든 곳에서 props. 를 붙여줘야만 한다.
이것을 조금 더 짧게 쓰는 방법으로는 자바스크립트의 구조 분해 할당을 이용하는 것이다. props는 object literal 형태의 데이터 이기때분에 이를 이용할 수 있다.
function Todo({ title }){
return <div>{title}</div>
}
// 여러개를 받아올때
function Todo({ title, body, isDone, id }){
return <div>Todo</div>
}defaultProps
defaultProps란, 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값 이다.
컴포넌트를 만들고 자식 컴포넌트에서 props를 받다보면, 자주 받거나 또는 무조건 받아야 하는 props들이 있다.
// components/Child.js
import React from 'react';
function Child({ name }){
return <div>내 이름은 {name} 입니다. </div>
}
export default ChildChild 컴포넌트 입장에서는 부모 컴포넌트에서 name을 props정보를 받기 전까지는 name 이 없는 상태이다. 화면에 아무것도 표시해주지 못하게 되는데, 이럴때를 대비해 임시로 사용할 수 있는 props를 설정 할 수 있다.
// components/Child.js
import React from 'react';
function Child({ name }){
return <div>내 이름은 {name} 입니다. </div>
}
// 이렇게 설정합니다.
Child.defaultProps={
name: '기본 이름'
}
export default Child이후에 부모 컴포넌트에서 name props가 오게되면 설정된 defaultProps는 사라지고 내려 받은 props로 값이 바뀌게 된다.
Default Argument
매개변수가 지정되지 않았으면 자동으로 지정해줄 값을 정하라는 의미.
function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5, 2));
// Expected output: 10
console.log(multiply(5));
// Expected output: 5