성능 최적화를 위해 (prev => 함수형 업데이트)

함수형 업데이트

• useState 는 이전 state 값을 인자로 자동으로 받아오는 콜백 함수를 인자로 넣을 수 있다

useState((prev)=> prev+1); // number
useState((prev)=> {...prev, newID: newValue}) // object
useState((prve)=> [...prev, newValue]) // array

함수형 업데이트 쓰는 이유

• useCallback , useMemo 에서 성능 최적화 작업
  • 두번째 인자로 들어가는 dependency array의 요소를 줄일 수 있음

  // state의 값이 바뀐다고, useCallback이나 useMemo를 다시 할당할 이유가 없음.
  // 그러나 아래와 같이 함수형 업데이트를 사용하지 않으면, 반드시 재할당해야함 
  // 이전 state 값을 자체적으로 가지고 있기 때문

  const onChange = useCallback(e=> {
    const {name, value} = e.target;
    setUser({
      ...user,
      name: value,
    })
  }, [user]); // 반드시 두번째 인자로 user를 넘겨줘야함

// 함수형 업데이트에서는 setState자체에서 이전 state값을 가져옴
// 따라서 dependency로 넘겨주지 않아도 되고
// state가 갱신될때 마다 해당 Hook을 재할당하지 않아도 됨
const onChange = useCallback(e=> {
  setUser((prev)=>{
    const {name, value} = e.target;
    return {
      ...prev,
      name: value,
    };
  })
}, []); // 더이상 user 관련하여 재할당하지 않음

• 이전 state 값을 가져오는 것을 항상 보장할 수 있음

// 아래와 같이 아예 다른 state값을 할당해야 한다면 
// 함수형 업데이트는 필요하지 않을 수도 있음.
const onChangeName = (event) => {
  const newName = event.currentTarget.value;
  setName(newName);
};

// 하지만 대다수의 state (특히 객체와 배열) 는 이전 상태가 필요함.
// 이 경우 함수형 업데이트가 필요함
const onAddUser = (event) => {
  setUser((prev)=>{
    const newUser = event.currentTarget.value;
    return [...prev,newUser];
  })
}

• setState 관련 로직이 좀 더 깔끔해짐
  • 새로운 state 와 관련된 모든 로직을 setState 안에 넣기 때문

// not good, 깔끔하지 못한 setState
const onClick = () =>{
  const newId = 3;
  const newValue = "안녕하세요";
  setState({
    ...state,
    newID: newValue,
  })
}

 // good, 새로운 state와 관련된 모든 로직이 setState안에 들어있어서 구분이 깔끔함
const onClick = () => {
  setState((prev)=>{
    const newId = 3;
    const newValue = "안녕하세요";
    return {...prev, newID: newValue};
  }
           }

참고 - https://velog.io/@dongdong98/React-Hook-%EC%B4%9D%EC%A0%95%EB%A6%AC