Oagree
close
프로필 배경
프로필 로고

Oagree

  • 분류 전체보기
    • JavaScript
    • React
    • Web
    • Computer Science
    • Algorithm
    • 딥러닝
      • 기초 이론
    • WIL (Weekly I Learned)
  • 홈
  • 태그
React 상태가 변경되어도 리렌더링되지 않는 이유와 해결법

React 상태가 변경되어도 리렌더링되지 않는 이유와 해결법

React에서 상태를 바꿨는데 화면이 바뀌지 않는 이유 – 자료형과 불변성의 이해1. 상태를 바꿔도 리렌더링되지 않는 상황React에서 가장 기본적인 원칙 중 하나는 상태를 변경하면 컴포넌트가 다시 렌더링된다는 것이다. 그러나 상태를 분명히 바꿔서 setState를 호출했는데도 화면이 전혀 변하지 않는 경우가 있다.const [user, setUser] = useState({ name: '길동' });// 잘못된 방법user.name = '지민';setUser(user); // 리렌더링되지 않음!사용자의 이름을 바꿔서 setUser를 호출했지만, 화면에는 기존 값이 그대로 남아 있다. 디버그를 해보면 상태는 분명 변경되었는데, React는 아무런 반응도 하지 않는다. 어떤 오류도, 로그도 없다. 하지만 ..

  • format_list_bulleted React
  • · 2025. 5. 27.
  • textsms
Next.js Docker 최적화 전략 : 멀티스테이지 빌드와 standalone 모드

Next.js Docker 최적화 전략 : 멀티스테이지 빌드와 standalone 모드

Next.js 프로젝트는 로컬에서는 잘 작동하지만, Docker로 운영 환경에 배포하는 순간 전혀 다른 문제가 발생한다.- 빌드 결과물과 전체 소스를 모두 포함해 이미지 용량이 1GB를 넘고 - 의존성은 바뀌지 않았는데도 매번 설치부터 다시 하게 되고 - 빌드 시간과 배포 속도는 점점 길어지며 - 실행 구조가 복잡해져 운영 환경에서 디버깅이나 관리가 번거로워진다단순히 “실행되는 Docker 이미지”를 만드는 것과 운영 환경에서 최적화된 구조로 빠르고 안정적으로 배포하는 것은 다르다. 이 글에서는 위 문제들을 해결하기 위해내가 직접 사용하고 있는 두 가지 최적화 전략을 공유한다.멀티스테이지 빌드 (Multi-stage Build)Next.js standalone 모드이 두 가지를 함께 적용하면Do..

  • format_list_bulleted React
  • · 2025. 5. 15.
  • textsms
Next.js standalone 배포 "sharp missing in production" 에러 해결하기

Next.js standalone 배포 "sharp missing in production" 에러 해결하기

Next.js의 next/image 컴포넌트는 이미지 최적화를 위해 서버 측에서 sharp 모듈을 사용합니다. 하지만 Docker 기반의 production 환경에서는 종종 아래와 같은 오류가 발생합니다.Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly. 개발 환경에서는 멀쩡히 동작하던 기능이 운영 환경에서 갑자기 실패하는 이유는 무엇일까요? 이 글에서는 해당 오류의 원인과 해결 방법을 명확히 정리해 봅니다.1. 개발 환경에서는 왜 문제가 없을까?개발 중에는 sharp와 관련된 문제가 드러나지 않는 경우가 대부분입니다. 그 이유는 아래와 같습니다.1) 개발 ..

  • format_list_bulleted React
  • · 2025. 5. 7.
  • textsms
Portal과 Compound 패턴으로 Modal 만들기

Portal과 Compound 패턴으로 Modal 만들기

지난 글에서는 Select 컴포넌트를 Compound Component 패턴으로 관리하는 방법을 소개했다. 이번에는 이 패턴을 Modal 컴포넌트에도 적용해보려고 한다.Modal은 프로젝트 어디에서나 자주 사용된다. 그래서 더더욱 잘 구조화해서 만들어두는 게 중요하다. 이번 글에서는 Portal을 이용하고, Compound Component 패턴을 적용해 Modal을 공통 컴포넌트로 깔끔하게 만드는 방법을 정리해본다.Modal을 만들 때 고려한 기본 원칙은 세 가지였다:Portal을 이용해 Modal을 body 바깥에 띄운다.useModalStore 같은 전역 상태 훅을 사용해 열고 닫을 수 있게 한다.Compound Component 패턴으로 구조를 나눠 자유롭게 조합할 수 있게 한다.왜 Portal을..

  • format_list_bulleted React
  • · 2025. 4. 29.
  • textsms
공통 컴포넌트를 유연하게 설계하는 방법: Compound Component 패턴 적용하기

공통 컴포넌트를 유연하게 설계하는 방법: Compound Component 패턴 적용하기

React에서 여러 기능을 가진 UI를 만들 때, 각각의 역할을 분리하여 조립 가능한 형태로 구성하는 것이 중요합니다. 이때 유용하게 쓸 수 있는 방법이 바로 Compound Component 패턴입니다.이번 글에서는 공통 컴포넌트를 더 유연하고 확장 가능하게 만들기 위해 Compound Component 패턴을 선택한 이유와 장점을 소개하고, 이를 Select 컴포넌트 예시로 구체적으로 풀어보겠습니다.1. 왜 Compound Component 패턴을 선택했을까?기능과 UI를 하나의 컴포넌트에 모두 포함시키면 코드가 비대해지고, 작은 수정이나 새로운 기능 추가에도 전체 구조를 건드려야 해서 유지보수와 확장이 어렵습니다.반면, Compound Component 패턴을 사용하면 다음과 같은 장점이 있습니다...

  • format_list_bulleted React
  • · 2025. 4. 29.
  • textsms

[React] 렌더링 성능 개선하기

먼저, 컴포넌트가 리렌더링되는 경우는 다음과 같습니다. 컴포넌트의 state가 변경되었을 때 부모 컴포넌트에서 받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 위와 같은 특성은 필요없는 렌더링을 일으키기도 합니다. 부모 컴포넌트의 state가 바뀌면 props를 받은 자식 컴포넌트와 변경된 state를 받지 않은 자식 컴포넌트 모두 렌더링 됩니다. 이러한 불필요한 렌더링을 줄이고 성능을 높이는 방법을 설명하겠습니다. useMemo useMemo는 React에서 CPU 소모가 심한 함수들을 캐싱하기 위해 사용됩니다. useMemo를 사용하면 복잡한 계산식의 계산한 값을 재사용할 수 있습니다. 만약, 컴포넌트의 어떤 함수가 값을 리턴하는데 하나의 변화에도 많은 시간을 소요한다면, 리렌더링될 때마..

  • format_list_bulleted React
  • · 2022. 4. 19.
  • textsms
  • navigate_before
  • 1
  • 2
  • navigate_next
전체 카테고리
  • 분류 전체보기
    • JavaScript
    • React
    • Web
    • Computer Science
    • Algorithm
    • 딥러닝
      • 기초 이론
    • WIL (Weekly I Learned)
최근 글
인기 글
전체 방문자
오늘
어제
전체
Copyright © Oagree

티스토리툴바