useState 알고 쓰는 걸까?

우리가 react를 사용하면서 가장 많이 쓰게 되는 훅을 골라보자 하면 당연 useState 훅일 것이다.

 

우리는 이 useState를 당연하게 사용하고 당연하게 어떤 조건에 맞게 사용한다.

 

근데 과연 이 useState를 잘 알고 쓰는 걸까.

 

물론 알고 쓰는 사람도 있는데 모르고 쓰는 사람이 바로 나였다.

 

useState의 구현

useState는 다 떼고 말해서 closure입니다. 간단히 구조를 그려보면

const React = (()=> {
	let hookIdx = 0;
	let hookContainer = [];
    
	function useState(initialValue){
		const idx = hookIdx;
		const state = hookConatiner[idx] || initialValue;
        
		const setState = (value) => { hookContainer[idx] = value };
        
		hookIdx++;
        
		return [state,setState]
	}
})();

 

useState의 setState함수가 hookConatiner, hookIdx변수를 참조함으로 우리가 useState를 여러번 호출해도 정상적으로만 호출하면 state에 값이 올바르게 기억된다는 겁니다. 때문에 만약 useState의 선언이 조건문안에 들어가게 된다면?

 

어느 순간 hookIdx가 꼬여버리겠죠?

 

export const SomeComponent () {
	const [booleanState,setBooleanState] = useState(false);
    
    if(booleanState){
    	[weirdState,setWeirdState] = useState('weirdState');
    };
    
    const [counter, setConuter] = useState(0);
    const [isValidate,setValidation] = useState(false);
    
    useEffect(()=>{
    	setBooleanState(true);
    },[setBooleanState])
    
    return <div>hihi</div>
}

이런 식으로 상용해 버리면 component내부에서 hook 호출 할 때, 호출 순서가 달라지니 내부 값이 꼬여버리는 대참사가 날 수도 있으니, useState의 선언은 꼭 컴포넌트 내부 최 상단에서 해주는 것이 좋겠습니다.