리액트

개발일지

자바스크립트 불변성(Immutability)을 지키며 상태 관리하기 📘

불변성은 자바스크립트 개발에서, 특히 React와 같은 프레임워크를 사용할 때 매우 중요한 개념입니다. 오늘은 실제 프로젝트에서 겪었던 경험을 바탕으로 불변성을 지키며 상태를 관리하는 방법에 대해 알아보겠습니다.🔍 불변성이 왜 중요할까?예측 가능한 상태 변화의도치 않은 부작용 방지React의 렌더링 최적화‼️ 잘못된 상태 관리의 예시// ❌ 잘못된 방법const handleUpdateUser = (user) => { user.name = "새로운 이름"; // 직접 객체 수정 setUser(user); // React가 상태 변경을 감지하지 못할 수 있음}// ❌ 배열 수정 시 흔한 실수const handleAddItem = (items) => { items.push(newItem); // ..

개발일지

[리팩토링] 투두리스트 다크모드 코드 개선하기 feat. react

리팩토링 이유 기존에 스스로 리액트를 이용해서 만든 다크모드가 지원되는 투두리스트를 다시 리팩토링하게 되었다. 이유는 java, spring을 공부하면서 솔로프로젝트로 '투두리스트 백엔드 서버' 를 만들게 되었는데 내가 로컬 스토리지를 활용해서 프론트 부분만 만든 투두리스트 앱과 연결하려고 했다. 그러다 보니 이때 사실 고치지 못하고 시간이 없어서 넘어간 다크모드를 구현하는 효율성이 매우 떨어지게, 그리고 번거롭게 구현한 코드가 너무 거슬리고 눈에 밟혔다. 그래서 일단 로컬스토리지 -> 백엔드 서버와의 연결은 잠시 뒤로 미루고 먼저 브랜치를 하나 새로 따서 스파게티 코드를 정리했다. 이전에 가관인 스파게티 코드 DarkModeContext 정의 import { createContext, useState ..

벤지_
'리액트' 태그의 글 목록