- 왜 쓰는가? : 프로젝트가 커지면 state와 props만으로 관리가 안됨, 그래서 Context, Redux, React Query, Zustand등 상태관리 툴을 사용함
Zustand 사용법
- react 파일 생성
function App() {
const [memo, setMemo] = useState('');
const [memos, setMemos] = useState([]);
const handleWriteMemo = (e) => {
setMemo(e.target.value);
};
const handleAddMemo = (e) => {
e.preventDefault();
setMemos((prevMemos) => [...prevMemos, memo]);
setMemo('');
};
return (
<div>
<h1>메모 작성하기</h1>
<Form onAdd={handleWriteMemo} onSubmit={handleAddMemo} memo={memo} />
</div>
);
}
메모 하나의 상태를 나타내는 memo, 모든 메모 상태를 나타내는 memos, Form에 props로 내려주고 있다.
const Form = (props) => {
return (
<>
<form onSubmit={props.onSubmit}>
<input type='text' onChange={props.onAdd} value={props.memo} />
<button type='submit'>작성완료</button>
</form>
</>
);
};
이걸 Zustand로 관리해보자.
1. npm i zustand로 라이브러리를 설치
2. stores 폴더에 js파일 만들고 state를 옮긴다
// ./stores/memos.js
import create from 'zustand';
const useMemosStore = create((set) => ({
memo: '',
setMemo: (text) => set({ memo: text }),
memos: [],
setMemos: (newMemo) =>
set((prev) => ({
memos: [...prev.memos, newMemo],
})),
}));
export default useMemosStore;
memo 와 memos 에는 초기값을 넣는다.
setMemo 와 setMemos 는 매개변수를 지정하고 어디에 어떻게 값을 넣을지 정한다.
setMemo 의 경우, text라는 값이 들어오면 memo 에 text를 넣는다.
setMemos 의 경우, 기존 memos 에 새로운 값인 newMemo를 추가해야 하므로 prev 매개변수를 활용한다.
이때 useState 와 다른 점은 스프레드 연산자를 사용할 때 prev.memos 와 같이 뒤에 타겟이 되는 배열명을 넣어야 하는 것이다.
- 사용한다
// ./component/Form.js
import useMemosStore from '../stores/memos';
const Form = () => {
const { memo, setMemo, setMemos } = useMemosStore();
const handleWriteMemo = (e) => {
setMemo(e.target.value);
};
const handleAddMemo = (e) => {
e.preventDefault();
setMemos(memo);
setMemo('');
};
return (
<>
<form onSubmit={handleAddMemo}>
<input type='text' onChange={handleWriteMemo} value={memo} />
<button type='submit'>작성완료</button>
</form>
</>
);
};App.js에서 상태관리할 필요 없고, 기존의 useState함수와 props는 모두 삭제한다.
함수만 import해서 사용하면 된다.
