[React 스터디 - 4] State

React 공식문서:
https://ko.reactjs.org/docs/state-and-lifecycle.html
https://ko.reactjs.org/docs/faq-state.html

State

state는 영어로 상태를 의미하는 단어로, 리액트에서는 React component의 상태, 더 정확히는 component의 변경 가능한 데이터를 의미한다. props와 마찬가지로 App component 렌더링에 영향을 주는 JavaScript 객체로, 개발자가 직접 정의해서 사용한다.

 

생활코딩 React 2022 state 영상 설명 이미지

불변성 immutable

state는 불변성(immutable), 변하지 않는 성질을 가지고 있다. 이는 프로그래밍에서는 메모리 영역의 값을 직접적으로 변경하지 않는다는 것을 의미한다. 불변성을 지키지 않고 메모리 영역의 값을 직접 변경하면 리액트는 state가 바뀌었다고 인지하지 못해 리렌더링이 발생하지 않는다. 이는 리액트가 이전 state와 이후 state를 비교할 때, 얕은 비교(shallow compare = 저장된 메모리 주소가 같으면 같다고 판단)를 하기 때문이다.

props 와 State

props (properties) 와 state  두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데,  props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이점을 가지고 있다.

state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다.

 

props	state
부모 컴포넌트가 자식 컴포넌트에게 전달하는 값	자신(컴포넌트)이 스스로 관리하는 상태값
읽기 전용이라 값을 자신(자식 컴포넌트)이 변경할 수 없음 (=컴포넌트를 사용하는 외부자를 위한 데이터)	값을 자신이 변경할 수 있음 (=컴포넌트를 만드는 내부자를 위한 데이터)
props 를 통해 값을 내려받거나, 자신이 관리하고 있는 state가 변경되면 컴포넌트 렌더링이 발생

State의 사용법

Hook 함수 - useState()

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었으나, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 내부적으로 상태를 관리할 수 있게 되었다. 이 Hook 함수 중 하나가 useState()이다.

 

useState()는 [state, setState]라는 두 가지 요소를 가진 배열을 반환한다.

state는 관리하는 값을 뜻하고, setState는 관리하고 있는 값을 변경할 때 쓰는 함수로, 컴포넌트의 re-rendering을 발생시킨다.

 

아래는 Counter 예제 코드이다.

//Counter.js
import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

* 코드 출처: https://react.vlpt.us/basic/07-useState.html

 

원시 타입 (primitive type), 참조 타입(Reference type)

 

원시 타입	참조 타입
boolean, number, string	Object
불변성을 가지고 있음	불변성을 가지지 않음
변수에 원시 타입의 값을 할당하면,  메모리에 값 자체가 저장됨	변수에 참조 타입의 값을 할당하면  메모리 값이 담긴 주소가 저장됨

State 사용 시 유의점

1. 직접 state를 수정하지 않는다.

state는 불변성을 유지해야 하는 객체이기 때문에 직접 수정해서는 안 된다. 컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데, state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있어 리렌더링을 위해서는 setState()를 사용해야 한다.

 

2. state 업데이트는 비동기적일 수 있다.

리액트는 성능을 위해 여러 setState()의 호출을 단일 업데이트로 한 번에 처리할 수 있다. 이로 인해 this.props와 this.state가 비동기적으로 업데이트 될 수 있다. 비동기적 업데이트로 인해 state가 직접 수정되어 여러번 상태를 업데이트 하는 경우, 이전 업데이트 내용이 다음 업데이트 내용에 덮어 쓰여질 수가 있어 예상치 못한 곳에서 버그가 발생 할 수 있다.

 

3. state 업데이트는 병합된다.

이 부분은 위에서 언급한 setState를 단일 업데이트로 처리하는 것과 연관이 있다. setState() 호출 시 리액트는 제공한 객체를 현재 state로 병합하면서 단일 업데이트로 처리되기 때문에 위와 같은 상황이 발생할 수 있다.

---

참고 자료

 

React 공식문서

https://react.vlpt.us/basic/07-useState.html

https://velog.io/@hidaehyunlee/React-State-%EB%9E%80

https://mari-mo.tistory.com/214