React setState를 작성하는 방법들

리액트는 배우면 배울수록 같은 내용도 새롭게 다가오는 듯 하다. 

 

오늘은 리액트 공식문서(해당부분)에서 setState를 사용하는 방법 두가지에 대해 학습했다.

 

1. pass the next state directly

 

function handleClick() {
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
}

// 변경된 age는 다음 렌더링부터 반영되므로, age는 계속 42의 값을 갖는다.

 

2. pass a function that calculates it from the previous state 

 

function handleClick() {
  setAge(a => a + 1); // setAge(42 => 43)
  setAge(a => a + 1); // setAge(43 => 44)
  setAge(a => a + 1); // setAge(44 => 45)
}

// by convention, state 이름의 첫번째 글자를 인자로 넘겨준다. (a for age)
// 아니면, prevAge 등으로 쓰기도 한다.

 

 -> updater function 

: must be pure, should take the pending state as its only argument, should return the next state 

-> React will put your updater function in a queue and re-render your component. 

 

 

* 몇가지 주의사항

- set 함수에서 변경된 값은 다음 렌더링에만 반영된다. 만약 set 함수를 통해 값을 변경하는 코드를 작성한 후, 바로 밑에 해당 state을 이용한 코드를 작성하면 리렌더링 이전의 state을 반영한 코드가 실행된다.

- 만약 새로운 값이 이전 state와 동일하면, React는 알아서 리렌더링을 스킵한다. 

- 리액트는 state 업데이트를 일괄적으로 모아서 처리한다(batch). 

- strict mode에서는 updater function이 두번 호출된다. (개발 모드에서만!) -> to help you find accidental impurities 

 

* Deep dive 

Q) updater function을 넘겨주는 것이 항상 더 좋은 방법일까?

A) 대부분의 경우에는 직접 인자로 넘겨주는 것과 updater 함수를 넘겨주는 것의 차이는 없다. 

그러나, updater function이 필요한 몇가지 경우가 있다.

- 같은 이벤트 내에서 여러번 업데이트가 일어날 때

- 직접 state variable에 접근하는 것이 불편할 때 

- 조금 더 길더라도 일관성 있는 코드 작성을 지향할 때 (+ state가 이전의 state로부터 연산될 때)

 

이러한 경우에는 항상 updater 함수를 써주는 것이 좋다. 

 

+ 현재 듣고 있는 강의 내용을 추가하자면, 

useEffect에서 의존성을 최소화할 때도

setState(prevState => prevState +1)

이런 식으로 updater function을 이용해 setState 함수를 작성하면 state를 의존성 배열에 넣어주지 않아도 된다!