props : properties(속성)
단어 뜻 그대로 컴포넌트의 속성값입니다.
props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체입니다.
props를 이용해 어떤 자바스크립트 값이든 모두 자식 컴포넌트에 전달할 수 있습니다.(변수, state 값, event handler 등)
위에서 props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체라고 했습니다.
함수 컴포넌트에서 props, 즉 컴포넌트의 속성을 어떻게 정의하는지 보겠습니다.
// Parent.js
import React, { useState } from 'react';
import Child from '../pages/Child/Child';
function Parent() {
const [color, setColor] = useState('red');
return (
<div>
<h1>Parent Component</h1>
<Child />
</div>
);
}
export default Parent;
Parent.js 부모 컴포넌트 입니다.
부모 컴포넌트 안에서 <Child/>
컴포넌트를 import 후 h1 태그
아래에 위치해주었습니다.
부모의 state{const [color, setColor] = useState('red')}
에 있는 데이터를 컴포넌트에게 props를 통해 넘겨보도록 하겠습니다.
// Parent.js
import React, { useState } from 'react';
import Child from '../pages/Child/Child';
function Parent() {
const [color, setColor] = useState('red');
return (
<div>
<h1>Parent Component</h1>
<Child titleColor={color} />
</div>
);
export default Parent;
자식 컴포넌트의 props
로 titleColor
속성을 생성해주었습니다.
titleColor
의 값으로 color
, 즉 부모 컴포넌트의 state인 color
값을 전달해주었습니다.
이러한 방식으로 props
를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있습니다.
<Child />
컴포넌트 내부에서 전달 받은 props 데이터를 어떻게 사용하는지 확인해보겠습니다.
props
는 객체입니다.Child.js
내부에서 props 객체가 어떻게 생겼는지 확인해보도록 하겠습니다.// Child.js
import React from 'react';
function Child(props) {
// console.log(props);
return (
<div>
<h1 style={{color : props.titleColor}}>Child Component</h1>
</div>
);
}
export default Child;
<Child />
컴포넌트 내부에 <h1>
태그가 있습니다.
해당 태그의 글자 색상을 부모 컴포넌트의 state
로 부터 전달 받은 데이터를 지정해주도록 하겠습니다.
함수 컴포넌트는 부모가 전달한 props
를 인자로 받습니다.
return 문 위에서props
값을 console.log로 확인합니다.
결과 확인 시 props 객체 안에 부모로 부터 전달받은 데이터가 key-value 형태로 담겨 있는 것을 확인할 수 있습니다.
<h1 style={{color : props.titleColor}}>Child Component</h1>
// props : 해당 컴포넌트의 props 객체
// props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"
props.titleColor
이렇게 작성해주면 됩니다.props를 통한 event handler 전달
// Parent.js
import React, { useState } from 'react';
import Child from '../pages/Child/Child';
function Parent() {
const [color, setColor] = useState('red');
return (
<div>
<h1>Parent Component</h1>
<Child titleColor={color} changeColor={() => setColor('blue')} />
</div>
);
export default Parent;
props
객체를 통해 state
데이터 뿐만 아니라 부모에서 정의한 event handler 함수
도 넘겨줄 수 있습니다.
props
의 changeColor
값으로 Parent 함수에서 정의한 setColor 함수
자체를 넘겨주고 있습니다
// Child.js
import React from 'react';
function Child(props) {
return (
<div>
<h1 style={{color : props.titleColor}}>Child Component</h1>
<button onClick={props.changeColor}>Click</button>
</div>
);
}
export default Child;
<Child />
컴포넌트 내부에 <button>
태그가 있습니다.
다음의 순서에 따라서 코드가 실행됩니다
.
<button>
요소에서 onClick 이벤트
발생
이벤트 발생 시 props.changeColor
실행
props 객체의 changeColor,
즉 부모 컴포- 넌트로부터 전달받은 setColor 함수 실행
setColor
함수 실행 시 state의 color 값이 blue 로 변경
<Child />
컴포넌트에 변경된 state 데이터(color) 전달
props.titleColor
를 글자 색상으로 지정하는 <h1>
타이틀 색상 변경