1. Props란?
ⅰ. props란?
- 컴포넌트 끼리의 정보교환 방식
- 부모 컴포넌트가 자식컴포넌트에게 물려준 데이터
- 반드시 기억해야 하는 2가지
- props는 반드시 위에서 아래 방향으로 흐름
=> 부모 -> 자식 방향으로만 흐른다!!(단방향)
- props는 반드시 읽기 전용으로 취급하며 변경하지 않음
- 부모 컨포넌트에서 자식컴포넌트로 props전달 방법
import React from "react";
const Son = () => {
return <div>나는 아들이에요</div>;
};
// 부모 -> 자식으로 정보를 전달
const Mother = () => {
const name = "흥부인";
return <Son motherName={name} />;
};
const GrandFather = () => {
return <Mother />;
};
const App = () => {
return <GrandFather />;
};
export default App;
- 자식컴포넌트에서 props 받고 화면에 렌드링 하기
// props를 통해 부모 -> 자식 데이터가 전달됨
const Son = (props) => {
console.log(props); // object 형태로 전달 받고 motherName은 흥부인
console.log(`props ${props.motherName}`); // props 흥부인
return <div>나는 {props.motherName}의 아들이에요</div>;
};
ⅱ. props를 사용해서 문제 풀어보기
- 요구사항
- GrandFater 컴포넌트에서 GrandFaterName을 만들어서 화면에 렌더링 해보기
import React from "react";
const Son = (props) => {
return <div>나는 {props.grandFatherName}의 손자에요</div>;
};
const Mother = (props) => {
return <Son grandFatherName={props.grandFatherName} />;
};
const GrandFather = () => {
const name = "할아버지";
return <Mother grandFatherName={name} />;
};
const App = () => {
return <GrandFather />;
};
export default App;
ⅲ. props drilling
- 부모 -> 자식 -> 그 자식 -> 그자식의 자식이 데이터를 받기 위해서는 3번이나 데이터를 내려줘야 하는데 이걸 바로 props drilling(props가 아래로 뚫고 내려간다.)
- 데이터를 전달해주기 위한 용도로만 쓰이는 컴포넌트들이 생김
- 이와 같은 패턴을 피하기 위해서 Redux와 같은 데이터 상태 관리툴이 생김
2. Props Childeren
ⅰ. children이란?
// src/App.js
import React from "react";
const User = () => {
return <div></div>;
}
const App = () => {
return <User>안녕하세요</User>;
}
export default App;
- User컴포넌트 사이에 안녕하세요라는 문장이 있지만 실질적으로 화면에 출력되지 않음
=> why? 이값을 출력해주는 프레젠테이션 해 주는 부분이 없기때문에
- 부모컴포넌트에서 자식컴포넌트로 <User>안녕하세요</User>형태로 데이터를 내려주고 있기는 함
이것도 props의 한 형태 => 이것이 바로 Children props
- 자식컴포넌트 여는 태그, 닫는태그 사이에 어떠한 값을 둔다면 children으로서 인식이 돼서
const User = (props) => {
console.log(props.children) // {children: '안녕하세요'}
return <div>{props.children}</div>;
}
ⅱ. children 의 용도
// App.js
import React from "react";
import Layout from "Layout";
const App = () => {
return (
<Layout>
<div>App 컴포넌트에서 보낸 값입니다.</div>
</Layout>
);
};
export default App;
// Layout.js
import React from "react";
const Layout = (props) => {
return (
<div>
<header style={{ margin: "10px", border: "1px solid red" }}>
항상 출력되는 머릿글입니다.
</header>
{props.children}
</div>
);
};
export default Layout;
- Layout에 있는 header가 보여지게 되고, "항상 출력되는 머릿글입니다."라는 문장이 layout의 props로 전달되는것
- header 컴포넌트를 layout 컴포넌트에서 한번만 작성하면 여러 페이지에서 모두 보여지게됨
3. props의 추출
ⅰ. 구조분해 할당과 props
- 구조분해할당이란 구조화 되어있는것을 다시 분해해서 할당하는것을 의미함
const testObj = {
name: 'wonjang',
age: 21,
company: 'Sparta'
}
const {name, age, company} = testObj
console.log(`name ${name}`);
console.log(`age ${age}`);
console.log(`company ${company}`);
// App.js
import React from "react";
import Child from "Child";
const App = () => {
const name = "test";
return (
<Child age={21} name={name}>
이름
</Child>
);
};
export default App;
// Child.js
import React from "react";
const Child = ({ age, name, children }) => {
console.log(age);
console.log(name);
console.log(children);
return <div>Child</div>;
};
export default Child;
- props를 구조분해 하는 방법의 장점
- Child 컴포넌트에서 어떠한 props들이 실제로 사용되는지 직관적으로 알 수 있음
ⅱ . defaultProps란?
- 부모컴포넌트에서 props를 보내주지 않아도 설정될 초기값
- defaultProps 설정방법
// App.js
import React from "react";
import Child from "Child";
const App = () => {
const name = "test";
return (
<Child name={name}>
이름
</Child>
);
};
export default App;
// Child.js
import React from "react";
const Child = ({ age, name, children }) => {
console.log(age);
console.log(name);
console.log(children);
return <div>Child</div>;
};
Child.defaultProps = ({ // 기본값 설정방법
age: "기본나이"
})
export default Child;
- 위에 형태는 함수에서 Default Argument 를 설정하는 방법과 유사
ⅲ. Default Argument
- 매개변수가 지정되지 않았으면 자동ㅇ로 지정해줄 값을 정하라는 의미
const multiply = (a, b = 1) => {
return a * b
}
console.log(multiply(5, 7)) // 35