문서의 앞부분에서도 잠깐씩 컴포넌트에 대한 내용이 나왔었습니다. 그럼 과연 리액트의 컴포넌트는 무엇인지 자세하게 알아보도록 하겠습니다. 우리가 리액트의 특징에 대해서 배울 때 컴포넌트 기반(Component-Based) 이라는 중요한 특징이 나오게 됩니다. 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러개의 컴포넌트들의 조합으로 구성될 수 있습니다. 그리고 이러한 컴포넌트들을 마치 레고 블록을 조립하듯이 끼워 맞춰서 새로운 컴포넌트를 만들 수 있는 것이죠. 여기서 잠깐 앞에 나왔던 그림을 다시 한 번 보도록 하겠습니다.

위 그림은 에어비앤비(Airbnb) 웹사이트 화면을 캡처한 뒤에 컴포넌트를 표시한 것입니다. 여기서 A로 표시된 부분과 B로 표시된 부분이 리액트 컴포넌트라고 볼 수 있습니다. 그리고 이러한 컴포넌트를 여러번 반복적으로 사용해서 하나의 페이지를 구성하고 있습니다. 이처럼 우리가 리액트를 컴포넌트 기반이라고 부르는 것은 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 또 이러한 컴포넌트들이 모여서 전체 페이지를 구성하기 때문입니다. 그리고 이렇게 하나의 컴포넌트가 반복적으로 사용된다는 것은 전체 코드의 양이 줄어 든다는 것이고, 결국 개발시간도 줄어들게 되며 유지보수에 드는 비용도 줄어드는 굉장히 큰 장점이 있습니다.

리액트 컴포넌트는 개념적으로는 자바스크립트의 함수와 비슷합니다. 함수가 입력을 받아서 출력을 내뱉는 것처럼, 리액트 컴포넌트도 입력을 받아서 정해진 출력을 내뱉습니다. 그래서 리액트 컴포넌트를 그냥 하나의 함수라고 생각하면 조금 쉽게 개념을 이해할 수 있습니다. 하지만 리액트 컴포넌트의 입력과 출력은 일반적인 자바스크립트 함수와 조금은 다릅니다. 아래 그림을 한 번 보도록 하겠습니다.

위 그림처럼 리액트 컴포넌트에서의 입력은 우리가 바로 뒤에서 배우게 될 props라는 것이고, 출력은 우리가 앞서 배운 리액트 element가 됩니다. 결국 리액트 컴포넌트가 해주는 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 element를 생성해서 리턴해주는 것입니다. 앞에서 리액트 element는 리액트 앱을 구성하는 가장 작은 빌딩 블록들이라고 배웠습니다. 그리고 자바스크립트 객체형태로 존재하며, 화면에 보이는 것들을 기술한다는 것도 배웠죠. 리액트 컴포넌트는 우리가 만들고자 하는대로 속성들(props)을 넣으면, 해당 속성들에 맞춰서 화면에 나타날 element를 만들어 주는 것입니다. 이는 마치 붕어빵을 굽는 과정과 비슷한데요, 아래 그림을 한 번 보도록 하겠습니다.

우리가 붕어빵 가게에 가보면 붕어빵 기계가 있죠. 붕어빵 기계에는 붕어 모양의 틀이 여러개 있고, 거기에 반죽을 부어서 붕어빵을 만듭니다. 이 과정은 리액트 컴포넌트로부터 element가 만들어 지는 과정과 비슷하다고 볼 수 있습니다. 여기서 리액트 컴포넌트는 붕어빵틀을 의미하고, 각 붕어빵들은 리액트 element를 의미한다고 볼 수 있습니다.

소프트웨어 공학에서 나오는 '객체지향'이라는 개념에 대해서 알고 계신분들은 이미 눈치채셨을 수도 있지만, 이 과정은 객체지향 개념에서 나오는 클래스와 인스턴스의 개념과 비슷합니다. 클래스라는 붕어빵 틀에서 인스턴스라는 실제 붕어빵이 만들어져서 나오니까요. 리액트의 컴포넌트는 객체지향까지는 아니지만 비슷한 개념을 갖고 있다고 이해하면 됩니다. 붕어빵틀만 있으면 계속해서 붕어빵을 만들어낼 수 있는거죠.

자, 이제 컴포넌트의 개념에 대해서 배웠으니, 다음으로 리액트 컴포넌트에 입력으로 들어가는 props가 도대체 무엇인지 한 번 알아볼까요?