STUDY/react7 Redux Toolkit과 Immer 동작 원리 Redux Toolkit과 Immer 동작 원리Redux Toolkit 내부에서 Immer가 어떻게 동작하는가Redux Toolkit(RTK)은 기본적으로 Immer가 내장되어 있다.그래서 createSlice 안에서 작성한 리듀서는 겉으로 보면 직접 state를 수정하는(mutate) 코드처럼 보이지만,실제로는 Immer가 내부에서 불변성을 지키면서 새로운 state를 생성한다.state.count += 1; // mutate처럼 보임하지만 실제로 일어나는 일은 이렇다:Immer가 state를 draft 객체로 감싼다.draft에 가해진 변경을 Proxy로 감지한다.변경된 부분만 새로운 객체로 복사(구조적 공유).완전히 새로운 state를 반환한다.produce 개념Immer의 핵심 함수는 produc.. 2025. 11. 17. 불변성이 왜 필요한가 불변성이 왜 필요한가1. 불변성이 중요한 이유React는 상태 변경 여부를 내부 값 비교가 아니라 참조 비교(얕은 비교) 로 판단한다.그래서 객체 내부의 값이 실제로 바뀌어도 참조가 그대로면 React는 변경을 감지하지 못하고 리렌더를 하지 않는다.불변성을 유지하는 건 리액트 렌더링 구조의 기본 전제.2. 얕은 비교(shallow compare)와 리렌더 구조리액트는 트리 전체를 순회해야하는 깊은 비교는 비용이 크기 때문에 얕은 비교를 사용하여 참조가 바뀌었는지만 확인한다.깊은 비교 → 전체 탐색 → 느림얕은 비교 → 참조 확인만 → 빠름prevState === nextState;이러면 “변경 없음”으로 본다.그래서 불변성을 지키지 않으면 리렌더 안됨.3. 불변성을 안 지키면?❌ 직접 값 변경(mutat.. 2025. 11. 16. react-i18next 알아보기 코드를 읽어보고있는데 코드에 텍스트가 하나도 없고 t(' dddd')이런 식으로 적혀있어서 이게 뭔가 했는데 react-i18next 를 이용해서 다국어 번역을 적용하기위한 것임을 알게되었다. i18n은 Internationalization의 약어로, "i"와 "n" 사이의 18자를 줄여 부른 표현이다. i18n은 애플리케이션을 여러 언어와 지역에 맞게 조정하여 사용자의 문화와 언어에 맞는 경험을 제공하는 프로세스다. 이는 특히 글로벌 서비스를 제공하는 웹사이트나 앱에서 중요하다. i18n을 통해 애플리케이션이 다양한 언어, 날짜 형식, 통화 표기, 시간대 등을 지원하도록 할 수 있다. react-i18next 설치 및 기본 설정먼저 react-i18next와 i18next 패키지를 설치해야 한다.$ n.. 2024. 11. 3. 리액트에서 `key`에 `index`를 넣으면 안 되는 이유 리액트에서 `key`는 리스트의 각 항목을 고유하게 식별하기 위한 속성이다. 이 `key`는 리액트가 DOM을 효율적으로 업데이트하는 데 중요한 역할을 한다. 하지만 리스트 렌더링 시 `index`를 `key`로 사용하는 것은 권장되지 않는다. 이 글에서 그 이유와 다른 대안을 설명하겠다. `key`의 역할리액트는 컴포넌트 리스트를 렌더링할 때, 각 항목을 추적하기 위해 `key`를 사용한다. `key`는 리액트가 어떤 항목이 변경, 추가, 또는 제거되었는지 식별하는 데 도움을 준다. 만약 `key`가 없거나 적절하지 않다면, 리액트는 변경 사항을 제대로 감지하지 못해 불필요한 렌더링을 하거나 오류가 발생할 수 있다.const items = ['Apple', 'Banana', 'Cherry'];retu.. 2024. 9. 22. 이전 1 2 다음