개발일기

React.Memo로 컴포넌트 최적화를 할 때, 두번째 인자에서 props 값이 바뀌었는지를 점검해서 boolean을 리턴. 그런데 만약 비교해야하는 값이 많아지면 어떻게 대응할까? ✅ 전제 요약: React.memo 두 번째 인자의 역할export default React.memo(MyComponent, (prevProps, nextProps) => { return prevProps.someProp === nextProps.someProp;});true를 리턴하면 같다고 간주 → 리렌더링 안 함false를 리턴하면 다르다고 간주 → 리렌더링 함 🎯 질문: props가 많아질수록 어떻게 대응해야 하나?✅ 1. 엄격하게 필요한 것만 비교한다 (Partial Equality Check)모든 props를 ..

create-next-app으로 프로젝트를 만들고 로컬 서버를 구동하던 중 아래와 같은 에러를 만났다. 이 이슈는 npm version이 맞지 않아 발생한 이슈(나는 14.x대였음)로 공홈에서도 아래와 같이 명시적으로 표기하고 있다. 공홈의 내용을 자세히 읽는 습관을 갖아야 겠다.

"중복된" 컴포넌트 작성이 아닌, 컴포넌트 내 "점점 늘어나는 조건 처리" 없이 하나의 컴포넌트로 여러 layout들을 관리하며 동시에 코드의 가독성을 확보하고 원활한 유지 보수를 할 수 있는 컴포넌트를 설계하기 위한 내용입니다. 디자인 시안을 전달 받고 컴포넌트를 설계하는 과정 중, 아래와 같은 디자인 시안을 마주하게 되었습니다. 아래의 디자인 샘플들은 거의 유사한(혹은 동일한) 모델을 기반으로 화면을 구성하는데, 화면 내 표시되는 곳에 따라 레이아웃의 세밀한 차이가 있습니다. cf) 컴포넌트 예시 구현 초기 단계에서는 이러한 컴포넌트를 구현하기 위해 아래와 같은 생각을 하였습니다. '하나의 컴포넌트 내에서 어떤 화면인지를 알려주는 props를 넘겨 if-else 와 같이 조건을 구분하여 화면을 렌더링..