⭐️useState
사용법 const [value, setValue] = useState(0);
useState 함수의 파라미터에는 상태의 기본값을 넣어줍니다.
배열의 첫 번재 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수입니다.
함수에 파라마터를 넣어서 호출하면 전달받은 파라미터 값이 바뀌고 컴포넌트가 정상적으로 리렌더링됩니다.
여러 개의 useState를 선언하여 사용이 가능합니다 → 단 같은 이름은 X
⭐️useEffect
useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 입니다.
클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태입니다.
사용법
import { useEffect } from ‘react’;
useEffect(() ⇒ { });
React.StrictMode 가 적용된 개발 환경 시 useEffect가 두번 호출됩니다.
- 마운트 될때만 호출하기 → 끝에 빈배열 추가
useEffect(()=>{
console.log('mount');
},[]);- 특정 값이 업데이트 될 때만 호출하기 → 배열 안에 파라미터 추가
useEffect(()=>{
console.log('name');
},[name]);⭐️useReducer
useReducer는 useState 보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 주고 싶을 때 사용하는 Hook 입니다.
리듀서는 현재 상태, 그리고 업데이트를 위한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수입니다.
리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜주어야 합니다.
function reducer(state, action) {
return { ... };
}⭐️useMemo
useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다.
기본적으로 컴포넌트에 내에 계산식이 여러개 있을 경우 렌더링 시 마다 계산을 다시 하게 되는데, useMemo Hook을 사용하면 렌더링하는 과정에서 특정 값이 바뀌었을 대만 계산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식입니다.
const insert = useMemo(() => getAverage(list), [list]);위에서는 getAverage안에 리스트 값이 바뀔 때만 함수를 호출하도록 합니다.
⭐️useCallback
useMemo와 상당히 비슷한 함수로, 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하는데요, 이 Hook을 사용하면 만들어 둔 함수를 재사용할 수 있습니다.
const onChange = useCallback(e => {
setNumber(e.target.value);
},[]);useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에는 어떤 값이 바뀌었을 때 이 함수를 새로 생성해야 하는지 명시 합니다.
⭐️useRef
useRef Hook은 함수 컴포넌트에 ref를 쉽게 사용할 수 있도록 해 줍니다.
주로 포커스를 이동시키거나 유지할 때 사용합니다.
const inputEl - useRef(null);
<input ref={inputEl} />useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가르킵니다.
⭐️ 커스텀 Hooks 만들기
위에서 배운 내용을 토대로 본인 만의 커스텀 Hooks를 필요한 상황에 생성하여 배치하는 것을 연습하도록 합니다.
다른 개발자가 만든 다양한 Hooks 리스트
