react

서론쇼핑몰에서 "최근 본 상품" 배너를 보신 적 있을겁니다.어떤 페이지로 이동하든 항상 사이드 영역에 존재하면서 새로운 상품을 클릭할 때 마다 업데이트 해야합니다.이걸 리액트 프로젝트에서 어떻게 구현해야할까요?상품의 클릭 이벤트 시점에 클릭된 상품 정보를 최근 상품 목록 컴포넌트에 전달해야 합니다.물론 state lifting, contextAPI,redux 등의 방법이 떠오릅니다. 하지만 이 모든 방법이 여의치 않은 상황이라면 event 버스를 이용한 방법을 고려해볼 수 있습니다.Event Bus이벤트 버스이벤트 버스(Event Bus)는 소프트웨어 아키텍처 패턴 중 하나로, 애플리케이션 내의 다양한 컴포넌트들이 서로 통신할 수있도록 하는 중앙 허브 역할을 합니다. const EventBus = { ..

서론next13은 React Server Component(이하, RSC)을 중심으로 app router라는 큰 변화를 가지고 왔습니다.RSC과 server-action의 등장으로 인해 이젠 서버사이드 데이터 패칭의 범위가 확 늘어났습니다. 더불어 이런 서버사이드 요청에 대한 캐싱을 지원하기에 그럼 이제 react-query는 next-js에서 필요없을까? 하는 생각을 하게 됩니다.결론 부터 말하지만 역할은 축소됐지만 여전히 필요하다라고 말씀드리고 싶습니다. react-query는 클라이언트의 요청 서버 사이드의 요청은 next.js에서 처리할테니까요이 부분에 대해서 next.js의 data-fetching 파트에서도 다음과 같이 설명하고 있습니다swr 혹은 react-query를 이용해 클라이언트에서 ..

의존성 역전에 대해서  들어보신적 있을겁니다.어떤 모듈이 가지고 있는 의존성을 격리하여 외부로 부터 주입받는 형태를 보통 의존성 역전이라고 합니다.왜 이런 설계가 필요할까요? 우선 좋은 설계에 대해 짚고 넘어가보겠습니다.우리 모두가 공감할 수 있는 좋은 설계는 "기능이 동작하면서 내일 쉽게 변경할 수 있는 코드"라고 생각합니다. 확장은 쉬우면서 수정에는 닫혀있는 객체 지향에서의 개방 폐쇄 원칙도 이를 뒷받침하는 원칙중 하나입니다. 좋은 설계, 기능이 동작하면서 내일 쉽게 변경할 수 있는 코드 최악의 상황을 생각해보겠습니다. 이번 주에 새로운 기능을 개발해야 하는데 이 기능과 연결된 모듈이 \10개가 넘고 심지어 보이지 않는 숨은 의존성까지 존재합니다. 끔찍하죠?우리가 바라는 상황은 수정해야 하는 기능에 ..

서론컴포넌트를 개발하다보면 서로 독립적으로 선언된 컴포넌트가 관계를 갖는 경우가 있습니다.html태그에서 select태그와 option태그의 관계를 예로 들 수 있습니다.option은 select에 종속된 요소로 select요소의 클릭 상태를 공유받으며 이러한 상태 공유가 캡슐화되어 있습니다. key1 key2 key3  이런 암묵적 관계의 표현을 리액트 컴포넌트에서 할 수 없을까요? 이러한 접근이 바로 Compond Pattern입니다. 이 패턴은 상위 컴포넌트와 하위 컴포넌트 간의 관계를 직관적으로 표현합니다.아래 코드는 chakra-ui의 menu  컴포넌트 입니다. 첨부된 이미지의 UI를 상상해보세요!  }> Actions Download Create a Copy M..

서론"useEffect에 대해 설명해주세요"라는 질문을 받으면 어떤 대답을 해야 할까요?리액트 공식 문서에 따르면 effect는 함수 컴포넌트와 외부 시스템과의 동기화를 목적으로 만들어졌다고 합니다.여기서 외부 시스템이란 DB,네트워크, 브라우저 DOM등이 될 수 있습니다. react 앱을 개발 서버에서 실행하게 되면 useEffect가 의존성 배열과 상관없이 두번 실행되는 것을 경험하게 됩니다.이 부분 역시 동기화라는 키워드와 연결됩니다. 즉 이팩트 함수와 클린업 함수를 통해 subscrib와 unsubscrib가 올바르게 동작하는지 확인하기 위한 처리인 것이죠. 이제 부터 몇 가지 사례를 통해 불필요한 useEffect에 대해 알아보겠습니다. 1. 파생 상태 처리function Form() { co..