세줄코딩

JSX.IntrinsicElements 이란 React + TS. 형태로 코딩 중에 있는데 간혹 IntrinsicElements & 어쩌구 에러가 발생하곤 했다. 대부분 컴포넌트 네임의 첫문자를 대문자로 하지 않거나 Props 부분에 없는 속성 값을 호출 하거나 하면 발생하는 게 대부분이였다. 근데 IntrinsicElements 얘는 대체 머지???? 나도 좀 헷갈리는 부분이긴 하지만 머 어찌되었건 웹스톰에서 cmd+클릭하면 해당 부분 클래스나 인터페이스 선언된 부분으로 찾아들어가 볼 수 있다. 해서 바로 들어가 봤더니 두둥!!! 아래와 같이 선언되어 있었다. declare namespace JSX { interface IntrinsicElements { ......중략....... a: React.D..

forwardRef 관련 Component definition is missing display name(react/display-name) 에러 React.forwardRef((props, ref) ... ) forwardRef 역활 React.forwardRef 는 렌더링에 사용될 함수를 인자로 받는데 React는 이 함수를 두 개 인자 props와 ref를 사용하여 호출하고, 이 함수는 React 노드를 반환. 하는 게 주요 맹점이다. React 를 사용하다보면 ref 를 자식 컴포넌트에 넘겨서, 그 내부 HTML 엘리먼트에 접근할 수 있게 해줘야하는 경우가 발생. 이때 사용하게 되는 것이 React.forwardRef 타입스크립트를 사용하지 않는 경우 위 방법은 정상적으로 동작. 하지만, 타입스크..

React.StrictMode( Strict 모드 ) create-react-app 설치 후 index.js 를 살펴 보면 라는 것을 볼 수 있다. 처음엔 이게 먼가 싶었는데... 딱히 머 실행시 문제될 거는 없었기에 신경을 안쓰고 있었는데... 테스트시 devtools 에 콘솔 로그 값이 두번씩 찍히는 것을 발견 할 수 있었다. 검색해서 찾아봤더니 React.StrictMode 라는 것 때문에 그런 현상이 나타나는 것이라는.... 해서 공식 홈에 해당 부분을 찾아 봤더니...아래와 같은 내용들이 있었다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화. 주의 Strict 모드는 개..