TIL - 2021.04.29

Today Ariticle

• 글자 4개로 리액트 컴포넌트를 최적화하는 방법

• 리뷰는 여기서 - 일일 아티클
  
  

Today Commit Review

Today I Learned

• npm에 react-component 라이브러리 배포하기

• 주의사항

  • package.json에 name에서 @~의 경우 "npm아이디와 동일"해야한다.
  • 이메일 인증을 해야한다
  • react의 경우 내부 파일은 트랜스파일링 하지만, 외부 모듈은 트랜스파일링 하지 않기 때문에 트랜스파일링을 완료한 상태의 파일을 배포해야한다.
  • 이를 위해 @babel/preset-react(jsx 트랜스파일링), @babel/preset-env(es5로 트랜스파일링)을 설치 및 presets에 등록해둬야한다.
  • 트랜스파일 대상 컴포넌트에 import React from 'react'를 해줘야한다. @babel/preset-react만 사용해서 트랜스파일링 후 배포하면 jsx 문법이 React.createElement()로 트랜스파일링 되는데, 이 때 React import구문이 없으면 설치한 쪽에서 React is not defined 에러가 뜬다.

• 지연 초기화. useState의 인자에 '함수'를 전달함으로써 초기값 계산을 반복하지 않는다.
  
  

Today Review

• npm에 배포한 캐로셀이 해당 프로젝트 폴더에서는 잘 동작하는데, 다른 프로젝트에 설치하면 안 되는 문제가 발생했다 심지어 App.js까지 똑같은데..
• 하루종일 문제를 찾아도 해결 못 했는데, 오후 11시에 원인을 발견했다. 이유는 StrictMode였다. 이거때문에 삽질을 5시간이상 했음...