10.10.22{코딩일기}벨로퍼트와 함께하는 모던리액트 1-21챕터리뷰

[ 새롭게 알게된 것 ]

---

 

1. 드디어 커스텀 Hooks을 왜 만드는지 알게됨

---

이번에 4차 스프린트에 참여하게 되면서 컴포넌트와 컨트롤러를 분리해서 작업하는 법을 알게 되었음.

이 작업의 목적과 커스텀 Hooks를 제작하는 목적 모두 반복되는 로직을 쉽게 재사용하기위함 임을 발견함.

하지만 컨트롤러는 useState, useEffect, useReducer, useCallback 등의 Hooks을 사용하는 반면에,

일부 컨트롤러는 hooks을 사용하기는 하지만, 컨트롤러는 주로 반복적으로 다뤄지는 데이터를 쉽게 재사용하기 위함임.

 

---

 

2. 컨트롤러와 커스텀 Hooks은 서로 다른 파일 형식을 가짐을 알게됨.

---

사실이건 지금 현재 하고 있는 프로젝트에서 발견한 차이라 일반화 하긴 어려움.

하지만 차이의 이유를 알게되면 이 내용은 업데이트 할 예정임.

 

---

 

3. 커스텀 Hooks은 hooks라는 폴더아래 use...이라는 키워드로 파일을 작성해야됨.

---

예를들어 useCurrentToken.jsx, useDataFetch.jsx, useInterval.jsx, useLocalStorage.jsx 등

다양하게 중복되는 로직을 커스텀해서 재사용가능함.

 

---

 

4. 커스텀 hooks을 특정컴포넌트에 가져와서 사용하는법은 너무 쉬움.

---

import useInputs from './hooks/useInputs';

function App() {
  const [{ username, email }, onChange, reset] = useInputs({
    username: '',
    email: ''
  });

자세한 내용은 밸로퍼트 챕터를 참조하면 됨.

---