(1-3) React 기초 - Component

 

컴포넌트로 생각하기

리액트를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다.

 

 

 

모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다.

 

 

한 가지 예시를 들어보겠다. 여러분이 유튜브의 개발자라고 상상해 보고, 컴포넌트 단위로 나눠보자.

 

 

 

상단의 헤더,

 

 

 

화면 중앙의 컨텐츠 리스트. 이렇게 나눈 컴포넌트를 앞서와 같이 다시 트리 구조로 표현해 보자.

 

 

 

먼저 근원이 되는 root 컴포넌트가 있고 그 아래 헤더, 콘텐츠 리스트가 온다. 헤더는 자신의 아래에 서치와 세팅 같은 자식 컴포넌트를, 콘텐츠 리스트는 각각의 영상 콘텐츠들을 자식 컴포넌트로 가질 수 있다. 이러한 트리 구조에서 보듯이 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당하고 있다. 우리는 이렇게 독립적인 컴포넌트들을 여러 개 만들고 이들을 한데 모아 복잡한 UI를 구성할 수도 있고, 더 나아가 최종적으로는 복잡한 애플리케이션도 만들 수 있다.

 

 

 

그동안 HTML, CSS, JavaScript에 대해 공부해 왔다. 이 세 가지를 이용해도 충분히 웹 애플리케이션을 만들 수 있다. HTML로 구조를 만들고 CSS로 스타일을 더하며, JavaScript가 DOM을 조작하여 HTML과 CSS가 만들어낸 구성 요소들을 보다 인터렉티브하게 만들어준다. 하지만 이 3가지로 만족하기에는 조금 아쉬운 점이 있다.

유튜브 예시로 돌아가보자. 여러분은 UI를 개편하고자 기존의 헤더를

 

 

 

화면 왼쪽으로 옮겨 사이드바로 만드려 한다. 헤더를 사이드바로 변경하기 위해 우린 무얼 해야 할까?

 

 

 

먼저 HTML을 수정하여 구조를 바꾸고, 화면의 상단에 맞추어 작성되어있던 스타일 속성을 화면 왼쪽에 맞게 수정해야 한다. 변경된 구조와 스타일에 맞추어 자바스크립트가 DOM을 조작하게끔 수정해주는 것 역시 필요할 것이다.

 

 

 

반면 같은 애플리케이션을 리액트를 이용하여 컴포넌트 기반으로 만들었다고 생각해 보자. 컴포넌트는 각자의 기능을 가지고 있으며, UI의 한 부분을 맡고 있다고 하였다. 때문에 원하는 수정사항에 맞추어 기존 컴포넌트의 위치만 수정해주면 된다. 컴포넌트 기반 개발의 장점을 느낄 수 있는 부분이다.