[간략] 왜 React.js를 사용하는가?

mgm-dev·2021년 2월 22일
0

📚TL;DR

  1. 선언적으로 프로그래밍 하게 해준다.
  1. 프론트엔드 코드에 명확한 구조를 잡아준다.

왜 React.js를 사용하는가요?

&nbsp 대표적인 대답은 다음과 같을 것이다.

  1. mv*를 모두 다루는 다른 프레임 워크보다 view 레이어에 집중 되어있다.
  1. Virtual DOM을 사용해서 퍼포먼스가 높다.
  2. React Native를 통해 빠르게 앱으로 전환 가능하다.

위 세가지 모두 엄청난 장점이다. 하지만 잠시 리액트의 홈페이지에 가보자.

&nbsp 페이스북의 똑똑한 사람들이 리액트를 소개하는 홈페이지 대문에 선언형과 컴포넌트 기반이라고 써놓았다. React Native를 활용하는 앱 개발은 누구도 부정 할 수 없는 보너스이기 때문에 차치하고, 선언형과 컴포넌트 기반에 대해 생각해보자.


선언형 프로그래밍, 빅맥

명령형 프로그래밍 : 컴퓨터 과학에서 명령형 프로그래밍(Imperative programming)은 선언형 프로그래밍과 반대되는 개념으로, -중략- 명령형 프로그램은 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다. 위키피디아

선언형 프로그래밍 : 한 정의에 따르면, 프로그램이 어떤 방법으로 해야 하는지를 나타내기보다 무엇과 같은지를 설명하는 경우에 "선언형"이라고 한다. -중략- 명령형 프로그램은 알고리즘을 명시하고 목표는 명시하지 않는 데 반해 선언형 프로그램은 목표를 명시하고 알고리즘을 명시하지 않는 것이다. 위키피디아

빅맥으로 비유 해보자면. 명령형으로 만든다면 방법은 빅맥송 처럼
참깨빵 위에, 순살 패티 두 장, 특별한 소스 양상추, 치즈 피클 양파까지~
직접 재료의 순서를 명령해서 만드는 것이고.

선언형으로 만든다면
빅맥 하나 주세요~
빅맥이란 음식을 달라고 선언해서 주문을 받는 것이다.

조금 더 프로그래머 처럼 설명하자면 웹페이지를 예로 들 수 있다. HTML 태그를 통해 무엇을 보여주어야 하는지를 선언하면, 브라우저의 절차적 알고리즘이 이것을 화면에 표시 해준다.

리액트 또한 태생적으로 선언적이다.

  1. 렌더링 방법을 명시할 필요가 없다. 렌더링 대상에 대해 코드를 짜면 된다.
  1. HTML과 유사한 JSX를 통해, 컴포넌트 단위로 뷰를 구성한다.

&nbsp 선언적으로 코딩을 함으로, 개발자가 직접적으로 머리에 염두 해야하는 변수/경우의 수를 줄일 수 있다. 한가지 기능을 기깔차게 담당하는 컴포넌트를 만들어 놓았다면, 이후 그 기능에 대해서는 생각할 필요가 없다는 것이다.

&nbsp 선언적으로 잘 짜여진 코드는 읽기도 쉽고(의미론적), 디버깅 하기도 쉬우며(관심사 분리), 변경하기도 쉽다(모듈성). 즉 유지보수가 획기적으로 쉬워진다.


컴포넌트와 React.js

Component : 컴포넌트란 모듈화 되어 있고, 이동/대체 가능하며, 재사용 가능한 기능의 집합이다. 컴포넌트는 기능의 이행을 캡슐화 시켜 인터페이스를 통해서 정보를 주고 받는다.

Component-based software engineering : 기존의 시스템이나 소프트웨어를 구성하는 컴포넌트를 조립해서 하나의 새로운 응용 프로그램을 만드는 소프트웨어 개발방법론이다. 위키피디아

&nbsp 컴포넌트의 정의를 보면 다소 난해할 수 있다. 실제 예를 생각해보자. 당신은 css 속성 중 Flex와 관련된 컴포넌트를 작성하려고 한다. 해당 컴포넌트는 이상적으로 flex에 대한 정보와 기능만을 담당해야한다. 인터페이스 또한 flex와 관련 되어야 한다. FlexContainer는 flex와 관련된 css 속성 만을 prop으로 받고, flex와 관련 된 화면 렌더 만을 담당 해야한다.

&nbsp 컴포넌트를 사용하는 이유는 무엇인가? 재사용성은 너무 당연하다. 오히려 재사용성을 고려하지 않는 것이 특수한 케이스이다. 컴포넌트의 특징이자 장점은, 최소 단위의 기능을 조합해서 새로운 기능을 만들 수 있다는 것이다.

&nbsp 리액트에선 컴포넌트가 제대로 짜여있어야 선언적으로 프로그래밍을 할 수 있다. 컴포넌트 단위로 프론트엔드를 설계 함으로 선언형 프로그램의 장점을 누릴 수 있다. 컴포넌트 단위로 이루어지는 뷰, 트리형식으로 일방향으로 흐르는 데이터 등등, 리액트에는 명확한 설계 방향성이 존재한다.

&nbsp 이러한 방향성을 제대로 이해하고 따름으로서, React.js의 장점을 누리는 자유를 만끽 할 수 있다고 생각한다.

profile
never stop learning

관심 있을 만한 포스트

0개의 댓글

관심 있을 만한 포스트