폰트 스타일을 적용한 div 태그로 감싸주자. 원인은 아마 `rem` 계산을 편하게 하기위해 글로벌 `html` 폰트 사이즈를 `10px`로 설정해서 그럴 확률이 높다. 전역 폰트 사이즈를 크게 설정했다면 반대로 커졌을듯..
프론트엔드 트러블슈팅
이전 렌더링 때보다 더 많은 훅을 렌더링했다는 뜻. 즉 훅의 호출횟수가 일정하지 않다는 뜻이다. 리액트 훅은 컴포넌트 내부 최상위 레벨에 선언해야한다. 즉 훅은 컴포넌트를 제외하고는 다른 블럭({ }) 내부에서 이용해서는 안된다 훅을 다음과 같이 선언하지는 않았는지 확인해보자. // 전부 잘못된 훅 호출 방식이다 // 1. 조건문 안에서 호출 if (someCondition) { useEffect(() => { ... }); } // 1.1 && 연산자 이용하여 조건부 호출 !value && useCustomHook(value) // 2. 반복문 안에서 호출 items.forEach(item => { useEffect(() => { ... }); }); // 3. 이벤트 핸들러나 다른 함수 내에서 호출 ..
render() 내부에 setState를 호출하면 해당 에러가 뜬다. render() 내부에 setState()를 직접 호출했는지 확인하거나, button 태그에서 // class형 컴포넌트인 경우 // 💩 // 😁 this.funcHasSetState()}> // 😁 funcHasSetStateAndParameter(arg1)}> // 😁 💩 와 같이 쓰지 않았는지 확인해보자. 참고로 2번째와 같이 사용하려면 함수에 this 바인딩이 되어있어야 한다.
