react-native-seoul
Published in

react-native-seoul

[React] 리액트를 처음부터 배워보자. —01. React.js란 무엇인가?

이 글을 남기는 계기는 Dan Ambramov의 블로그 Overreacted를 보며 React.js에 대해 더 깊이 공부할 필요성을 느꼈기 때문이다.

React.js를 통해 웹 및 앱(RN)을 개발한 일을 한지 약 6개월이 지났다. 지난 6개월 간 GoF Design Pattern도 익히고, 서버리스 솔루션 Firebase에 대해서도 배우며 개발자로 여러가지를 익히는 시간이 되었다.

하지만, 문득 돌이켜보니 React에 대한 깊은 이해가 부족하다는 것을 깨달았다. “React는 Virtual DOM을 사용한다.”, “Hooks를 쓰면 함수형 컴포넌트에서도 state를 쓸 수 있다.”, “Context API를 쓰면 전역적으로 상태를 관리할 수 있다.” 등의 개념은 알아도 그 동작이 세부적으로 어떻게 이루어지는지 모르는 상태였다.

고민에 대한 해결책으로 React에 대해 다시 차근차근 공부하고, 그 과정에서 얻은 생각들을 글로 정리해보려 한다. 이번 글에서는 React이 무엇인지에 대한 글을 남기고자 한다.

[그림 01] 주말에는 일을 하며 놓치는 본질적인 것에 대해 배우도록 하자.

React.js란 무엇인가?

React는 현재 현업에서 인기 있는 웹/앱(RN)의 View를 개발할 수 있도록 하는 라이브러리이다.

보통 우리가 생각하는 어플리케이션(웹, 앱 혹은 데스크톱용 소프트웨어)을 만들기 위해서는 사용자가 조작하기 위한 UI(User-Interface), UI를 컨트롤 하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지 부분으로 개발이 필요하다.

이렇게 특정 부분을 나누어 개발하는 방법론을 MVC 패턴, MVVM패턴 이라고하며, React.js는 View 즉, 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다.

개발을 처음 공부한다면 MVC 패턴, MVVM패턴 외에 다양한 패턴들을 익히고, 손으로 직접 구현해보길 바란다. 다양한 패턴들이 처음에는 익숙하지 않지만 가끔 어떤 문제를 해결하거나 어떤 개념을 이해할 때 유용한 경우가 있다.

React.js의 특징

React.js를 처음 배우면 React.js의 특징으로 다음과 같은 말을 볼 수 있다.

01. React는 선언형이다.
02. React는 컴포넌트 기반으로 재사용성이 뛰어나다.
03. React는 Virtual DOM(가상돔)기반으로 가볍다.
04. React 컴포넌트는 stateprops 을 가진다.

우리는 여기에서 다음의 키워드를 얻을 수 있다. 선언형(Declarative), 컴포넌트(Component), 재사용성(Reusable), Virtual DOM(가상돔).

내 생각에 React.js의 본질은 위의 키워드로 모두 설명할 수 있다. 각 키워드들에 대해서 알아보자.

01. 선언형 Declarative 이란

소프트웨어 공학에서 자주 접하게 되는 개념은 패러다임(Paradigm)이다. 즉, 프로그래밍을 어떻게 할 것인가 하는 생각에 대한 논의가 활발하게 이루어진다.

이 중 리액트를 하면 자주 접할 수 있는 패러다임이 선언형 Declartive 프로그래밍명령형 Imperative 프로그래밍이다. 이 둘의 차이점에 대한 설명은 좀 더 잘 설명된 글 링크를 남기며, 리액트의 선언적 성격을 보도록 하자.

리액트는 선언형 성격에 맞게 컴포넌트(원하는 결과, 뷰)를 얻기 위해 <tag></tag> jsx 문법을 통해 구현한다. 즉, jsx를 얻기 위한 알고리즘에 대한 구현을 하지 않는다. (예를 들어, document.createElement나 혹은 해당 컴포넌트의 변경사항을 체크하는 알고리즘, 리-렌더링 여부에 대한 알고리즘을 구현하지 않는다.)

이와 같은 선언형 특성은, 리액트를 사용할 때 화면 설계라는 초점에 맞춰서 개발할 수 있도록 해주므로, 다른 부분에 대한 고민을 최소화 해주어 높은 생산성을 보장할 수 있도록 해준다.

