[React/Component]React 컴포넌트란?

리액트의 컴포넌트 개념은 리액트의 꽃이라 불릴 정도로 매우 중요한 요소 입니다. 리액트로 작성된 화면은 컴포넌트만으로 구성이 됩니다.

기존 웹 프레임워크의 구조

기존의 웹 프레임워크는 MVC방식으로 관리 되었습니다. 각각 정보, 화면, 구동 코드를 의미 하며 정보를 모델(Model), 화면을 뷰(View), 구동을 컨트롤러(Conroller)라고 해서 MVC라고 이름이 붙여졌습니다. 장점으로 코드 관리가 효율적이라는 점을 꼽을 수 있지만 MVC 각 요소의 의존성이 높아서 재활용하기 어렵다는 점이 단점으로 꼽혔습니다.

컴포넌트란?

현재 많은 웹사이트의 화면은 각 요소가 비슷하고 반복적으로 사용한 경우가 많습니다. 예를 들어 youtube에 들어가 보면 동영상을 볼 수 있게 컨텐츠를 나열해 놓는데 이 각각을 컴포넌트라고 할 수 있습니다. 밑에 사진의 빨강색 박스 안에는 6개의 컴포넌트로 구성되어 있다고 볼 수 있는 것입니다.

컴포넌트는 MVC의 View(뷰)를 독립적으로 구성하여 재사용 할 수도 있고 컴포넌트로 새로운 다른 컴포넌트를 만들 수도 있습니다.