이제 Component 계층구조가 만들어졌으니 앱을 실제로 구현해볼 시간입니다.

가장 쉬운 방법은 데이터 모델을 가지고 UI를 렌더링은 되지만 아무 동작도 없는 버전을 만들어보는 것입니다.

⚠️ 이처럼 과정을 나누는 것이 정적 버전을 만드는 것은 생각은 적게 필요하지만 타이핑은 많이 필요로 하고, 상호작용을 만드는 것은 생각은 많이 해야 하지만 타이핑은 적게 필요로 하기 때문입니다. 나중에 보다 자세히 살펴봅시다.

• 데이터 모델을 렌더링하는 앱의 정적 버전을 만들기 위해 다른 Component 를 재사용하는 Component를 만들고 props를 이용해 데이터를 전달해줍니다.

  props는 부모가 자식에게 데이터를 넘겨 줄 때 사용할 수 있는 방법입니다.

• 정적 버전을 만들기 위해 state를 사용하지 마세요.

  state는 오직 상호작용을 위해, 즉 시간이 지남에 다라 데이터가 바뀌는 것에 사용합니다.

  우리는 앱의 정적 버전을 만들고 있기 때문에 지금은 필요하지 않습니다.

• 앱을 만들 때 하향식(top-down) 이나 상향식(bottom-up)으로 만들 수 있습니다. 다시 말해 계층 구조의 상층부에 있는 Component 부터 만들거나 하층부에 있는 Component부터 만들 수도 있습니다.

  간단한 예시에서는 보통 하향식으로 만드는 게 쉽지만 프로젝트가 커지면 상향식으로 만들고 테스트를 작성하면서 개발하기가 더 쉽습니다.

• 이 단계가 끝나면 데이터 렌더링을 위해 만들어진 재사용 가능한 Component들의 라이브러리를 가지게 됩니다. 현재는 앱의 정적 버전이기 때문에 Component는 render() 메서드만 가지고 있을 것입니다. 계층구조의 최상단 Component 는 prop으로 데이터 모델을 받습니다. 데이터 모델이 변경되면 ReactDOM.render()를 다시 호출해서 UI가 업데이트 됩니다.

• UI가 어떻게 업데이트되고 어디에서 변경해야하는지 알 수 있습니다. React의 단방향 데이터 흐름(one-way data flow) 또는 단방향 바인딩(one-way-binding) 는 모든 것을 모듈화 하고 빠르게 만들어줍니다.