useState, 제대로 알고 쓰시나요?

 

useState의 진짜목적

usestate는 변수가 아니다. 당연한 사실이고 잘알고있었는데 막상 쓰다보면 또 변수처럼 생각하고 있는 나자신을 발견한다;;

명심하자 state가 존재하는 이유는 값을 저장,수정,전달하는 것이 아닌 리렌더링을 하기 위함이다.

값이 바뀔때 리렌더링을 할수있게 해주는 트리거 역할을 해주는것이다.

 

 

useState는 즉시 업데이트 되지않는다.

import { useState } from 'react';

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

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>+3</button>
        // 예상: 3 증가
        // 실제: 1만 증가
    </>
  )
}

 

number에 +1을 3번 호출했는데도 1이 나온다. 왜그럴까?

state는 스냅샷처럼 동작한다. 렌더링 시점의 값을 그대로 사용하기 때문에, 이벤트 핸들러 안에서는 number가 계속 0인 것이다.

 

실제로 업데이트하고있는 큐에선 이렇게 쌓인다

setNumber(0 + 1);  // 큐에 추가
setNumber(0 + 1);  // 큐에 추가
setNumber(0 + 1);  // 큐에 추가

 

batching

state는 렌더링 도중에는 값을 저장하지않는다. 

이벤트가 끝날때까지 기다렸다가 한번에 렌더링되기때문에 number의 값은 초기값인 0이 되는것이다.

여기서 해당코드가 완료될때까지 기다리는 동작을 batching이라고 말한다.

 

React는 이벤트 핸들러의 모든 코드가 실행될 때까지 기다렸다가 한 번에 리렌더링한다.

batching을 하는 이유는 불필요한 리렌더링을 방지하고 성능 최적화을 하기위함이다.

 

 

 

그럼 useState는 어떻게 쓰는게 좋을까?

setNumber(n => n + 1);  // 이전 값 기반으로 계산
setNumber(n => n + 1);
setNumber(n => n + 1);

위 예시에서 계속 업데이트를 하고 싶은거라면 업데이트 함수를 이용하면 된다.

그러나 흔한 케이스는 아니기때문에 동작원리정도만 기억하자.

 

같은 맥락으로 state를 잘활용하는것, 즉 구조화를 하는것도 실력이다

 

 

오늘의 실습문제

수업에서 그 구조화전략을 몇가지 배웠지만 기억에 남는건 중복된 state을 쓰지말자였던것 같다.

 

위 코드를 보면

1. App에서 변경된 color값을 props로 보내고있고
2. Clock컴포에서 다시 color를 state로 관리를 하고있기때문에 버그가 발생한다.

 

 

문제는 Clock 컴포에서 초기 state값만 사용하고있기때문에
여기에 사용된 state값을 지우고 그냥 바로 props로 넣으면 바로 해결되는 간단한 문제였다.

 

 

항상 why를 생각해보자

이 사례만 봐도 필요하지않은 값을 state로 만들어 버그를 유발할수있다는것을 깨달을수있다.

어제 createPotal도 그렇고 react가 가지고 있는 목적과 철학에 대해 알수있는 수업이였다.

결과물에 있어 항상 why가 중요하다는건 개발뿐만 아니라 디자인에서도 일맥상통하는 부분이다.

그러니 꼭 목적을 알고 그에 맞게 쓰도록하자.

 

아빠어디가 10준수처럼 항상 왜?라고 생각해보자