컴포넌트 안의 요소에 상태값을 반영해서 데이터가 바뀔 때 마다 효율적으로 UI에 나타내기 위해 State를 설정한다.
import React, { useState } from 'react';
function State() {
const [color, setColor] = useState('red');
return (
<div>
<h1>Function Component | State</h1>
</div>
);
}
export defa
function State()
와 return문 사이에 작성한다.import React, { useState } from 'react';
function State() {
const [color, setColor] = useState('red');
return (
<div>
<h1 style={{ color: color }}>Function Component | State</h1>
<button onClick={() => setColor('blue')}>Click</button>
</div>
);
}
export default State;
<button>
에 onClick 이벤트가 발생하면, setColor
함수가 실행되면서 color라는 상태값의 기본 값인 ‘red’가 ‘blue’로 변경된다.
// 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;
부모 컴포넌트 Parent에 자식 컴포넌트 <Child />
를 import 후 나타낼 위치에 태그 형식으로 작성한다. 자식 컴포넌트의 props
로 titleColor 속성을 생성하고 부모 컴포넌트의 state
인 {color} 값을 전달한다.
// 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 컴포넌트는 부모가 전달한 props를 인자로 받는다. props 데이터를 사용하기 위해서 props 객체의 특정 key값을 props.titleColor와 같은 형식으로 작성한다.
// 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;
// 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;
<button>
에 onClick 이벤트가 발생하면, props.changeColor
를 실행한다. 이때 changeColor는 부모 컴포넌트로부터 전달받은 setColor=(’blue’)함수를 실행한다. 컴포넌트에 변경된 state 데이터 color 전달되고, props.titleColor를 색상으로 지정하는 h1 타이틀 색상이 변경된다.