11.02.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-3 챕터리뷰

[ 새롭게 알게된 것 ]

---

1. Data를 요청할때마다 리듀서를 작성하는 것은 번거로운 일임을 알게됨

---

useReducer를 사용하면 무수한 setState 사용을 줄일 수 있고 확장성 높은 코드를 사용할 수 있는것 사실이지만 

Data를 요청할때마다 useRedcuer를 작성해야하는 건 상당히 번거로움.

그래서 아예 따로 파일을 새로 하나 만들고 커스텀 Hook을 만들어 요청 상태 관리 로직을 쉽게 재사용하는 방법을 추천함

리턴값은 state와 fetchData를 반환해 나중에 데이터를 쉽게 리로딩 해줄 수 있는 장점이 있음.

이때 커스텀 Hook 첫번째 파라미터는 API요청을 시작하는 함수이고, 두번째 파라미터는 useEffect의 deps로 설정함

 

 

---

 

2. 필요한 시점에 API를 요청하고 싶으면 skip이라는 파라미터를 커스텀 Hook에 넣으면됨

---

skip 파라미터 기본 값을 false로 지정하고 만약 이 값이 true라면 useEffect에 아무런 작업이 발생 않도록 설정가능함

---

 

3. API에 파라미터가 필요한 경우 getUser(id)를 사용하면 됨

---

자세한 내용은 책에 나온 커스터 마이징 참조.

새로운 User.js 파일을 만들어 id를 기준으로 API를 요청 설정해주면 됨

useAsync를 사용할때 파라미터를 포함시킨 함수를 호출시킴

그리고 id가 바뀔때마다 재호출 되도록 deps에 id를 넣어줌

function User({ id }) {
  const [state] = useAsync(() => getUser(id), [id]);
  ... 생략
  }

그리고 Users 컴포넌트엔 아래와 같이 useState를 사용하여 userId 상태 관리해주면 됨.

function Users() {
  const [userId, setUserId] = useState(null);
 	...생략 
 }

초깃값은 null이고, 리스트에 항목 클릭시 클릭한 사용자의 id를 userId값으로 설정해줌.

---