React.js Hooks (계속 업뎃 예정)
13 Mar 2021 | ReactReact.js Hooks
-
useMemo
- props가 바뀌지 않았다면, 리렌더링을 막아 성능을 최적화 해줄 수 있는 녀석
- 리렌더링이 필요할 때만 되도록 설정할 수 있다
- 이것을 남용하면 불필요한 props 비교만 하게 되므로 렌더링 최적화가 필요할 때만 사용하도록 한다
import { useMemo } from 'react'; // 값을 받아서 바꾸는 함수가 있다고 하자 const changeValue = (value) => { return value + 1; } // a의 값이 바뀔때에만 changeValue가 호출된다 const xxx = useMemo(() => changeValue(a), [a]);
-
useCallback
- 이전에 만든 함수를 재사용할 때 쓴다
- 두 번째 인자는 의존성으로 deps를 배열 [] 안에 넣어주는데 의존하는 상태값이 없다면 빈 배열을 넣어준다
import { useCallback } from 'react'; const onChange = useCallback((value) => { setValue(value+1); }, [value]); /* useCallback의 두번째 인자로 준 값이 바뀔때마다 callback 함수를 만들고 값이 같다면 기존에 있던 함수를 재사용한다 */ -
useReducer
- 컴포넌트의 state 업데이트 로직을 컴포넌트에서 분리해서 바깥에서 관리할 수 있다
- 여기에 action과 dispatch라는 개념이 등장한다
- 이벤트 함수에서 action.type을 reducer에게 dispatch해준다
- reducer는 state,action을 받아서 action.type에 맞는 로직(state 업데이트)을 실행한다
const reducer = (state, action) => { switch(action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; }; }; export default reducer;// state 초기화 const init = { number: 0, }; // useReducer의 첫 번째 인자로 reducer 함수를, // 두 번째 인자로 default state를 넣어준다 const [state, dispatch] = useReducer(reducer,init); // 이벤트 함수 실행시 dispatch에 의해 action type이 전달된다 const onChange = () => { dispatch({ type: 'INCREMENT', }); }; // state의 사용 <input onChange={onChange} value={state.number} /> -
Custom Hook
- input태그의 onChange 등 자주 사용하는 기능들을 custom hook으로 만들어 재사용 할 수 있다
import { useState, useCallback } from 'react'; const useInputs = (initialForm) => { const [form, setForm] = useState(initialForm); const onChange = useCallback((e) => { const {name, value} = e.target; setForm((form) => { ...form, [name]: value, }); }, []); // 의존하는 상태값이 없으므로 빈 배열 const reset = useCallback(() => { setForm(initialForm, [initialForm]); // initialForm에 의존하므로 적어야한다 }); return [form, onChange, reset]; // 배열 형태로 반환 }; export default useInputs;import useInputs from 'path/useInputs'; // useInputs의 initialForm에 초기 상태값 전달 const [form, onChange, reset] = useInputs({ name: '', email: '', }); // useInputs에서 만든 state에서 구조분해 할당 const { name, email } = form; -
Hooks로 Context API 사용하기
import { createContext } from 'react'; // context를 생성한다 (함수형, 클래스형 동일) const ctx = createContext({ isLogined: false, id: '', }); export default ctx;// 사용하고자 하는 컴포넌트에서 context를 사용한다 import { useContext } from 'react'; import ctx from 'path/ctx'; const Bottom = () => { // context의 사용 const { isLogined, id } = useContext(ctx); // ... }const Ctx = createContext(); // provider를 이용해서 값을 전달해도 된다 <Ctx.Provider value=> </Ctx.Provider> -
useParams
<Route>컴포넌트의 path 속성에서 URL을 파라미터로서 값을 받는 객체를 useParams()를 통해 접근 가능- 파라미터 개수는 여러개여도 상관없다.
ex)<Route path="/:id/:name/:title" />
import React from 'react'; import { Route, Switch } from 'react-router-dom'; function app() { return ( <Switch> <Route exact path='/' component={PostIndex} /> <Route exact path='/posts/:id' component={PostShow} /> </Switch> ); } export default app;import React from 'react'; import { useParams } from 'react-router-dom'; function postShow() { let { id } = useParams(); return <div>{id}</div>; } export default postShow;- app 컴포넌트의 id 파라미터를 PostShow에서 비구조화 할당으로 id 로 받을 수 있다
-
continue..