프론트엔드 정복하기

다음은 컴포넌트를 어떻게 분리해야하는지 알려주는 고전적인 문서다. Presentational and Container Components / 번역본 위 문서에 따르면 컴포넌트는 성격별로 2가지로 나눠볼 수 있다. 프레젠테이션 컴포넌트 컨테이너 컴포넌트 어떻게 보여지는가와 관련 어떻게 동작하는가와 관련 프레젠테이션 컴포넌트, 컨테이너 컴포넌트 모두 자식이 될 수 있다. DOM 마크업이나 스타일 시트를 포함한다. DOM 마크업이나 스타일 시트가 없다. 액션, store 등에 의존적이지 않다. 액션을 호출한다. 데이터 가져오기, 변경 등에 관여하지 않는다. 상태가 자주 변경된다. props를 통해 배타적으로 콜백함수나 데이터를 받는다. 예를 들어 버튼을 만든다고 하자. 버튼의 역할을 아래와 같이 present..

React 공식 홈페이지 - React로 생각하기 1단계 : UI를 [컴포넌트 계층 구조]로 나누기 목업 컴포넌트 분리 먼저, 과 같이 하나의 박스가 있다고 하면, 과 같이 각 영역을 컴포넌트로 분리하는 작업을 해야 한다. 컴포넌트를 분리하는 기술 중 하나는 단일 책임 원칙이다. 하나의 컴포넌트는 '한 가지 일'을 하도록 한다. 위 그림의 예시를 보면, 각 컴포넌트가 의 한 조각을 나타낸다. (1) 노란색 : 전체 포괄 (2) 파란색 : 검색 창 (3) 연두색 : input 값에 따른 데이터 전체 (4) 하늘색 : 각 카테고리의 제목 (5) 빨간색 : 각 카테고리별 제품 이를 계층 구조 로 나타내면 아래와 같다. 예시 전체 검색창 검색 input 값에 따른 데이터 전체 각 카테고리의 제목 각 카테고리별 ..