[React]useState

---

1. State란?

• 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값.
• 컴포넌트 내에서 정의하고 사용하며 얼마든지 변경 가능하다.
  
  

2. State 사용

2-1. State 선언
const [color, setColor] = useState('black')
첫번째 요소인 color는 현재 상태, 두번째 요소인 setColor는 상태 변화 함수다. useState에는 'black'처럼 기본 값을 설정해줄 수 있다.

import React, { useState } from 'react';
const Main = () => {
  const [color, setColor] = useState('black');
  return <h1>환영합니다!</h1>;
};
export default Main;

• 첫 번째 요소 state 를 통해 동적으로 관리하고자 하는 값을 할당해주고 useState hook 호출시 인자로 넘겨준다.
  
• 두 번째 요소 setState 함수로 state를 업데이트.
  
  

2-2. State 적용

import React, { useState } from 'react';
const Main = () => {
  const [color, setColor] = useState('black');
  return <h1 style={{backgroundColor: color}}>환영합니다!</h1>;
	<button onClick={() => setColor('yellow')}>Change Color</button>
};
export default Main;

• 동적 값을 활용할 수 있게 {backgroundColor: color} 와 같은 미리 선언한 state 값 넣어준다.
• 버튼에 onClick 이벤트 핸들러를 추가해서 setColor 함수로 color 변경 로직을 넣어주면 클릭 버튼을 누름과 동시에 '환영합니다!' 글씨의 배경이 노란색으로 변한다.
• setColor를 통해야만 값의 업데이트와 리렌더링의 효과를 동시에 볼 수 있다.