[React] Rendered more hooks than during the previous render

렌더링 타임에 state의 갯수가 달라져서 발생하는 오류다

 

const Mycomponent= ()=>{
  const [foo, setFoo]= useState('');
  if(foo!== ''){
    const [bar, setBar]= useState('');
  }
  
  return (<button onClick={()=> setFoo('foo')}>버튼</button>);
}

 

위 코드에서는 버튼을 클릭하기 전에 state가 한 개(foo) 였다가,

버튼을 클릭하고 나면 const [bar, setBar]= useState(''); 에 의해 state가 하나 더 생긴다.

 

이런 경우 발생하는 오류이므로, state의 갯수는 조건과 관계없이 동일하도록 변경하고,

그 state에 따른 사이드이펙트를 조건부 처리하는 방식으로 수정한다.