Hooks는 함수형 컴포넌트에서 상태 관리를 할 수 있는 useState,
렌더링 직후 작업을 할 수 있는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있다.
useState
- 가장 기본적인 Hooks
- 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해준다.
useState 함수는 하나의 상태 값만 관리할 수 있음
컴포넌트에서 관리해야 할 상태가 여러개일땐?
useState도 여러번 사용하자!
useEffect
- 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행되도록 설정할 수 있는 Hook
클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 봐도 무방
- 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라짐!
컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리 함수를 반환해 주어야한다!
useReducer
- useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook
리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수.
리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜주어야함.
useReducer로 counter과 Info를 해보았지만 어려움.. 다시해볼것..
useMemo
- 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있음.
useCallback
- useMemo와 비슷한 함수로, 렌더링 성능을 최적화해야하 하는 상황에서 사용
- 만들어놨던 함수 재사용 가능
- 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 함.
(ex) onChange의 경우 기존의 값을 조회하지 않고, 바로 설정만 해주어 변경하기때문에 배열이 비어있어도 상관x,
그러나! onInsert는 기존의 number와 list를 조회해서 nextList를 생성하기 때문에 배열 안에 number, list를 꼭 넣어주어야 함.
const onChange = useCallback(e=>{
setNumber(e.target.value);
}, []);
const onInsert = useCallback(()=>{
const nextList = list.concat(parseInt(number));
setList(nextList);
setNumber('');
}, [number, list]);
useRef
- 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해주는 Hook
- 컴포넌트 로컬 변수를 사용해야 할 때도 활용할 수 있음.
(로컬변수란?! 렌더링과 상관없이 바뀔 수 있는 값을 의미)
예제를 따라해보지만,, 어렵다..! 모르겠다 다시볼것!
커스텀 Hooks만들기!!!
- 여러 컴포넌트에서 비슷한 기능을 공유할 경우, 이를 자신만의 Hooks로 작성하여 로직 재사용 가능
Info.js안에서 useRef를 사용하였지만, 따로 클래스형 함수로 만들어서 사용하였다.