[4# useState_ State] State? React의 꽃 State

목차 :

1. State?

 

---

 

1. State?

State는 상태를 의미하며, 상태는 계속 변화하는 값이다.

React에서 Hook이라 부르는 State는 동적으로 변하는 값이고 값에 따라 수행이 달라진다.

 

Component안에 사용하는 State는 Component가 직접 관리하며

기본적으로 아래 코드 처럼 사용된다.

 

import React, { useState } from 'react';

function Counter() {
  // 상태 변수 count와 해당 변수를 업데이트하는 함수 setCount를 정의합니다.
  // useState 함수는 초기 상태값을 인자로 받고 해당 상태 변수와 업데이트 함수를 반환합니다.
  const [count, setCount] = useState(0);

  // 상태 변수 count를 변경하는 함수를 정의합니다.
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

 

위 코드를 보면 React Library에서 useState를 가져와 사용한다.

 

  const [count, setCount] = useState(0);
  	
 // count : state 변수
 // setCount : state 변수의 상태를 변화 시키는 함수 
 // useState(0) : state 변수를 0값으로 초기화 시킨다.

 

위 state 선언 부분에서 상태 변화 함수(setState)는

비동기적으로 동작하며 상태 업데이트를 예약해놓고 React가 나중에 처리하게 한다.

 

state가 업데이트 되면 반드시 React는 변한 state를 관리하는 Component를 Re-rendering 한다.

변화 함수에 값을 넣게 되면 state가 해당 값으로 변경되며 
변화 함수에 두번째 인자로 callback 함수를 포함시킬 수 있으며 callback함수는 state 업데이트 후 호출된다.

 

*여기서 React에서 Re-rendering되는 조건은 아래와 같다.

1) state가 업데이트 될 경우

2) 상위 부모 Component로 부터 전달받은 props가 업데이트 될 경우

3) 상위 부모 Component가 Re-rendering 될 경우