2024.2.7 기록 (함수형 업데이트의 사용)

함수형 업데이트를 사용하는 이유 중 하나는, 상태값을 변화시키는 도중에 발생 할 수 있는 비동기로 업데이트 되는 부분에 의한 문제 발생을 방지하기 위함이다.

 

 

예시로 많이들 볼 수 있는 예제이다

const [count, setCount] = useState('');


return(
<>
	...
    onChange= {() =>{
	setState(count + 1)
	setState(count + 1)
	setState(count + 1) 
    }}

</>)

 

이런 방식으로 작동 됐을 때 업데이트는 마지막 setState만을 적용한다. 리액트는 배치(batch) 업데이트를 사용하기 때문이다.

 

그렇기 때문에 우리는 함수형 업데이트를 도입했고 다음과 같은 형태를 자주 마주하게 된다.

const [count , setCount] =useState('');

return (
<>
	...
    onChange = {() =>{
    
    setCount(count => count + 1)
    setCount(count => count + 1)
    setCount(count => count + 1)
    }}
</>)

 

 

이러한 축약형은 앞서 말했듯, 비동기 업데이트로 인한 문제가 발생할 수 있는 리액트의 환경에서 오류를 피할 수 있는 좋은 방식임과 동시에 많은 축약을 이루어 낼 수 있다.

 

물론 이 방식이 무조건적으로 좋다기보다는, 이전 상태값을 변화시키는 방식을 구현할 때 사용할 수 있는 방법 중 하나이다.

 

아래는 몇가지 예시를 들어보았다.

const [list, setList] = useState ('');


  const addList = (idx) => {
    setList(prevList => prevList.map((item) =>
      item.idx === idx ? {...item, count: item.count + 1} : item))
  }

  //함수형 업데이트를 사용하지 않으면 다음과 같이 사용할 수도 있다.

  const addList = (idx) => {
    const newList = list.map((item) =>
      item.idx === idx ? { ...item, count: item.count + 1 } : item)
    setList(newList)
  }

  ////////////
  
  const minusList = (idx) => {
    setList(prevList => prevList.map((item) => {
      if (item.idx === idx) {
        if (item.count > 0) {
          return { ...item, count: item.count - 1 }
        } else {
          alert('올바른 수량을 입력해주세요');
        }
        return item;
      }
    }))
  }

}


  const minusList = (idx) => {
    const newList = list.map((item) => {
      if (item.idx === idx) {
        if (item.count > 0) {
          return { ...item, count: item.count - 1 }
        } else {
          alert('올바른 수량을 입력해주세요');
        }
        return item;
      }
    })
    setList(newList)
  }

 

 

어느 상황에 놓여있더라도 잘 대처 할 수 있게 직접 작성해보는 게 좋았다.