코드 땜장이

리액트 성능 최적화, 무작정 memo 쓰기 전에 먼저 봐야 할 기준들 빠른 답 느린 원인을 확인하기 전에는 memo부터 늘리지 말고 React DevTools Profiler로 병목을 먼저 찾습니다. 상태를 너무 상위에 두면 하위 전체가 자주 리렌더링되므로, 상태 소유권을 필요한 범위로 최대한 좁힙니다. useMemo와 useCallback은 비용이 큰 계산이나 참조 안정성이 실제로 필요한 경우에만 적용합니다. 초기 로딩이 느리다면 라우트 단위 코드 스플리팅부터 검토하는 편이 체감 성능에 더 직접적입니다. 목차 리액트 앱은 왜 느려질까 성능 최적화의 첫 단계: 상태 소유권 좁히기 React.memo, useMemo, useCallback은 무엇이 다를까 초기 로딩이 느리다면 코드 스플리팅부터 보기 Profiler로 먼저 확인할 것 흔한 안티패턴과 디버깅 포인트 무엇부터 적용하면 좋을까 리액트 앱은 왜 느려질까 리액트 앱이 느려질 때 많은 분이 먼저 memo , useMemo , useCallback 부터 떠올립니다. 하지만 실제 병목은 대개 훅이 부족해서가 아니라, 상태가 너무 위에 있거나, 작은 변화가 너무 넓은 화면에 전파되거나, 리스트 렌더링과 정렬·필터링 같은 계산이 반복되기 때문에 생깁니다. 여기서 먼저 구분할 것이 있습니다. 리액트에서 리렌더링은 정상 동작입니다. 상태나 props 가 바뀌면 다시 렌더링하면서 다음 UI를 계산하는 것이 리액트의 기본 모델입니다. 문제는 그 렌더링 범위가 불필요하게 넓거나, 계산 자체가 무겁거나, 실제 DOM 반영 비용까지 커질 때입니다. 즉, 리렌더링이 있다 와 성능 문제가 있다 는 같은 말이 아닙니다. 성능 최적화의 목표는 리렌더링을 무조건 없애는 것이 아니라, 사용자 행동에 비해 과도한 계산과 전파를 줄이는 것입니다. 성능 최적화의 첫 단계: 상태 소유권 좁히기 프론트엔드에서 가장 먼저 봐야 할 것은 데이터 흐름입니다. 리액트는 부모에서 자식으로 내려가는 단방향 흐름을 가지므로, 어떤 상태...

리액트 폼 입력은 누가 관리해야 할까: Controlled와 Uncontrolled 선택 기준 빠른 답 입력값이 화면 상태와 함께 즉시 바뀌어야 하면 Controlled가 기본 선택입니다. 제출할 때만 값을 읽으면 되는 단순 폼은 Uncontrolled가 더 간단합니다. 핵심 기준은 성능보다 데이터 흐름과 상태 소유권을 어디에 둘지입니다. value와 defaultValue를 섞거나 ref와 state를 함께 밀어붙이면 버그가 나기 쉽습니다. 목차 왜 두 방식이 자주 헷갈릴까 한눈에 비교 먼저 결정할 질문: 이 값은 화면 상태인가, 제출 데이터인가 Controlled Component가 맞는 상황 Uncontrolled Component가 맞는 상황 예외 케이스와 하이브리드 구성 흔한 안티패턴과 디버깅 포인트 실무 선택 기준 정리 왜 두 방식이 자주 헷갈릴까 겉으로 보면 둘 다 똑같이 입력창이 동작합니다. 사용자는 타이핑하고, 화면에는 글자가 보입니다. 그래서 처음에는 " useState 로 관리하든 ref 로 읽든 결과가 같은 것 아닌가?"라고 느끼기 쉽습니다. 하지만 실무에서 중요한 것은 누가 현재 값을 소유하느냐 입니다. Controlled Component 는 입력값의 원본이 리액트 state 입니다. 반대로 Uncontrolled Component 는 브라우저 DOM이 값을 들고 있고, 리액트는 제출 시점이나 특정 이벤트에서만 그 값을 읽습니다. 즉 차이는 문법이 아니라 데이터 흐름입니다. 입력값이 다른 UI를 바꾸는지, 부모 컴포넌트가 현재 값을 알아야 하는지, 입력 중간에 검증이나 자동 저장이 필요한지에 따라 선택이 갈립니다. 한눈에 비교 값의 출처: Controlled 는 state , Uncontrolled 는 DOM의 현재 값입니다. 데이터 흐름: Controlled 는 onChange -> setState -> render -> value 순서로 흐르고, Uncontrolled ...

React props와 state 차이, 언제 무엇을 써야 할까 빠른 답 props는 부모가 자식에게 내려주는 읽기 전용 데이터다. state는 컴포넌트가 직접 관리하며 바뀌면 화면이 다시 렌더링된다. 자식이 값을 바꿔야 하면 props를 수정하지 말고 부모의 state 변경 함수를 전달한다. 입력값, 로딩 여부, 토글 같은 변하는 UI 데이터는 대부분 state로 관리한다. 목차 props와 state가 처음 React에서 가장 헷갈리는 이유 한눈에 비교 props를 써야 하는 상황 state를 써야 하는 상황 예제를 위한 최소 구성 실전 코드로 보기: 부모의 state를 자식에 props로 전달하기 자주 하는 실수와 예외 케이스 실무 선택 기준: 어디에 둬야 하는가 props와 state가 처음 React에서 가장 헷갈리는 이유 React를 처음 배우면 props 와 state 가 비슷해 보입니다. 둘 다 JSX 안에서 값을 출력할 때 사용하고, 둘 다 화면 결과에 영향을 주기 때문입니다. 그래서 “둘 다 데이터면 그냥 아무 데나 넣어도 되는 것 아닌가?”라는 생각이 들기 쉽습니다. 하지만 둘의 차이는 문법보다 소유권 에 있습니다. 어떤 값을 부모가 가지고 자식에게 전달 하면 props 이고, 어떤 값을 컴포넌트가 자기 내부에서 직접 관리 하면 state 입니다. 이 기준만 분명히 잡히면, 어디에 어떤 값을 둬야 하는지 대부분 정리됩니다. 초보자가 가장 자주 막히는 지점도 여기입니다. 자식 컴포넌트에서 버튼을 눌렀는데 부모가 넘겨준 값을 바꾸고 싶을 때, props 를 직접 수정하려고 시도합니다. 하지만 React는 단방향 데이터 흐름을 전제로 설계되어 있어서, 값의 변경은 값을 소유한 쪽에서 일어나야 합니다. 자식은 값을 바꾸는 대신, “이 값을 바꿔 달라”는 요청을 부모에게 보내는 구조를 사용합니다. 한눈에 비교 비교형으로 정리하면 props 와 state 의 역할 차이가 더 빨리 보입니다. 소유자: props 는 부모가 소유...