⚙️ State

• state : 상태
• 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 의미
• 화면에 보여줄 컴포넌트의 UI 정보(상태)
• Component 내에서 정의하고 사용하며 얼마든지 데이터가 변경될 수 있음.

<Function component | State 예시>

import React, { useState } from 'react';

function State() {
	const [color, setColor] = useState('red');

	return (
      <div>
        <h1>Function Component | State</h1>
      </div>
  );
}

export default State;

• state를 설정할 때는 useState 함수를 import 한 후 사용해야 한다.
• useState 함수는 컴포넌트 선언문(function State())과 return 문 사이에 작성한다.
• 배열의 첫 번째 요소는 상태값이 저장되는 변수이고, 두 번째 요소는 상태값을 갱신하는 함수이다.
• 위 예제에서는 state를 담는 변수를 color로, color의 값을 갱신하는 함수를 setColor로 그리고 color의 초기값을 red로 정의하였음

⛳️ State 사용 예시

-> state 에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면(UI)에 나타내기 위해서이다.

• return 문 안에 <h1> 타이틀 요소의 글자 색을 컴포넌트에서 설정한 state 값으로 하고 싶은 경우,

  <h1 style={{ color:  }}>Function Component | State</h1>

• useState 함수를 사용하여 지정한 state를 담는 변수, color라는 변수를 color 속성의 value로 지정해줌.

  <h1 style={{ color: color }}>Function Component | State</h1>
  
  // key값 color는 색상을 부여하기 위한 속성
  // value 값 color는 useState 함수를 통해 초기값인 'red'를 담고 있는 변수

위 예시처럼, state에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영에서 화면(UI)에 나타내기 위함이란 걸 알 수 있음.

🎱 Event & state 변경 예시

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;

- Event & State 코드 실행 단계

1. `<button>` 요소에서 `onClick` 이벤트 발생
2. color라는 상태값을 갱신하는 함수, `setColor` 함수 실행
3. setColor 함수를 실행시키면서 인자로 넘겨준 값 'blue'에 의해 color의 값이 'red' 에서 'blue'로 변경
4. 상태값이 바뀌게 되면서 함수 컴포넌트가 다시 render 되고 바뀐 state 값을 반영하여 `<h1>` 태그 글자 색상 변경