[Front end] React #4 웹 서비스 만들기 Data flow

리액트에는 2개의 주요 콘셉트가 있다. 하나는 state, 다른 하나는 props이다. 이번 포스팅에서는 props를 다루어 보자.

예를 들면, 여기 영화 리스트가 있다고 가정하자. 이 영화들의 제목을 Movie 컴포넌트에 전달하는 방법을 알아보자.

App.js에서 const를 사용하여 movies 목록을 정의하고 Movie 컴포넌트에 title이라는 데이터를 전달한다. 그다음 Movie.js에서 console.log를 찍어보자. 전달받은 인자로는 props이다. props 오브젝트를 통해 접근하고 데이터를 표출할 수 있다. Movie 컴포넌트에 title이 있고, Movie.js에서 title을 props로 불러온다. Movice 컴포넌트는 title이라는 요소를 가지고 있기 때문이다.

자 이제, 포스터를 붙여보자. 위와 동일한 방법으로 하면 된다.

현재 데이터의 소스는 한군 데이다. 바로 메인 컴포넌트가 데이터를 다 가지고 있는 것이다. 타이틀, 영화 포스터 정보를 메인에 다 담고, 그걸 각각 컴포넌트에 props를 이용해 정보를 전달하여 출력한다. 전체 정보를 갖고 있는 컴포넌트가 각기 다른 컴포넌트에 데이터를 전달함으로써 강력한 UI를 구축할 수 있다.