[React] State

출처: https://ko.reactjs.org/docs/faq-state.html

컴포넌트 State – React

State and Lifecycle – React

---

1. Props VS State

공통점

• 두 객체 모두 일반 JavaScript 객체이다.
• 두 객체 모두 렌더링 결과물(현재 화면에 보이는 것)에 영향을 주는 정보를 갖고 있다.

 

차이점

• props는 (함수 매개변수처럼) 컴포넌트에 전달된다. 또한, props는 순수함수처럼(읽기전용) 사용해야하므로 컴포넌트 내부에서 값을 변경할 수 없다.
• state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다.

 

순수함수: 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수

---

2. setState

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다.

 

하지만 setState 호출은 비동기적으로 이뤄진다. 따라서 setState 호출 직후 새로운 값이 반영될 거라고 생각하면 안된다. 

 

이전 state 값을 기준으로  값을 계산해야 한다면 객체 대신 함수를 전달하면된다.

import { useState } from "react"

export default function State() {
    const [state, setState] = useState(0);
    
    return (
        <div>
            <div>{state}</div>
            <button onClick={()=>setState(state + 1)}>더하기</button>
            <button onClick={()=>setState(state - 1)}>빼기</button>
        </div>
  );
}