State 생명 주기 에러

const [curQuarter,setCurQuarter]=useState(1)	
useEffect(()=>{
	handleData(String(curQuarter))
},[curQuarter])

const handleRightCarrot = () => {
    if (curQuarter === 4) {
      setCurQuarter(1)
    } else {
      setCurQuarter(() => curQuarter + 1)
    }
		// handleData(String(curQuarter))
  }
  const handleLeftCarrot = () => {
    if (curQuarter === 1) {
      setCurQuarter(4)
    } else {
      setCurQuarter(() => curQuarter - 1)
    }
		// handleData(String(curQuarter))
  }

문제

• setCurQuarter 에서 curQuarter 값을 변경한 뒤 업데이트 된 값을 handleData() 에 넣어서 2개의 컴포넌트 값을 업데이트 하려 했음

• setCurQuarter 을 호출한 뒤 curQuarter 의 값을 확인 한 결과 업데이트가 이뤄졌으나, handleData() 의 인자로 넘겨준 값은 업데이트가 이뤄지지 않은 값이었음

원인

• state 의 lifecycle 을 제대로 이해하지 못한 것이 원인

• state값이 업데이트 되더라도 실제로 업데이트 된 값을 활용한 컴포넌트는 새로 랜더링 되는 컴포넌트에 적용됨. 따라서 업데이트 된 값을 바로 활용하려는 의도와는 다르게 이전 값을 참조해서 컴포넌트를 랜더링 한 것이었음

해결

• curQuarter (state)를 useEffect() 에 추가하여 상태를 실시간으로 관리한다