HOOK정리했음 : useState, useReducer, useEffect, useMemo, useCallback, useRef,

useState

• 가장 기본적 상태관리 Hook.

예시

const [value, setValue] = uesState(기본 값);

value는 상태 값. setValue는 상태를 설정하는 함수.

[React] Hooks 함수정리

• set어쩌고 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 리리렌더링된다!

useState 여러 번 사용하기

• 컴포넌트에서 관리해야할 상태가 여러 개면 useState 여러 번 사용하면 된다.

예시

const List = () => {
	const [name, setName] = useState('');
	const [nickname, setNickname] = useState('');

<input value={name} />
<input value={nickname} />

useReducer

• useState보다 더 다양한 컴포넌트를 다룰 때 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용.
• 컴포넌트 밖으로 업데이트 로직을 빼낼 수 있다는 것이 장점.
• state값(현재 가리키고 있는 상태)과 dispatch함수(액션을 발생시키는 함수)를 받아온다..
• 업데이트를 위해 필요한 정보를 담은 action값을 전달받아 새로운 상태로 반환하는 함수.
• 새로운 상태 만들 땐 반드시 불변성 지켜주기
• 관리해야하는 값이 많아져도 코드 짧고 간결하게 유지가능.