TIL - 2021.10.07

Today Ariticle

• [React] CORS요..? 제 잘못,,, 인가요?

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

그 외 오늘 참고한 아티클들

• Ngrok 사용하여 개발하기
• [React] forwardRef 사용법

Today I Learned

ngrok.

• mac 환경이라면 brew install -cask ngrok으로 설치한다.
• ngrok http 3000 명령어로 localhost 3000 포트에 접근할 수 있는 url을 얻을 수 있다!
• 당연하게도 localhost가 열린 상태에서만 공유가 가능하기 때문에 타인에게 공유할 때 내가 localhost를 열어두고 있는 상태여야한다. 실시간으로 공유할 때 사용하면 좋을 듯.

forwardRef

• React 컴포넌트에 ref prop을 넘겨서 그 내부에 있는 HTML 엘리먼트에 접근할 수 있는 함수

• ref, key 등은 prop으로 사용할 수 없는 예약어이기 때문에 useRef로 생성한 ref 객체를 하위 컴포넌트에 ref라는 이름으로 넘길 수 없다. (물론 ref1처럼 다른 이름으로는 가능하지만, 혼란스럽다)

• forwardRef로 감싼 컴포넌트는 props 외에 두 번째 매개 변수를 갖게 되며, 이를 통해 외부에서 ref를 prop으로 넘길 수 있다.

• 결과적으로 목표는 부모 컴포넌트에서 자식 컴포넌트의 특정 엘리먼트에 직접 접근하기 위해 사용한다!

• React 개발자 도구에서 forwardRef를 사용해도 컴포넌트 이름이 나오게 하는 몇 가지 방법

  • 1. forwardRef의 인자로 익명함수 대신 이름이 있는 함수를 넘긴다
  • 2. forwardRef의 return 값으로 기존 컴포넌트를 대체한다
  • 3. forwardRef return 값의 displayName 속성에 컴포넌트 이름을 설정한다.

• 일반적으로 forwardRef는 주로 <Button/>, <Input/>처럼 HTML 엘리먼트 대신 사용되는 최말단 컴포넌트를 대상으로 사용한다. 그보다 상위 컴포넌트에는 사용이 권장되지 않는다! 컴포넌트간 결합도를 높이기 때문!

Today Review

• 댕근.. 기획이 계속 엎치락 뒤치락하고 있다. 약간의 개발 설정을 하긴 했지만.. 내일 기획을 딱 합의보고 주말과 다음주부터 개발을 달리고 싶다.
• 물론 디프만도 해야하고.. 둘 다 하는건 너무 오바였다...