Props
: 부모에서 자식으로 값을 내려준다. 컴포넌트 간의 정보 교류 방법
⭐props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향).
⭐props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다
props로 값 전달하기
전달하기 - [주체 : 부모]
우리는 컴포넌트 간의 정보를 교류할 때 Props를 사용
이 과정을 “Props 로 정보를 전달했다” 라고 표현
// 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;받기 - [주체 : 자식]
function Child(props){
console.log(props) // 이게 바로 props다.
return <div>연결 성공</div>
}
Mother가 보내준 정보가 객체 형태로
props란 결국 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음
리액트에서는 Props를 통해 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 넘겨줄 수 있다.
props로 받은 값을 화면에 렌더링 하기
function Child(props){
console.log(props) // 이게 바로 props다.
return <div>{props.motherName}</div>
}props는 object literal 형태이기 때문에 {props.motherName} 로 꺼내서 사용할 수 있습니다. object literal의 key가 motherName 인 이유는 우리가 Child로 보내줄 때 motherName={name}
🤔object literal 란 {key: “value”} 데이터 형태를 의미
prop drilling
[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 한다.
이걸 바로 prop drilling, props가 아래로 뚫고 내려간다. 라고 한다.
Props Children
컴포넌트에서 말하는 children
: 자식 컴포넌트로 정보를 전달하는 또 다른 방법!
우리는 이미 그 방법을 ‘props’라고 배웠다. 얘도 props!
props를 보내는 방식
<User>리액트 어려워</User> 이렇게 정보를 보내고 있다.
<User hello='리액트 어려워'> 이렇게 props를 보내던 방식과는 조금 다르다. 이것이 children props를 보내는 방식이다.
정보를 받는 방식은 기존과 동일합니다. 대신 그 이름이 children 으로 정해져 있습니다.
import React from "react";
function User(props) {
console.log(props.children)
return <div></div>;
}
function App() {
return <User>리액트 어려워</User>;
}
export default App;children 값 받아서 렌더링하기
User 컴포넌트에서 props.children을 받아 그대로 렌더링 해준 모습
import React from "react";
function User(props) {
return <div>{props.children}</div>;
}
function App() {
return <User>리액트 어려워</User>;
}
export default App;
Props 추출
구조분해 할당과 Props
지금까지 props를 사용하는 모든 곳에서 props. 를 붙여줬다.
자바스크립트의 구조 분해 할당을 이용하여 조금 더 짧게 쓰는 방법이 있다. 앞서 설명했듯이 props는 object literal 형태의 데이터이다. 그래서 구조 분해 할당을 이용할 수 있다.
만약 여러개의 props를 받는다면, { } 안에 여러개의 props를 그대로 써주면 된다.
function Todo({ title, body, isDone, id }){
return <div>{title}</div>
}
defaultProps
: 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값!
Child 컴포넌트 입장에서는 부모 컴포넌트에서 name을 props 정보를 받기 전까지는 name 이 없는 상태.
그래서 부모 컴포넌트에서 props를 받기전까지 임시로 사용 할 수 있는 props를 설정 할 수 있습니다. Child 컴포넌트에서 직접 가능하다!
이후에 부모 컴포넌트에서 name props가 오게되면 설정된 defaultProps는 사라지고 내려 받은 props로 값이 바뀌게 된다.
// components/Child.js
import React from 'react';
function Child({ name }){
return <div>내 이름은 {name} 입니다. </div>
}
// 이렇게 설정합니다.
Child.defaultProps={
name: '기본 이름'
}
export default Childdefault props 지정하기
defaultProps를 설정하면, 부모 컴포넌트로부터 아직 props 값을 받지 못했더라고 임시로 props의 값을 채울 수 있다.
그리고 부모 컴포넌트로부터 props가 오게되면 defaultProps 값은 진짜 props 값으로 변경된다.
// components/Child.js
import React from 'react';
function Child({ name }){
return <div>내 이름은 {name} 입니다. </div>
}
// 이렇게 설정합니다.
Child.defaultProps={
name: '기본 이름'
}
export default Child
<div ~~~~> 태그 옆에다가 주는 방법
태그 중간에 주는 방법{props.children}
나중에 정리하기..
'React' 카테고리의 다른 글
| React Hooks - useEffect (0) | 2023.04.19 |
|---|---|
| React Component (0) | 2023.04.18 |
| State 불변성 (0) | 2023.04.15 |
| State (0) | 2023.04.15 |
| JSX(JavaScript + XML) (0) | 2023.04.14 |
