React에서는 어떻게 관심사를 분리할 수 있을까요? 사람마다 관심사를 분리하는 방법은 다르겠지만, 관심사의 분리가 무엇인지는 뜻이 통할 것이라고 생각합니다. 오늘은 제가 고민하고 개선해나간 과정과, 그 결과를 공유해보려고 합니다. UI 와 로직 분리하기 현재 제가 재직 중인 회사에서는 Presenter Container 패턴을 사용 중에 있습니다. 고로 UI 와 로직이 분리되었죠. 그에 따른 예시는 다음과 같습니다. 컨테이너가 프리젠터 컴포넌트를 감싸고 있고, 컨테이너에선 로직을 담당하고 프리젠터가 UI 를 그려줍니다. 문제점 Presenter Container 를 쓰다보니, 이 사이에 Props가 많아지게 되었습니다. 당연히 관련 로직도 많고 많아지면 많아질 수록 코드 리딩 및 추적이 어려워지게 되었..

우리는 공식문서에서부터 list를 렌더링 시킬 경우 key를 명시하라고 배웁니다. 근데 왜??? 어째서??? key를 명시해야할까요? Key Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. - React 공식문서 - 우리는 공식문서에서 Key에 대한 설명을 찾을 수 있습니다. 그렇다면, React는 어떠한 이유로 Key를 사용할까요?? 재조정 (Reconciliation) React는 DOM Node의 자식들을 재귀적으로 처리할 때, 기본적으로 동시에 전, 후 리스트를 순회하고 차이점이 있다면 변경을 생성합니다. 자식의 끝에 Element를 추가하는 경우 예를 들어 자식의 끝..