프로젝트를 구현하기에 앞서, 앱을 어떤 설계와 기능으로 구현할지 살펴보는 일이 우선되어야 한다. 이를 소프트웨어 공학에서는 요구사항 분석이라 한다. 요구사항 분석 없이 프로젝트를 구현하면 중간에 코드를 다시 작성하는 일이 발생할 수 있으므로 반드시 거치는 게 좋다.
리액트에서 앱을 구현할 때는 컴포넌트 단위로 생각하는 게 필요하다. 하나의 페이지를 1개의 컴포넌트로 구성해도 문제는 없으나, 하나의 컴포넌트가 여러 기능을 갖게 되면 코드가 복잡해져 프로젝트를 관리하기가 어려워진다. 따라서 컴포넌트는 재사용이 가능한 수준에서 최대한 잘게 쪼개어 개발하는 게 필요하다. 물론 재사용 가능하다는 것도 여러 기준이 있지만, 간단하면서도 명확한 기준을 하나만 정하자면 ‘하나의 컴포넌트는 단 하나의 역할만 수행한다.’ 이다.
요구사항 분석이 끝났다면, 보통 User Interface를 먼저 구현한다. UI는 사용자 인터페이스라는 뜻으로, 웹페이지에서 사용자와 상호작용하는 요소를 말한다. 이 요소들의 사용성을 높이기 위해 기능을 추가하기도 하고, 특별한 형태나 색상 등의 스타일을 적용하기도 한다. 기능 구현에 앞서 UI를 먼저 구현한다고 함은 쉽게 말해 이들 요소의 외적인 것을 먼저 만든다고 이해하면 된다.
UI 구현을 모두 마쳤다면 이 UI 요소들을 움직이게 하는 기능을 구현하면 된다.
가장 간단한 예시로, 카운터 앱의 기능을 구현하면서 고려해야 할 요소 몇 개를 알아본다.
Controller 컴포넌트에 있는 버튼을 클릭하면, Viewer 컴포넌트에 있는 카운트를 증가하거나 감소시킨다고 가정한다. 버튼 클릭 이벤트가 발생했을 때 컴포넌트 값을 동적으로 렌더링하려면 리액트의 State를 사용한다.
State는 반드시 컴포넌트 함수 안에 만들어야 한다. 현재 프로젝트에는 App, Viewer, Controller 컴포넌트 총 3개가 있는데, State는 반드시 App 컴포넌트에서 만들어야 한다.
Controller 컴포넌트에 있는 버튼을 클릭하면, set함수를 호출해야 한다.
부모 - 자식 관계가 아니라면 state값과 set함수를 전달할 방법이 없다. 리액트에서는 컴포넌트가 다른 컴포넌트에 데이터를 전달할 때 props를 사용하는데, props는 부모만이 자식에게 전달할 수 있다.