Open Dogdriip opened 3 years ago
const [value, setValue] = useState(0);
componentDidMount
componentDidUpdate
useEffect(() => { console.log('마운트될 때만 실행됩니다.'); }, []);
useEffect(() => { console.log(name); }, [name]);
두 번째 인자인 배열은 dependency array (deps)라고 부른다.
dependency array (deps)
컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶을 때:
useEffect(() => { console.log('effect'); console.log(name); return () => { console.log('cleanup'); console.log(name); } }, [name]);
위의 경우, 렌더링될 때마다 뒷정리 함수가 업데이트 직전의 값으로 계속 호출된다. 오직 언마운트될 때만 뒷정리 함수를 호출하고 싶다면 deps 배열을 빈 배열로 넣으면 된다.
useState
카운터 예제:
import React, { useReducer } from "react"; type State = { value: number; }; type Action = { type: "INCREMENT" | "DECREMENT"; }; const reducer = (state: State, action: Action) => { switch (action.type) { case "INCREMENT": return { value: state.value + 1 }; case "DECREMENT": return { value: state.value - 1 }; default: return state; } }; const Counter = () => { const [state, dispatch] = useReducer(reducer, { value: 0 } as State); return ( <div> <p> 현재 카운터 값은 <b>{state.value}</b>입니다. </p> <button onClick={() => dispatch({ type: "INCREMENT" })}>+1</button> <button onClick={() => dispatch({ type: "DECREMENT" })}>-1</button> </div> ); }; export default Counter;
const avg = useMemo(() => getAverage(list), [list]);
컴포넌트가 리렌더링되더라도 list값이 바뀔 때만 getAverage 함수가 호출된다.
list
getAverage
useMemo와 상당히 비슷
useMemo
const onChange = useCallback((e) => { setNumber(e.target.value); }, []); // 컴포넌트가 처음 렌더링될 때만 함수 생성
deps에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다. 위와 같은 경우 컴포넌트가 최초 렌더링될 때 만들었던 함수를 계속해서 재사용하게 된다. 함수 내부에서 state값에 의존해야 할 때는 그 값을 반드시 deps에 포함시켜 주어야 한다.
deps에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다. 위와 같은 경우 컴포넌트가 최초 렌더링될 때 만들었던 함수를 계속해서 재사용하게 된다.
deps
함수 내부에서 state값에 의존해야 할 때는 그 값을 반드시 deps에 포함시켜 주어야 한다.
const inputEl = useRef(null); ... return ( <input ref={inputEl} /> );
8장. Hooks
8.1 useState
8.2 useEffect
componentDidMount
와componentDidUpdate
를 합친 형태컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶을 때:
8.3 useReducer
useState
보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용카운터 예제:
8.4 useMemo
8.5 useCallback
useMemo
와 상당히 비슷8.6 useRef
8.9 정리