<React 파헤치기-10> 컴포넌트 - 2. 컴포넌트와 구성요소

컴포넌트의 개념

 

기존 웹 구동 방식

정보(Model), 화면(View), 구동(Controller)코드를 분리한 MVC 방식으로 관리되었다. 

 

장점 - 코드를 효율적으로 관리할 수 있다.

단점 - MVC 간 의존성이 높아 재활용이 어렵다(독립성이 떨어져 하나만 수정이 어려움).

 

→ 웹사이트 화면의 각 요소가 비슷하고 반복적으로 사용하는 경우가 많은 것에 착안하여 컴포넌트가 탄생한다.

 

react의 웹 구동 방식

MVC의 View를 독립적으로 구성하여 재사용이 용이하다(기존 컴포넌트를 사용해 새로운 컴포넌트를 만들 수 있다).

 

※컴포넌트의 이름컴포넌트의 이름의 첫 번째는 반드시 대문자로 이루어져야한다. 이는 기존 HTML 마크업과 구분하기 위해서 이다.

 

기존 HTML 마크업 : <div>, <img>컴포넌트 : <MyComponent>, <ContainerComponent>

 

 

컴포넌트의 구성요소

Property상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터 State컴포넌트의 상태를 저장하고 변경할 수 있는 데이터

 

Context부모 컴포넌트에서 생성하여 모든 자식 컴포넌트 전달하는 데이터