React에서 상태를 바꿨는데 화면이 바뀌지 않는 이유 – 자료형과 불변성의 이해1. 상태를 바꿔도 리렌더링되지 않는 상황React에서 가장 기본적인 원칙 중 하나는 상태를 변경하면 컴포넌트가 다시 렌더링된다는 것이다. 그러나 상태를 분명히 바꿔서 setState를 호출했는데도 화면이 전혀 변하지 않는 경우가 있다.const [user, setUser] = useState({ name: '길동' });// 잘못된 방법user.name = '지민';setUser(user); // 리렌더링되지 않음!사용자의 이름을 바꿔서 setUser를 호출했지만, 화면에는 기존 값이 그대로 남아 있다. 디버그를 해보면 상태는 분명 변경되었는데, React는 아무런 반응도 하지 않는다. 어떤 오류도, 로그도 없다. 하지만 ..
Next.js 프로젝트는 로컬에서는 잘 작동하지만, Docker로 운영 환경에 배포하는 순간 전혀 다른 문제가 발생한다.- 빌드 결과물과 전체 소스를 모두 포함해 이미지 용량이 1GB를 넘고 - 의존성은 바뀌지 않았는데도 매번 설치부터 다시 하게 되고 - 빌드 시간과 배포 속도는 점점 길어지며 - 실행 구조가 복잡해져 운영 환경에서 디버깅이나 관리가 번거로워진다단순히 “실행되는 Docker 이미지”를 만드는 것과 운영 환경에서 최적화된 구조로 빠르고 안정적으로 배포하는 것은 다르다. 이 글에서는 위 문제들을 해결하기 위해내가 직접 사용하고 있는 두 가지 최적화 전략을 공유한다.멀티스테이지 빌드 (Multi-stage Build)Next.js standalone 모드이 두 가지를 함께 적용하면Do..
지난 글에서는 Select 컴포넌트를 Compound Component 패턴으로 관리하는 방법을 소개했다. 이번에는 이 패턴을 Modal 컴포넌트에도 적용해보려고 한다.Modal은 프로젝트 어디에서나 자주 사용된다. 그래서 더더욱 잘 구조화해서 만들어두는 게 중요하다. 이번 글에서는 Portal을 이용하고, Compound Component 패턴을 적용해 Modal을 공통 컴포넌트로 깔끔하게 만드는 방법을 정리해본다.Modal을 만들 때 고려한 기본 원칙은 세 가지였다:Portal을 이용해 Modal을 body 바깥에 띄운다.useModalStore 같은 전역 상태 훅을 사용해 열고 닫을 수 있게 한다.Compound Component 패턴으로 구조를 나눠 자유롭게 조합할 수 있게 한다.왜 Portal을..
React에서 여러 기능을 가진 UI를 만들 때, 각각의 역할을 분리하여 조립 가능한 형태로 구성하는 것이 중요합니다. 이때 유용하게 쓸 수 있는 방법이 바로 Compound Component 패턴입니다.이번 글에서는 공통 컴포넌트를 더 유연하고 확장 가능하게 만들기 위해 Compound Component 패턴을 선택한 이유와 장점을 소개하고, 이를 Select 컴포넌트 예시로 구체적으로 풀어보겠습니다.1. 왜 Compound Component 패턴을 선택했을까?기능과 UI를 하나의 컴포넌트에 모두 포함시키면 코드가 비대해지고, 작은 수정이나 새로운 기능 추가에도 전체 구조를 건드려야 해서 유지보수와 확장이 어렵습니다.반면, Compound Component 패턴을 사용하면 다음과 같은 장점이 있습니다...
먼저, 컴포넌트가 리렌더링되는 경우는 다음과 같습니다. 컴포넌트의 state가 변경되었을 때 부모 컴포넌트에서 받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 위와 같은 특성은 필요없는 렌더링을 일으키기도 합니다. 부모 컴포넌트의 state가 바뀌면 props를 받은 자식 컴포넌트와 변경된 state를 받지 않은 자식 컴포넌트 모두 렌더링 됩니다. 이러한 불필요한 렌더링을 줄이고 성능을 높이는 방법을 설명하겠습니다. useMemo useMemo는 React에서 CPU 소모가 심한 함수들을 캐싱하기 위해 사용됩니다. useMemo를 사용하면 복잡한 계산식의 계산한 값을 재사용할 수 있습니다. 만약, 컴포넌트의 어떤 함수가 값을 리턴하는데 하나의 변화에도 많은 시간을 소요한다면, 리렌더링될 때마..