코린이 탈출 일기 📘 - Day 9
✅ Keep (계속할 것)
어제 잘한 것, 잘 이해된 내용, 도움이 된 학습 습관을 써보세요.
ㅁ
＆ 어제 React의 Zustand를 학습하였는데 useContext와의 사용목적은 둘 다 상태를 여러 컴포넌트에서 공유하는 것으로 같지만
규모가 크고 더 복잡한 상태(ex 장바구니, 페이지 필터링)를 관리하는데 Zustand를 사용하는 것을 학습하였고 무엇보다 useContext는 메인에서 Provider를 사용하여 하위 컴포넌트들이 존재하므로 값이 변경되면 하위 컴포넌트들이 전부 리렌더링 이 되지만 Zustand는 구독 기능을 사용하여 필요한 컴포넌트만 리렌더링이 된다는 장점을 통하여 Zustand의 사용목적을 더
학습하게 되었다.
Zustand는
를 사용하여 상태를 관리하는 라이브러리이다.
import { create } from "zustand";
const useCounterStore = create((set, get) => ({
count: 0,
// set의 콜백으로 상태를 바로 업데이트 (불변성 보장)
increase: () => set((state) => ({ count: state.count + 1 })),
// get()으로 현재 상태값을 직접 읽어서 업데이트
decrease: () => set({ count: get().count - 1 }),
}));
export default useCounterStore;
예시 코드인데 set()의 콜백으로 create안에 선언한 count를 바로 업데이트를 할 수 있고 get()을 통해서도 현재 상태값을
읽어 바로 업데이트를 할 수 있는 2가지 방법이 있다.
❌ Problem (문제였던 것)
어려웠던 개념, 막혔던 부분, 집중이 잘 안 된 상황 등을 솔직하게 적어보세요.
＆ 어제 실습중에 이미 여러 값을 넣어놓았던 create(set,get)을 사용하여 체크박스를 선택한 것과 선택하지 않은 것들을 불러오는
기능을 구현중에 매우 헷갈리는 부분이 있었다.
const useTodoStore = create((set, get) => ({
todos: [{
id: 1,
text: "밥먹기",
completed: false,
},{
id: 2,
text: "롤체하기",
completed: false,
},{
id: 3,
text: "커피먹기",
completed: false,
}],
toggleTodo: (id) => set(state => ({
todos: state.todos.map((todo) =>
todo.id === id ? {...todo, completed: !todo.completed} : todo
)
})),
deleteTodo: (id) => set(state => ({
todos: state.todos.filter(todo => todo.id !== id)
})),
}))
export default useTodoStore<useTodoStroe.js>
const TodoList = () => {
const { todos, toggleTodo, deleteTodo} = useTodoStore();
const [filter, setFilter] = useState('all');
const filterTodos = todos.filter(todo => {
switch(filter){
case "active":
return !todo.completed;
case "completed":
return todo.completed;
default:
return true;
}
});
return (
<ListContainer>
<FilterContainer>
<FilterButton
active={filter === "all"}
onClick={() => setFilter("all")}
>
전체
</FilterButton>
<FilterButton
active={filter === "active"}
onClick={() => setFilter("active")}
>
진행중
</FilterButton>
<FilterButton
active={filter === "completed"}
onClick={() => setFilter("completed")}
>
완료
</FilterButton>
</FilterContainer>
{filterTodos.map((todo) => (
<TodoItem key={todo.id}>
<Checkbox
type='checkbox'
checked={todo.completed}
onChange={() => toggleTodo(todo.id)}
/>
<TodoText completed={todo.completed}>{todo.text}</TodoText>
<DeleteButton onClick={() => deleteTodo(todo.id)}>삭제</DeleteButton>
</TodoItem>
))}
</ListContainer>
)
}
export default TodoList<TodoList.jsx>
체크박스들을 가져오기 위하여 useTodoStore파일을 거쳐서 useTodoStore에서 처리하는 메소드들을 작성하였었는데
그로인하여 맨처음 렌더링되고 버튼을 눌렀을 때는 실행이 되었지만 기존 배열의 값을 건드리므로 그 다음 버튼이 동작하지
않는다는 문제가 있었는데 강사님의 TodoList파일 안에서의 동작만으로 체크박스 값들을 가져올 수 있다는 말씀이 있었는데
어떻게 해야할지 감이 오지않았다. 해결법은 바로 TodoList파일에서 이미 todos를 받아오고 체크박스 체크 처리를 useTodoStore에서 처리를 하고 있으므로 TodoList에서 새로운 useState를 만들어 버튼을 클릭하였을때 상태 값을 부여함으로 그 상태값에 따른
조건을 부여하여 출력하면 되는 것이었다.
💪 Try (시도할 것)
오늘은 이렇게 해보자! 라고 생각하는 새로운 시도나 전략을 써보세요.
＆ 이번주의 주제는 SQL인데 어제의 주제인 SQL의 실행 순서는 어떻게 되는지를 학습하는데 SQLD 자격증 공부를 한지가 조금
되어 금방 다시 헷갈리는 문제가 발생하였으므로 실무에서 다시 잘 사용할 수 있게 오늘의 주제와 더불어 어제의 주제와 연관지 어서 학습을 하며 오늘 학습하는 React의 새로운 내용들을 조원들과 서로 설명해보려 한다.