서론내가 리엑트를 사용할 때만해도 v16.x였고, 이 리엑트를 사용할 때 가장 흔히 사용되는 훅은 useState, useMemo, useCallback, useRef, useEffect 정도였다이 훅들을 반복적으로 사용하면서 원하는 기능이 스스로 구현하고 하면서 새로운 리엑트에 대한 공부를 차일피일 미뤄오다가 이번 새로운 프로젝트에는 리엑트 v18.x을 도입하기로 하면서 드디어 새로운 버전의 리엑트를 공부하게 됐다나처럼 차일피일 공부를 미뤄온 사람이 있다면 이 글을 통해 새로운 리엑트 기능을 하나라도 알아갔으면 좋겠다리엑트 공식문서에서 Canary라고 표기된 실험적인 기능은 회사에서 사용할 수 없기에 추후에 정리하도록 하겠다React@18.2.0Hooks훅을 사용하면 컴포넌트에 다양한 리엑트의 기능을 ..
React
forwardRef를 사용하는 중 다음과 같은 에러가 발생했다# forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?이는 eslint에서 잡아주는 에러로 코드에는 아무런 문제가 없다하지만 디버깅을 하는 입장에서는 조금 다를 수 있다리엑트는 기본적으로 컴포넌트 함수명을 displayName에 넣어주는데, forwardRef를 쓰면 해당 컴포넌트는 이름을 잃는다따라서 에러가 발생했을 때 inspector에서 파일명이 아니라 *.bundle.js와 같이 웹팩에서 만들어 놓은 번들 파일을 띄워줄 수도 있다는 얘기다따라서 이 경우 displayName을 명시적으로..