02. 컴포넌트 및 재사용성

내가 처음 웹 개발 공부를 시작했을 때(2019년 3월 1일) HTML, CSS, Javascript를 공부하고 웹 사이트를 만들었을 때, 하나의 화면을 구현하는데에 엄청 많은 요소들을 복사, 붙여넣기를 해야하는 문제를 겪었다.

리액트를 쓰는 지금은 컴포넌트(Component)라는 개념을 통해 작성한 HTML, CSS를 간략하게 <Component/> 와 같은 식으로 쓸 수 있다. 리액트를 쓰게되며 가장 편리하다고 느끼는 점이다.

컴포넌트는 구현, 명세화, 패키지화, 그리고 배포될 수 있어야 한다.

컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이다. 리액트는 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다른 화면에서 다시 쓰거나, 다른 프로젝트에서 다시 쓸 수 있도록 하는 장점(높은 재사용성)을 가진다.

03. Virtual DOM(가상돔)

처음에 나는 Virtual DOM이라는 말이 이해가 가지 않았다. <Virtual DOM(버추얼 돔,가상 돔)을 직접 만들어보자>라는 글을 읽고 document.createElement 라는 웹 API를 통해 가상돔에 대해 조금 이해가 되었다.

가상돔을 이해하기 위해서 In-memory의 개념에 대해 알아두면 좋습니다. 웹 브라우저와 자바스크립트를 동작시키기 위한 V8엔진도 소프트웨어입니다. 즉, 이들이 실행되면 메모리(RAM)가 할당이 된다.

가상돔은 이 메모리 단에서 컴포넌트에 대한 정보를 생성하고 비교하여 전체 DOM 트리가 업데이트가 필요한 경우 이를 반영하는 방식을 말한다.

만약, 실제 DOM 트리에서 변화가 바로바로 반영된다면 하나의 동작(입력값 변화, 데이터 변화)마다 전체 DOM트리가 변경되어 브라우저 렌더링 과정(HTML 파싱, 렌더 트리 구축, 렌더 트리 배치, 렌더 트리 그리기 등의 과정)이 매번 일어나서 웹 브라우저의 동작에 많은 리소스가 들어가게 된다.

04. State 와 Props

리액트는 내부적으로 State와 Props를 가진다. 이는, UI(User Interface)가 사용자의 동작(Actions)에 따라 다른 UI나 Action이 필요하기 때문이다.

리액트를 잘 다루기 위해서는 이런 State에 대한 이해가 필요하다. 어떤 컴포넌트를 만들 때, 내부 컴포넌트에 어떤 State가 있을지, 페이지 전체에 어떤 State가 있는지 파악하고 개발을 진행하는 것이 낫다.

해당 부분은 최근에 느끼는 스스로의 한계였다. 페이지 단위에서 State가 복잡하지만 이를 파악하지 않고 바로바로 코딩을 했었다. 이로 인해 새로운 기능이 추가되거나, 변경 사항이 수정될 때 중복되는 구조가 생기고 이로 인해 코드가 복잡해지는 일이 생긴다.

리액트로 UI 개발을 한다면, State와 Props를 어떻게 구성할 것인지를 먼저 파악하고 개발을 하도록 하자.

맺음말

이 글은 최근 디버깅(Debugging) 능력이 한계에 도달한 것 같다고 느끼며, Javascript, HTML, CSS 등 기본에 대한 복습이 필요하다는 생각에 쓰게 되었다. 처음 개발을 시작했을 때 마주했던 개념들이 1년이란 시간이 지나 다시 보니 또 다른 깨달음을 주는 것이 이 글을 쓰는 원동력이 되었다.

항상, 함께 개발하는 개발자 분의 습관을 본 받으려고 노력한다. 모르는 것이 있으면 GitHub에서 코드를 열어보고, 분석하며 새로운 사실을 알아내고, 문제가 발생하면 문제가 발생한 지점에서 생각을 이어나가 디버깅을 한다.

이를, 옆에서 지켜보며 디버깅을 위해서는 가지고 있는 기본 지식이 순서에 맞게(논리적으로) 잘 정리가 되어야하는 것 같다는 생각을 많이한다. 이를 위해 React를 쓰는 것에 멈추지말고 그 개념을 머릿속에 차근차근 정리하는 시간을 가져야겠다.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store