벨로퍼트 리액트 - 21. 커스텀 Hooks 만들기
커스텀 Hooks - 반복되는 로직을 쉽게 재사용하기 위해 사용.
보통 use라는 키워드로 시작하는 파일을 만들고 안에 함수를 작성해서 사용함.
커스텀 Hooks를 만드는 방법
: useState, useEffect, useReducer, useCallback 등 Hooks를 사용하여 원하는 기능을 구현한 후 컴포넌트에서 사용하고싶은 값들을 반환해주면 됨.
벨로퍼트 리액트 - 22. Context API를 사용한 전역 값 관리
Context API : 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있음. 이 값은 꼭 상태를 가리키지 않아도 됨!
사용법 - React.createContext() 함수 사용
const UserDispatch = React.createContext(null);createContext의 파라미터에는 Context의 기본값을 설정할 수 있다. 이 값은 Context를 쓸때 값을 따로 지정하지 않을 경우에 사용할 기본 값이다.
Context 안에는 Provider라는 컴포넌트가 있는데, 이 컴포넌트를 통해 Context의 값을 정할 수 있다. 이를 사용할때 value라는 값을 설정한다.
<UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider>export const UserDispatch = React.createContext(null); // 이렇게 내보내면
import { UserDispatch } from './App'; // 이렇게 불러올 수 있다 ⇒ useReducer를 사용할때 dispatch 와 Context API를 사용해서 전역적으로 사용할수있게 하면 컴포넌트에게 함수를 전달해줘야하는 상황에서 코드의 구조가 훨씬 깔끔해진다.
