프론트엔드 3대장 (Vue, Angular and React) 중 하나라는 리액트를 공부했다. 개발 공부를 하며 공식 문서를 읽는 것은 커피 마시듯 당연한 일상이지만, 리액트처럼 미니멀하게 잘 정리된 내 취향의 공식 문서를 보는 것은 Visual learner 인 나에겐 하루의 쏠쏠한 기쁨이 된다. 매일 마시던 아메리카노에 헤이즐넛 시럽을 한 스푼 탄 느낌? ☕️
🙋🏻♀️ 리액트가 뭐예요?
"A JavaScript library for building user interfaces".
이제까지는 HTML 을 배우고, DOM element 를 직접 조작해서 vanilla JS 로 아무 라이브러리의 도움이 없이 Web app 을 만들어봤다. 여기서는 각자 뚜렷한 담당이 있었다. HTML 은 뼈대를 세우고, CSS 는 스타일링을 담당하며, user interaction 과 관련된 화면의 동적인 변화는 Javascript가 역할 담당을 했다.
리액트는 UI를 구축하는, Component based 의, 선언적인 특징을 가진 자바스크립트 라이브러리다. 공식 문서의 Thinking in React 편에서 "리액트식으로 생각하는 법"은 다음과 같다.
- mock up 에서 각 UI를 컴포넌트 체계로 대체해본다.
- interactivity 를 고려하지 말고, 우선 정적인 화면을 만들어본다.
- 동적 렌더링을 위해, 반드시 state 로 지정되어야 할 데이터들을 가려낸다.
- 그 state 를 어떤 컴포넌트에 담을지 결정하고 동적인 화면을 구축한다.
- 기본적으로 리액트에서 데이터는 한 방향으로만 흐른다. 필요한 부분에 상태끌어올리기를 통해 데이터를 부모 컴포넌트로 올려준다.
UI가 Component 와 잘 매핑될 수 있는 이유는, UI와 우리가 사용하는 데이터 모델이 같은 information architecture 를 따르기 때문이다. 예를 들어서, 어떤 미술 학원에서 수강생들을 각 반 별로 관리하는 앱을 만들고 싶다고 하자. 그럼 우선 크게 생각 해볼때, 필터링을 위해 우선 반을 선택하는 input 란이 있어야 하고 (컴포넌트 1), 필터링에 따라 그 반을 수강 중인 학생들을 보여주는 studentTable 이 있어야 한다 (컴포넌트2). 이렇게 화면을 구성하는 단위 하나 하나가 리액트의 컴포넌트와 매핑되는 것이다.
잘 만들어진 컴포넌트는, 하나의 컴포넌트가 single responsibility, 즉 하나의 중요한 일만 담당하며, jsx 를 반환하여 화면의 구성요소를 작성한다. jsx는 언뜻 HTML 태그와 닮아보이지만, 그 이름에서 짐작할 수 있듯, 자바스크립트의 확장된 언어이다. 리액트를 도입하면서, HTML로 내용을 작성하는 역할이 축소되고, 컴포넌트로 하여금 jsx (javascript XML) 로 직접 화면 구성을 하는 비중이 늘어나게 된다.
🙋🏻♀️ Babel, Webpack 이 뭐예요?
우리가 로컬 환경에서 리액트 앱을 만들어보기 위해 create-react-app 이라는 툴을 사용하는데, 이 때 babel 과 webpack 이 같이 깔리는 것을 본다. 이게 뭘까?
Babel is a JavaScript compiler.
Webpack is a module bundler.
Babel 은 자바스크립트 컴파일러다. 컴파일링이란, 대체적으로 우리가 쓰는 인간 언어에 가까운 high level 언어를 진짜 컴퓨터가 알아듣고 실행할 수 있는 low level 언어로 해석하는 것을 일컫는다. 리액트에서 babel 은 우리가 쓰는 여러 버전의 문법들을 현재, 또는 구형 브라우저들이 알아들을 수 있도록 변환해주는 일을 한다. 대표적으로 jsx 를 일반 자바스크립트 코드로 변환시키는 일을 담당하며, 이 뿐만 아니라, 우리가 리액트에 쓰는 한 줄짜리 async, await 코드 역시 babel 을 거치면 syntactic sugar 가 제거 된 switch case 문법을 가진 코드로 변한다.
Webpack 은 모듈 번들러다. 우리는 절대, 모든 파일을 한 디렉토리에 안에 다 때려박지 않는다. 프로젝트가 커질 수록, components, apis, actions 등 다양한 디렉토리에 모듈화된 js 파일들을 보관하게 되며, webpack 이 감사하게도 이것들을 다 모아서 bundle.js 라는 하나의 파일로 만들어준다. 이 파일은 인간이 보기에 좋을 필요는 없으므로 불필요한 줄바꿈없이 줄줄이 나열되어, 즉 난독화되며 배포하기 좋은 상태로 나타난다.
🤔 리액트를 사용해보며 느낀 점
리액트는 알다시피, 페이스북/인스타그램을 관리하는 페이스북에서 만든 프론트엔드 라이브러리다. 왜 HTML과 JS로 뼈대와 동적 화면구성을 분리하던 기존 방식을 벗어나 jsx로 화면 UI구성에 더욱 직접적으로 개입하는 이 라이브러리가 나오게 되었을까? 리액트가 핫한 이유? 에 대해 생각해보았다.
일단 UI 자체를 컴포넌트로 만든다는 접근이 굉장히 신선하다. 디자인과 데이터 모델이 거의 1:1 로 매핑되어 개발자인 나의 입장에서도 더욱 직관적으로 모듈화를 시도해 볼 수 있다.
그리고 이런 라이브러리 등장의 흐름이 자연스럽다고 생각한다. 이전에는 html 을 화면에 보여주고, 사용자가 클릭하면 새로운 화면을 보여주고, 다른 걸 클릭하면 또 그걸 보여주고, 그렇게 인터넷이 정보를 제공하는 면이 강했고 사용자가 그걸 받아들이는 위치에 있어서, 어떤 절차 방식을 생각해볼 수 있었다면 요즘 유저들이 인터넷을 이용하는 행태는 확연히 다르다.
일단 페이스북과 인스타그램만 봐도 이 플랫폼들은 사실 빈 무대나 다름없다. 그 콘텐츠는 모두 사용자가 입력한 글, 사진 등의 동적인 데이터이며, 당연히 기업의 관심은 그 방대한 량의 데이터 (상태) 관리와, 그걸 사용자와 "실시간" 으로 상호작용하며 UI 에 효과적으로 나타낼 수 있는 방안에 집중되어야 한다.
페이스북, 인스타그램을 모두 이렇게 모듈화 시켜서 관리한다고 하니 그 컴포넌트가 몇 천개인지 가늠할 수 없지만, 모든 컴포넌트들의 기본적인 역할은 데이터를 활용해서 UI를 보여주는 일이다. 그렇다면 또 다른 주축인 데이터/상태 관리를 따로 관리할 라이브러리가 필요해 보인다. 그게 바로 상태 관리 라이브러리 Redux 가 등장한 배경이 되지 않았을까?
💎 리액트 공식문서
