함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여
기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줌.
: 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
클래스형 컴포넌트의 componentDidMount와 componentDidUpdate 를 합친 형태라고 볼 수 있음.
useEffect(() => { ... })
마운트 될 때만 실행하고 싶을 때는 함수의 두번째 파라미터에 비어있는 배열을 넣어주면 됨.
useEffect(() => { ... }, [])
특정 값이 업데이트될 때만 실행하고 싶을 때는 함수의 두번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 됨.
useEffect(() => { ... }, [name])
컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고싶다면 useEffect에서 뒷정리(cleanup)함수를 반환해주어야함.
언마운트될 때만 뒷정리 함수를 호출하고싶다면 useEffect 함수의 두번째 파라미터에 비어있는 배열을 넣어주면 됨.
useEffect(() => {
console.log('effect');
console.log(name);
return() => {
console.log('cleanup');
console.log(name);
};
}, [name])
: useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook
현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수.
function reducer(state, action) {
return { ... }; //불변성을 지키면서 업데이트한 새로운 상태 반환
}
...
const [state, dispatch] = useReducer(reducer, { 리듀서 기본 값 } )
//state = 현재 가리키고있는 상태, dispatch = 액션을 발생시키는 함수
//dispatch(action)과 같은 형태로, 함수 안에 파라미터로 액션 값을 넣어주면 리듀서 함수가 호출되는 구조
액션 값은 주로 다음과 같은 형태임.
{
type: 'INCREMENT',
//다른 값들이 필요하다면 추가로 들어감.
}
: 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하게하는 Hook
const avg = useMemo(() => onChange(list), [list])
-> list 배열이 바뀔때만 onChange 함수 호출
: 만들어놨던 함수를 재사용할 수 있게 하는 Hook (일반적으로는 컴포넌트가 리렌더링될 때마다 새로 만들어진 함수를 사용함)
useCallback의 첫번째 파라미터에는 생성하고싶은 함수를 넣고, 두번째 파라미터에는 어떤 값이 바뀌었을 때 함수를 새로 생성하는지 명시하는 배열을 넣음.
함수 내부에서 상태값에 의존해야할 때는 그 값을 반드시 두번째 파라미터에 안에 포함시켜 주어야 함.
const onChange = useCallback(e => {
...
}, [])
: 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해주는 hook
useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킴.
const inputEl = useRef(null);
...
<input ... ref = {inputEl}
함수형 컴포넌트에서 로컬변수(렌더링과 상관없이 바뀔 수 있는 값)를 사용해야할 때도 useRef를 활용할 수 있음.
const id = useRef(1)