[RN-03] 컴포넌트 (Component) 이해하기

이전에 소개한 바와 같이, 리액트 네이티브는 JSX라는 자바스크립트 언어 기반의 마크업이 결합된 형태의 언어를 사용한다. 이로 인해 리액트 네이티브 개발 시에는 컴포넌트 패턴(Component Pattern)으로 분류되는 디자인 패턴을 주로 사용하게 된다.

 

컴포넌트 패턴을 이해하기 위해 기존의 모델(Model)-뷰(View)-컨트롤러(Controller)로 대표되는 MVC 패턴과 비교하여 보자면, MVC 패턴은 데이터와 사용자 UI, 그리고 이들을 조작하는 조작부가 각기 분리되어 모듈화 됨으로써 작동하였다. 매우 거칠게 대표적으로 전통적인 웹 개발에서의 사례를 들면, DB-HTML+CSS-JS 와 같은 형태가 이에 해당한다고 할 수 있다.

 

일반적인 MVC 패턴 도식

 

반면 JS를 기반에 둔 리액트 (네이티브)는 태생적으로 뷰와 컨트롤러가 거의 같이 붙어 있게 되는데, 그 자체적으로 이미 컨트롤러의 성격이 강한 JS가 뷰에 해당하는 마크업을 병행하기 때문에 이를 분리하는 것이 오히려 부자연스럽고 비효율적이기 때문이다.

 

즉, 위에서 예로 든 웹의 경우 HTML이나 CSS의 속성은 애초에 문서를 UI 상에 그리는 역할에 그쳤던 만큼 조작에 해당하는 내용을 다른 부분에서 맡는 것이 자연스러웠지만, 태생적으로 컨트롤러 속성을 가진 JS가 뷰에 해당하는 역할까지 맡는 JSX 언어의 경우 굳이 다른 컨트롤러를 추가로 쓰기보다는 뷰와 컨트롤러가 통합되는 것이 더 자연스럽다.

 

이 때문에, JS에 기반을 둔 Vue나 Angular와 같은 다른 프레임워크들도 컴포넌트 기반의 디자인 패턴을 사용하게 되는데, 리액트 (네이티브) 역시 그렇기 때문에 컴포넌트에 대한 이해를 높이는 것이 중요하다.

컴포넌트 디자인 패턴의 단순 도식 (https://www.nextree.io/react-design-pattern/)

 

위의 이미지와 같이, 컴포넌트 디자인 패턴은 기본 컴포넌트(Origin Component)에 해당하는 내용을 잘 조직해놓은 상태에서 이를 import하는 Container가 하달하는 props에 따라 기본 컴포넌트의 속성을 바꾸면서 불러오는 방식으로 UI를 표현한다고 이해하면 쉽다. 예를 들어 Button이라는 컴포넌트를 만든 상태에서 이를 개별 페이지 컴포넌트에서 사용하면서 버튼에 들어갈 문구 등을 props를 통해 정의하는 식인데, 이 부분은 props와 state를 다루는 다음 글에서 좀 더 살펴볼 예정이다.

 

Reference

1. https://www.nextree.io/react-design-pattern/