리액트 기초이론 0 - 컴포넌트의 개념과 기본적인 동작방식

 

* 컴포넌트 개념 

컴포넌트 사용 예시

컴포넌트는 웹페이지에서 특정한 기능을 담당하는 부분을 그룹핑해서 모듈화시킨 요소이다. 예를 들면, 네비게이션 기능을 담당하는 네비게이션 컴포넌트, 리스트 중 하나의 아이템을 보여주는 아이템 컴포넌트, 상세한 내용을 보여주는 상세 컴포넌트 등이다. 즉, HTML 문서(웹페이지)에서 특정한 기능을 담당하는 HTML 요소들의 그룹이다.  아래는 아이템 컴포넌트의 예시다. 

<div class="item">
	<h3>todo name</h3>
    <p>todo description</p>
</div>

 

* 컴포넌트 사용하는 이유

컴포넌트를 사용하는 이유는 웹페이지에서 공통적으로 사용되는 HTML 요소들을 그룹으로 묶어서 재사용하기 위함이다. 프로그래밍 언어의 함수나 모듈과 유사한 역할을 한다. 또한, 재사용하지 않더라도 웹페이지에서 특정한 기능을 담당한다고 생각되는 부분이 명확히 보일때 따로 떼어내어서 컴포넌트로 만든다. 

 

* 컴포넌트 기본구조와 동작방식

<div id="photo-box">
  <div class="photo">포토1</div>
  <div class="photo">포토2</div>
</div>

사진 리스트를 나열하는 웹페이지를 예로 들어보자. 위 코드는 하나의 사진을 담을 수 있는 아이템 컴포넌트이다. 하나의 컴포넌트에는 기본적으로 데이터(문자열, 숫자 등)와 데이터를 웹화면에서 보여줄 수 있는 HTML 템플릿으로 구성되어 있다. 위 HTML 코드에서 "포토1", "포토2", "photo", "photo-box" 라는 문자열은 모두 데이터이고, 이를 제외한 나머지 요소는 HTML 템플릿이다.

포토 1
포토 2
photo
photo-box

<div id="">
  <div class=""></div>
  <div class=""></div>
</div>

컴포넌트를 데이터와 템플릿으로 분리하면 위와 같다. 

 

리액트 컴포넌트의 기본구조

리액트 컴포넌트의 기본구조를 보면 상단에는 렌더링에 사용할 초기 데이터를 정의하는 부분, 하단에는 데이터를 삽입해서 웹화면에 보여줄 수 있는  HTML 템플릿, 중간에는 사용자 이벤트가 발생한 경우 초기 데이터를 변경하고 변경된 데이터를 이용하여 웹 화면을 업데이트하는 부분으로 구성된다. 

사용자가 웹페이지에 접속하면 리액트는 초기 데이터를 HTML 템플릿에 삽입하고 웹 화면을 그린다. 그런 다음 사용자가 버튼을 클릭하는 등의 이벤트가 발생하면 이벤트 핸들러 함수에서 초기 데이터를 변경한 다음 변경된 데이터를 HTML 템플릿에 삽입하여 웹 화면을 다시 그린다.