React 프로젝트를 진행하다 보면 컴포넌트 간 상태 공유가 복잡해지는 순간이 온다. props drilling으로 인한 코드의 복잡성, 여러 컴포넌트에서 동일한 상태를 사용해야 하는 상황들이 늘어나면서 전역 상태 관리의 필요성을 느끼게 된다. 이런 문제를 해결하기 위해 등장한 것이 전역 상태 관리 라이브러리이고, 그 중 하나가 Redux이다. 그리고 Redux의 복잡함을 개선한 것이 Redux Toolkit이다. ❓ Redux- Redux는 JavaScript 애플리케이션을 위한 예측 가능한 상태 관리 라이브러리다. React와 함께 사용되는 경우가 많지만, 실제로는 React에 종속되지 않는 독립적인 라이브러리다. Redux는 애플리케이션의 모든 상태를 하나의 중앙 저장소(Store)에서 관리하며, ..

React 개발을 할 땐 컴포넌트가 언마운트될 때의 메모리 누수나 성능 문제를 고려해야 한다. 특히 타이머나 이벤트 리스너를 사용할 때 이런 문제들이 자주 발생한다. 이런 상황에서 useEffect의 클린업 함수는 정말 중요한 역할을 한다. 오늘은 이 클린업 함수가 무엇인지, 왜 필요한지, 그리고 어떻게 효과적으로 사용할 수 있는지 알아보려고 한다.❓ useEffect의 클린업 함수 - useEffect의 클린업 함수는 컴포넌트가 언마운트되거나 의존성 배열의 값이 변경되기 직전에 실행되는 함수다. - 이 함수는 useEffect 내에서 return 문을 통해 정의되며, 이전에 설정한 구독, 타이머, 이벤트 리스너 등을 정리하는 역할을 담당한다. - 요약하면 side effect를 정리하여, 메모리 누수..

개인 프로젝트에서 드래그 앤 드랍 기능을 구현 중이었는데, 의문이 들었다.배열의 순서를 변경하는 과정에서, 왜 Array.from()을 이용해서 얕은 복사를 할까?결론부터 말하면 참조값이 변경되어야 React가 상태 변경을 감지할 수 있기 때문이다.그리고 불변성의 원칙을 지키기 위함이다.그럼 하나씩 더 자세히 살펴보자.얕은 복사를 해서 새로운 배열 인스턴스를 생성하면, 배열 자체는 새로운 참조가 되지만, 배열 내부 객체들은 여전히 원본과 같은 객체를 참조한다.하지만 이렇게 최상위 레벨에서는 새로운 참조값이 생성되지만, 내부 객체는 여전히 원본과 동일한 참조를 공유한다.드래그 앤 드롭 로직같은 경우엔 항목의 순서만 변경하고 항목 자체의 내용은 수정하지 않기 때문에 원본과 같은 객체를 참조해도 상관이 없다...

모달 안에 있는 드롭다운이 열려있는 상태에서, 모달 내부지만 드롭다운 관련 요소들 외부를 클릭하면 드롭다운이 꺼지고, 모달 외부를 클릭하면 드롭다운과 모달이 함께 꺼지도록 구현하고 싶었다.그래서 아래와 같은 로직을 이용했다. useEffect(() => { const handleClickOutside = (event: MouseEvent) => { const modalContent = document.querySelector('[data-modal-container="true"]'); // 모달 공통 컴포넌트 컨테이너 // 모달 내부 클릭인지 확인 if (modalContent && modalContent.contains(event.target as Node)) { ..

리액트에서 버튼 등 하위 컴포넌트에 이벤트 핸들러를 연결할 때,#1 onDelete()}>삭제이렇게 익명 함수로 감싸서 전달하는 방식을 사용했었는데, #2삭제이렇게 익명 함수로 감싸지 않고 직접 전달하는 방식이 더 효율적이라는 것을 알게 되었다. 이 방법은 onDelete함수 자체의 참조를 전달하는 것이다.물론 두 버튼의 기능에 대해서는 차이가 없다. 두 방식 모두 버튼을 클릭하면 onDelete 함수가 정상적으로 실행된다.#3삭제하지만 위와 같이 사용한다면 onDelete 함수의 결과값을 전달하는 것이 되므로 오류가 난다. 컴포넌트 렌더링 시점에 함수가 바로 실행되기 때문이다.#4 onDelete(item.id)}>삭제그런데 함수에 인자를 넘겨야 할 때는 당연하게도 익명 함수로 감싸서 전달해야 한다. ..

리액트 프로젝트를 시작할 때 폴더 구조를 어떻게 설계할지 고민하는 것은 매우 중요하다. 폴더 구조는 프로젝트의 유지보수성과 확장성을 결정짓는 핵심 요소다. 프로젝트의 규모와 복잡성에 따라 적합한 폴더 구조를 선택해야 하며, 이를 통해 코드 관리가 용이해지고 협업 효율성이 높아진다. 리액트는 특정한 폴더 구조를 강제하지 않지만, 일반적으로 기능별, 파일 유형별, 또는 페이지별로 파일을 그룹화하는 방식이 널리 사용된다. 올바른 폴더 구조는 코드 가독성을 높이고, 프로젝트가 커질수록 유지보수를 쉽게 만들어준다!src/├── assets/ # 이미지, CSS, 폰트 등 정적 파일 저장├── components/ # 재사용 가능한 UI 컴포넌트 저장├── hooks/ # 커스텀 R..