컴포넌트 계층 정의

가장 먼저 인터페이스를 중첩된 컴포넌트로 분할하는 방법을 이해해야 한다.

여기에는 3가지 고려사항이 있다.

1. 컴포넌트는 단일 관심사를 가져야 하며 작아야 한다 .즉, 컴포넌트는 한 가지 일만 해야 한다. 컴포넌트가 더 성장하는 경우 작은 하위 컴포넌트로 분할 해야 한다.

2. 프로젝트의 와이어프레임과 레이아웃을 분석하면 컴포넌트 계층에 대한 많은 힌트를 얻을 수 있다.

3. 데이터 모델에 주목한다. 인터페이스와 데이터 모델은 동일한 정보 아키텍쳐를 따르는 예가 많기 때문에 UI를 컴포넌트로 분리하는 작업도 아주 쉽게 해결되는 경우가 많다. 즉, 데이터 모델의 한 조각을 나타내는 컴포넌트로 분리할 수 있다.

속성의 중요성

Property은 컴포넌트 조합에서 가장 중요한 역할을 한다. 속성은 리액트의 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 매커니즘이다. 속성은 자식 컴포넌트 안에서 변경할 수 없으며 부모 컴포넌트가 전달하고 “소유”한다.

컴포넌트 만들기.

인터페이스 계층을 이해가고 나서 컴포넌트 만들기를 시작할 차례이다. 이때 하향식과 상향식의 두 가지 기본적인 접근법이 있다. 즉, 계층 위쪽에 있는 컴포넌트를 먼저 만들거나 아래쪽에 있는 컴포넌트를 먼저 만들 수 있다.

여기서는 하위 컴포넌트로 전달되는 방법과 자식 컴포넌트에서 이용되는 방법을 이해하는데 도움이 되도록 하향식으로 칸반 컴포넌트를 만든다.

또한 프로젝트의 체계를 유지하고 새로운 기능을 추가하거나 유지 관리하는 데 도움이 되도록 각 컴포넌트를 별도의 자바스크립트 파일로 만든다.

상태소개

지금까지 살펴본 속성은 컴포넌트로 전달되며 변경불가였다. 즉, 정적 컴포넌트를 위한 것이였다. 컴포넌트가 동작과 상호작용을 수행할 수 있으려면 현재 상태를 나태는 쓰기 가능데이터가 필요하다. 리액트의 컴포넌트는 this.state안에 여러 데이터를 가질 수 있다. this.state는 특정 컴포넌트 전용이며, this.setState()를 호출해 변경 할 수 있다.

여기서 리액트 컴포넌트의 중요한 측면을 볼 수 있다. 상태가 업데이트되면 컴포넌트의 반응형 렌더링이 트리거되고 해당 컴포넌트와 그 자식이 다시 렌더링된다. 앞에서 언급했듯이 리액트는 가상 DOM을 이용하므로 이 작업은 아주 빠르게 수행된다.

칸반 앱: 토글되는 카드

컴포넌트의 상태를 이용해 칸반앱에 새로운 기능을 추가해보자. 즉 카드를 토글 가능하게 만들어 사용자가 카드 세부 사항을 표시하거나 숨길 수 있게 만들어보자.

언제든지 새로운 상태를 설정할 수 있지만 컴포넌트가 초기 상태를 갖게 하려면 클래스 생성자에서 상태를 설정해야 한다. Card컴포넌트에는 아직 생성자가 없고 render 메서드 하나만 있다. showDetails라는 새로운 키를 컴포넌트의 상태로 정의하는 생성자 함수를 추가해보자.

kanban1 의 완성본을 통해 props를 제대로 이해하기 (완료)

주요 장점으로는 애플리케이션의 사용자 인터페이스를 선언식으로 구성할 수 있다는 점이다. 또한 첫 번째 컴포넌트를 작성하고 리액트 컴포넌트의 모든 기본 개념(render 메서드, JSX, 속성, 상태)을 알아봤다.