부모 컴포넌트에서 내려준 값을 자식 컴포넌트에서 사용하는 것을 의미
컴포넌트에서 다른 컴포넌트로 데이터 전달(props 전달)
전달기능(함수)는 부모 컴포넌트에서 구현 부모->자식에게 전달(형제 컴포넌트는 서로 props를 전달할 수 없다)
자식 컴포넌트에서 부모 컴포넌트로 콜백 함수를 사용하여 props를 전달할 수 있음
부모 -> 자식에게 전달
// 부모
import React from 'react';
import Child from './Child';
const Parent = () => {
return(
<div>
<Child money={1000}/>
<!-- money로 props의 속성을 지정 후 값 1000을 할당 -->
</div>
);
};
<!-- 자식 -->
import React from 'react';
const Child = (props) => {
<!-- money -->
return(
<div>
<p>{props.money}</p>
<!-- props 속성에 접근하기 위해 props.money 사용 -->
</div>
);
};
자식 -> 부모에게 전달
// 부모
import React from 'react';
import Child from './Child';
const Parent = () => {
function Click(money){
alert(money);
};
// 부모에서 함수 구현
return(
<div>
<Child money={1000} Click={click} />
</div>
);
};
<!-- 자식 -->
impore React from 'react';
const Child = (props) => {
return(
<div>
<button onClick={() => {
props.Click(props.money);
}};
>
값 전달
</button>
</div>
);
};
부모 컴포넌트에서 전달하는 props 값이 없을 때
// 부모
import React from 'react';
import Child from './Child';
const Parent = () => {
return(
<div>
<Child />
</div>
);
};
<!-- 자식 -->
import React from 'react';
const Child = (props) => {
return(
<div>
<p>{props.money}</p>
<!-- ? 값이 없을경우 -->
</div>
);
};부모 컴포넌트에서 props를 전달하지 않을 경우 기본값을 설정
기본 값은 컴포넌트 밖에, 자식 컴포넌트 안에서 선언해준다
// 자식 컴포넌트
import React from 'react';
const Child = (props) => {
return(
<div>
<p>{props.money}</p>
</div>
);
};
// 기본 값 설정 !
Child.defaultProps = {
money: 10000
}
// 기본 값의 propTypes 설정
// 설정한 type과 다를 경우 콘솔창에 오류 발생
// import PropTypes from "prop-types"; 해줘야함
// isRequired - 필수 입력
Child.defaultProps = {
name: PropTypes.string.isRequired,
children: PropTypes.number
};++
// 자식 컴포넌트
import React from 'react';
const Child = (props) => {
return(
<div>
<p>{props.money}</p>
</div>
);
};
const Child = (props) => {}
// 요즘에는 이렇게 안하고
const Child = ({ name, color, subject = "먼지" }: Child) => {}
// 이런식으로 많이 사용한다고 함
사용 예시
import React from 'react';
import Child from './Child';
const Parent = () => {
return(
<div>
<Child name="dust" color="black" subject="먼지" />
<Child name="berry" color="red" subject="빨강" />
<Child />
</div>
);
};
//
import React from 'react';
const Child = (props) => {
return(
<div>
<p style={{ color: props.color }}>{props.name}는 {props.subject}(이)야</p>
</div>
);
};
Child.defaultProps = {
name: 'sea',
color: 'blue',
subject: '파랑'
}
결과
import React from 'react';
import Child from './Child';
const Parent = () => {
return(
<div>
<Child name="dust" color="black" subject="먼지" />
<Child name="berry" color="red" subject="빨강" />
<Child />
</div>
);
};
//
import React from 'react';
////////////// 변경된 부분 ////////////////////////
const Child = ({ name, color, subject }) => {
return(
<div>
//////////// props. 를 제외하고 변수명만 적어줌
<p style={{ color: color }}>{name}는 {subject}(이)야</p>
</div>
);
};
Child.defaultProps = {
name: 'sea',
color: 'blue',
subject: '파랑'
}또는 이런식으로 변경할 수 있다
props.children
import React from 'react';
import Child from './Child';
const Parent = () => {
return(
<div>
<Child>먼지</Child>
</div>
);
};
//
import React from 'react';
const Child = (props) => {
return(
<div>
<p>{props.name}는 {props.children}(이)야</p>
<!-- dust는 먼지야 -->
<!-- default 값은 밑에서 가져오고 children 값은 태그 내에 있는 값을 가져옴 -->
</div>
);
};
Child.defaultProps = {
name: 'dust'
}사용 예시
import React from 'react';
import Child from './Child';
import Hello from './Hello';
const Parent = () => {
return(
<div>
<Child>
<p>먼지</p>
<Hello color="pink" />
</Child>
</div>
);
};
<!-- -->
import React from 'react';
const Child = ({ name="dust", children }) => {
return(
<div>
<p>{name}는 {children}</p>
<!--
dust는 먼지
안녕하세요!
/ 출력
-->
</div>
);
};
const Hello({ color }) => {
return <div style={{ color }}> 안녕하세요!(분홍색) </div>
}
여러개의 props
const Parent = () => {
const dust = {
name: 'dust',
color: 'black',
subject: '먼지'
};
<!-- const { name, color, subject } = dust; 생략가능 -->
const dust2 = {
name: 'dust2',
color: 'white',
subject: '먼지2'
};
// 이렇게도 쓸 수 있는지?
<!-- const { name, color, subject } = dust2; 생략가능 -->
return(
<div>
<Child {...dust} />
// 속성값 전부 불러오기
<Child {...dust2}/>
</div>
);
};
//////////////////////////////////////
const Child = ({ color, name, subject }) => {
return(
<div>
<p style={{ color }}>{name}는 {subject}(이)야</p>
<!--
변수명은 달라야하기 때문에 이렇게 사용은 불가능 함
한줄에 dust, dust2를 같이 불러오기x
그렇게 하고 싶을경우 배열로 넘기거나 아니면 변수명이 달라야함
-->
</div>
);
};
Child.defaultProps = {
name: 'sea',
color: 'blue',
subject: '파랑'
}
