State 란?

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로, 즉 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값이다

• 컴포넌트의 상태를 저장
• re-render 사이사이에 값이 변하지 않도록 기억
• 값이 변했을때는 컴포넌트가 다시 그려지도록 re-rendering을 트리거

State 사용해보기

1. State 선언

버튼을 클릭하면 h1 태그의 배경색이 바뀌는 동작 구현

// Main.js

import React, { useState } from 'react';

const Main = () => {
  // 변수 color, setColor는 다름 이름으로 바뀔 수 있습니다.
  const [color, setColor] = useState('red'); 
  //useState()함수의 반환값으로 두가지 값이 담긴 배열을 반환하게됨
  //color=red 인 상태이고 color값을 변경하고 싶을때는 
  //setColor 함수를 사용해 변경 가능

  	return (
    	<h1 style={
      		backgroundColor: {color}
		}>현재 배경색 red인 text</h1>
		<button onClick={() => setColor("blue")}>
          버튼클릭시 배경색 blue로 바뀜
        </button>
	);
};

export default Main;

• 먼저 state를 사용하기 위해 useState 함수를 import 해서 react로 부터 가져온다(react에 내장된 Hook의 일종)
• hook 사용규칙에 따라 컴포넌트 선언문 내 최상위 블록에서 사용
• useState hook으로부터 반환되는 값을 구조분해할당을 통해 각각의 변수에 담아서 사용
• setColor 함수는 기존 color의 상태를 바꾸는 함수이다

직접 color 변수값을 바꾸는 방법 VS setColor 함수를 통해 바꾸는 방법

직접 변수의 값을 바꿨을 때는 값은 바뀌었지만 화면에서 변화가 일어나지 않음

• state를 직접 할당으로 값을 변경하면 바뀐값을 기준으로 화면이 변하지 않음
• setState함수로 state를 변경하면 업데이트와 함께 화면을 다시 그려주는 (리렌더링)하게 되기 때문

State 끌어올리기

종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 필요가 있는데 이때,
가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다