[React] 생각을 놓으면 쉬운 것도 실수한다.

오늘은 next와 씨름을 하며 회사 브랜드 페이지의 신규 기능을 만들어서 개발에 pr을 올려놨다.

 

우중충했던 날씨도 맑아지고 기분 좋게 코딩을 하다가 순간 뭔가 이상하게 상태 업데이트가 안되는 것이다.

 

분명 하던대로 했는데 왜 안될까.

 

const [state,setState] = useState([]);

const onClick = (e:React.MouseEvent<HTMLDivElement>)=>{
	...
    setState(beforeState=>{
    	const newData =...;
        beforeState[index] = newData;
        
        return beforeState;
    })
}

날씨가 좋아졌는데 왜 내 머리 속도 꽃밭이 됐는지..

 

여튼 뭐지 뭐지 하다가 앗차차 하면서 스스로의 멍청함에 감탄했다.

 

자바스크립트의 데이터 타입은 원시타입과 객체타입이 있고, 객체타입의 데이터의 경우 주소를 "참조" 한다는 점이 주요한 포인트이다.

 

React가 state의 변경을 감지할 때, 이 데이터 주소값을 확인한다. 즉 인자로 받은 배열에다가 인덱스만 추가하고 고대로 리턴했으니, react에선 얘가 바뀐앤지 기존앤지 확인해봤을 때, 참조하는 데이터 주소가 같으니 똑같은 데이터로 인지한다는 것이다.

 

이런 당연하고 기초적인것을 실수하다니. 스스로가 참 한심해졌지만, 앞으로 안그러면 되는거니까!

 

const onClick = ()->{
	setState(beforeState => {
    	const dubState = [...beforeState];
        
        ...
        
        return dubState;
    })
}

 

이렇게 아주 새로운 값을 리턴해주면서 해결할 수 있었다.