[React] 2) Component(컴포넌트) 사용방법

이제 리액트를 이용한 레이아웃 구성을 위해 필요한 Component(컴포넌트)에 대해서 알아보자.

 

 

# Component

직역하자면 '구성요소' 라는 뜻을 가지고 있고, 우리가 흔하게 볼 수 있는 웹페이지들도 이러한 '구성요소'가 1개 이상으로 이루어져있다.

 

 

 

 위 그림 같은 경우에도 [ Header ], [ Main ], [ Footer ] 라는 컴포넌트로 이루어진 웹페이지며, 이런 구조를 흔하게 다른 사이트에서도 볼 수 있을 것이다.

( 또한, 위 세개의 컴포넌트를 또 감싸고 있는 또 다른 컴포넌트를 정의해서 사용할 수도 있을 것이다. )

 

그리고 [ Header ] 라는 컴포넌트 안에  로그인, 검색 이라는 기능을 있듯이, 각 컴포넌트 별로 사용자와 인터랙션이 가능한 기능들을 정의할 수도 있다.

 

즉, 각 컴포넌트들은 독립적인 기능을 지는 하나의 '소프트웨어' 로 취급할 수 있고, 이를 '모듈' 이라는 개념으로 설명할 수 있다.

그래서 이러한 '모듈' 단위의 개발은 재사용성과, 유지보수에 강한 장점을 지니고 있다.

 

실제 리액트의 각 컴포넌트들도 모듈처럼 import 와 export 를 통해 서로 간의 관계를 정의한다.  

 

 

( * 이전에 웹팩의 정의 관련 글을 쓸때 설명한 모듈화 프로그래밍 특징 )

https://humanwater.tistory.com/1

[webpack] 1) 웹팩의 정의, 모듈(Module)

 

 

그래서 리액트는 이러한 컴포넌트들의 결합을 기반으로 개발을 하는데, 이를 CBD(Component Based Development) 방식의 개발이라고 한다. 

https://ko.wikipedia.org/wiki/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8_%EA%B8%B0%EB%B0%98_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EA%B3%B5%ED%95%99

컴포넌트 기반 소프트웨어 공학 - 위키백과, 우리 모두의 백과사전

 

 

그러면 실제 코드로는 어떻게 작성해야되는 지, [ App ] <--- [ Header ], [ Footer ] 구조로 예를 들어보겠다.

( => App.js 컴포넌트 내부에 Header.js 와 Footer.js 를 결합)

 

* 디렉토리 구조

( * 프로젝트 환경 세팅은 아래 글 참고 )

https://humanwater.tistory.com/13

[ Project ] WMV Blog - Front 개발 환경 설정.

 

 

위와 같이 component 디렉토리 내부에 [ App.js ], [ Footer.js ], [ Header.js ] 세 개의 컴포넌트 파일을 생성한다. 

 

그리고 Header.js 와 Footer.js를 아래와 같이 작성하자.

 

 

*  . /component/Header.js 

 

 

*  . /component/Footer.js

 

 

 

마지막으로 위의 두 컴포넌트 파일(Header.js  Footer.js)를 포함시킬 App 컴포넌트를 아래와 같이 만든다.

 

*  . /component/App.js

 

 

* 결과 화면.