리액트 컴포넌트 (3)

그럼 이제 컴포넌트를 실제적으로 활용하기 위해 알아가보자!

 

지금까지 만들어둔 Post 컴포넌트는 출력할때 두 가지중 하나만 출력하는데 실제로 사용할땐 데이터베이스에서 가져와 컴포넌트를 재사용하게 된다면 매번 다른 내용을 출력해야할 것이다.

 

각각의 컴포넌트가 독립적으로 동작하거나 보여지도록 만들기 위해서는 컴포넌트에 데이터를 전달할 수 있어야 한다. 이때 사용하는 것이 props이다.

PostsList.jsx

 

Post.jsx

동시에 PostsList라는 새로운 컴포넌트를 하나 생성했다.

지금 생성한 컴포넌트들의 연결성은 어떻게 되냐하면

 

PostsList라는 컴포넌트를 만들어 목록으로 뿌리고 

그 목록에 Post의 내용이 나오게 생성하였다.

 

 

 

다른 것을 다 제쳐두고 딱 두 가지만 여기서 생각하기로 하자.

 

1. props 는 여러 곳에서 재사용하는데 각각 다른 값을 표시해야한다면 사용한다!

2. 리액트 어플리케이션은 다른 컴포넌트 여러 개를 조합(구성 단위를 조합)해서 최종 UI를 만드는 것이다.

App.jsx

 

 

결국 Post라는 컴포넌트를 PostsList 컴포넌트에서 이용했고

App 컴포넌트에서 그 PostsList 컴포넌트를 받고, main.jsx에서 App 컴포넌트를 출력한다.

 

리액트는 이런식으로 UI를 만드는 것이다.