● Custom Component
개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다.
여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다. 이를 이용하면
- 상태관리 로직의 재활용이 가능하고
- 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며
- 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있습니다. (e.g. useSomething)
- Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙입니다.
- 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치시킵니다.
오늘은 노마드 코더의 커스텀 훅들 강의에 대해서 들었는데, 커스텀 훅은 정말 자기가 만들어 쓰기 나름인 것 같다고 느낀 것 같습니다.
● React.lazy와 Suspense / 코드 스플리팅
[19장 코드스플리팅]
빌드 하셨어염? 우리는 리액트 프로젝트를 완성하고, 사용자에게 제공할 때는 빌드 과정을 거쳐서 배포를 하게 됩니다. 빌드를 하는 과정 속에는 자바스크립트 파일 안에 불필요한 공백, 주석,
ddaeunbb.tistory.com
이전에 공부했던 코드스플리팅을 복습했습니다.
공부하면서 궁금했던 점을 마지막 세션 시간에 질문하였습니다.
Q. 18버전 이후, Suspense가 SSR도 지원하게 되었다고 들었는데, 그럼 서버를 통해서 컴포넌트를 불러올 수 있게 된 건가요?
- 카카오 현직자분 A : 최신 버전이여서 실무에 빠르게 적용하고 싶지만, 실상 최신 기술들을 실무에 적용하기에는 무리가 있습니다. 저희 회사에서는 Next.js라는 프레임워크를 사용하고 있고, Next.js같은 경우 SSR을 지원하기 때문에 client 컴포넌트에서만 코드스플리팅이 필요할 때에 Suspense를 사용하고 있습니다.
● 수업 이외의 공부
- 알고리즘 문제 풀기
- TS 공부
- 미니 프로젝트 진행
- next.js 프로젝트 완성!
[튜플]
● 튜플이란? 튜플이란, 자바스크립트에서는 일반 배열로 인식되지만 타입스크립트에서는 정해진 길이의 요소와 특수 배열을 입력해야지 오류가 뜨지 않는 것을 이야기한다. const person = { name :
ddaeunbb.tistory.com
[프로그래머스] / [1차 다트게임]
문제설명 카카오톡에 뜬 네 번째 별! 심심할 땐? 카카오톡 게임별~ 카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의
ddaeunbb.tistory.com
Nextix
It is the Taisho Period in Japan. Tanjiro, a kindhearted boy who sells charcoal for a living, finds his family slaughtered by a demon. To make matters worse, his younger sister Nezuko, the sole survivor, has been transformed into a demon herself. Though de
nextix.vercel.app