본문 바로가기

STUDY40

Stale Closure TIL: Stale Closure클로저(Closure)란?함수가 선언될 당시의 외부 변수를 기억하는 것임. JavaScript 중요한 개념 중 하나.function outer() { const value = 1; return function inner() { console.log(value); // value를 기억함 };}const fn = outer();fn(); // 1 출력inner는 outer가 끝나도 value를 기억함. 이게 클로저 구조임.문제 상황부서 목록을 조회한 뒤 테이블 행을 클릭했을 때:첫 번째 클릭: 부서 선택 안 됨, departmentOptions가 []두 번째 클릭부터: 정상 작동데이터는 로딩됐는데 첫 클릭에서만 빈 배열을 참조하는 오류가 발생함... 2025. 11. 18.
커스텀 컴포넌트에 styled-components 안 먹는 이유 커스텀 컴포넌트에 styled-components 안 먹는 이유오늘 공통 컴포넌트를 styled-components로 감싸려고 했는데 스타일이 전혀 적용이 안 됨.원인부터 말하면 그 공통 컴포넌트 자체에 className props가 아예 없었다.그러니까 styled-components가 알아서 className을 주입해줘도, 컴포넌트가 그걸 받을 수도 없고, DOM에도 넘길 수가 없었던 거임.뭐가 문제?styled-components는 내부에서 스타일을 클래스로 만들어서 컴포넌트에 className으로 넣어준다.근데 내가 감싸려던 컴포넌트가 그걸 받지도 않고 DOM에도 전달 안 하면 스타일이 먹을 리가 없음.내가 쓰려던 구조const MyBox = () => { return hello; // clas.. 2025. 11. 17.
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.

티스토리툴바