문제 상황 스크린샷처럼 react hooks이 적용된 컴포넌트에서 ‘Warning: React has detected a change in the order of Hook ~’에러가 발생하는 것을 볼 수 있습니다. 문제 확인 에러 문구 그대로 hooks의 순서가 변경됨에 따른 경고입니다. 위 사진에서는 useContext -> undefined 순서로 호출되던 hooks가 useContext -> useState 순서로 바뀐 것을 볼 수 있습니다. hooks의 순서가 변경되면 안되는 이유? 리액트에서 rooks의 주요 제약은 크게 아래 2가지 입니다. hooks는 함수형 컴포넌트 내부, 최상단에서 호출되어야 한다(조건문, 반복문, 함수 내부 X).hooks는 컴포넌트의 re-render마다 동일한 순서로..
리액트 훅
Invalid Hook Warning은 react hook을 이용하다 보면 자주 발생하는 문제로 React 공식 문제에서도 해당 문제에 대한 해결법을 정리해두었습니다. 필요하신 분은 아래 공식 사이트를 이용하셔도 됩니다. React 공식 문서 - Invalid Hook Warning https://ko.legacy.reactjs.org/warnings/invalid-hook-call-warning.html Invalid Hook Call Warning – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 1. Invalid Hook Call Warning은 언제 발생할까? Hooks can only be called..