[React] Component

리엑트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다.

리엑트는 컴포넌트에 관한 모든 것 입니다.
모든 사용자 인터페이스는 결국 컴포넌트로 구성되었기 때문입니다.

컴포넌트란?

사용자 인터페이스에 있는 재사용 가능한 구성요소입니다.

리엑트에서 컴포넌트 개념을 채택한 이유는 재활용할 수도 있고 구성요소를 분산시킬수 있기 때문입니다. 재사용 가능한 구성 요소가 있으면 반복을 피할 수 있습니다. 구성요소를 분산시킬 수 있으면 코드 베이스를 작고 관리하기 좋게 유지할 수 있습니다.

하나의 큰 파일 안에 모든 사용자 인터페이스에 관한 모든 HTML 코드와 모든 자바스크립트 코드를 넣는 대신에 작게 분산된 단위 컴포넌트들을 갖는다면 각각 컴포넌트들은 할 작업이 명확해질 수 있습니다.

컴포넌트는 어떻게 만드는가?

사용자 인터페이스는 모두 HTML, Css, Js로 만듭니다.
따라서 컴포넌트들도 역시 HTML, Css, Js를 조합해서 만듭니다.

리엑트는 컴포넌트를 만들기 위해 선언형 접근법(Declarative Approach)을 사용합니다.
간단히 말하자면, 리액트를 사용할 때 리엑트가 어떤 특정한 HTML 요소를 만들거나 그걸 사용자 인터페이스의 특정한 장소에 삽입하라는 지시를 하지 않는다는 것 입니다.

리엑트를 사용할때 우리는 항상 원하는 최종 상태를 정의하게 됩니다.
최종 상태는 목표 상태, 또는 다양한 조건에 따른 다양한 목표 상태가 될 수 있습니다.
리엑트는 실제 웹 페이지에서 어떤 요소가 추가, 삭제, 업데이트 되어야 하는지 알아냅니다.