[React] 가볍게 살펴보기

이승혜·2021년 8월 18일

REACT

목록 보기

1/4

어떤 라이브러리를 사용하기 전에는 왜 라이브러리가 필요한지, 라이브러리에는 어떤 종류가 있는지, 라이브러리를 어떻게 내 목적에 맞게 사용할 수 있는지에 대해 생각해 보아야 한다.

최근, 예전에 얕게 배웠던 React 지식으로 작은 프로젝트를 만들고 있는데 컴포넌트 계층 구조도 엉망진창, state 관리도 엉망진창이라는 평가를 받았다. 위에서 언급했던 내용을 충분히 생각하지 않고 무작정 들이받은 결과다. React를 사용하는 의미가 전혀 없다는 평가였다.

무작정 부딪혀 봤으니, 이젠 깊이 있게 이해하며 다가갈 필요가 있다고 판단하여 이 글을 쓴다

💡 React?

리액트의 핵심은 재사용 가능한 UI의 생성이다. 재사용 가능한 UI를 컴포넌트화하여 더 복잡한 UI 화면을 구성한다. React는 MVC 애플리케이션(Model View Controller)의 View 레이어이며, React는 또한 state 및 props를 사용하여 데이터 저장 및 처리 방법을 간소화한다.

📝 Virtual DOM

사용자와 인터랙션이 자주 발생하고, 이에 따라 동적으로 UI를 표현해야 한다면 코드 관리가 매우 힘들어진다. 처리해야 할 이벤트도 다양해지고, 관리해야 할 상태 값도 다양해지고, DOM도 다양해지기 때문이다. 다른 Ember, Backbone, AngularJS 등의 프레임워크들은 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어, 업데이트하는 작업을 간소화해준다.

리액트의 경우에는 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라, 모든 것을 날려버리고 처음부터 모든 걸 새로 만들어서 보여주자는 아이디어에서 시작된다.

동적인 UI를 보여주기 위해 모든 걸 다 날리고, 새로 만든다면 속도가 굉장히 느릴 것이다. 하지만 리액트에서는 Virtual DOM 이라는 것을 사용해 이를 가능하게 한다.

Virtual DOM은 말 그대로 가상의 DOM이다. 브라우저에 실제로 보이는 DOM이 아니라, 메모리에 가상으로 존재하는 DOM이다. 리액트는 상태가 업데이트되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링 한다. 실제 브라우저에 보이고 있는 DOM과 비교 후, 차이가 있는 곳을 감지하여 이를 실제 DOM에 패치시켜주는 방식이다.

Virtual DOM이 리액트에서 어떻게 동작할까?

Render() function

Virtual DOM은 콘텐츠를 나열하는 노드 트리이므로, render() 함수가 가장 먼저 진입하는 지점이다. 구성 요소가 변경될 때마다 업데이트되고, render()는 React 요소의 다른 트리 또는 분기로 바뀐다

일괄 업데이트

일괄 처리는 여러 상태 업데이트를 단일 렌더링으로 병합하는 개념이다. 여러 상태 업데이트를 단일 업데이트로 일괄 처리할 수 있고, 다시 렌더링이 한 번 수행되면 React의 성능이 향상되는 것이다. React는 일괄 처리 기능을 제공하여 setState의 변경 사항을 함께 병합할 수 있고, 구성 요소가 한 번만 렌더링 되고 변경 사항을 동시에 가져온다.

일괄 업데이트의 장점

불필요한 재렌더링을 방지하여 성능 제공
상태 변경 사항이 하나로 병합되고 유효 차이가 렌더링 됨

Virtual DOM이 제공하는 5가지 이점

1. 최대 메모리 사용량

가상 DOM 기능을 사용하면 메모리 사용량에서 눈에 띄게 공간을 덜 사용한다. 데이터 모델의 단일 변경을 통해 새로운 가상 UI가 트리거 된다.

2. CPU

스크립팅 레이어를 추가하는 업데이트 방식은 DOM 조작을 투명하게 만든다. 결과적으로 VD는 React를 CPU 집약적으로 만든다.

지식이 부족해 무슨 말인지 제대로 이해하지 못했습니다. 😥 아시는 분 알려주세요!

3. 고성능

React는 처음부터 Virtual DOM 을 생성할 때, setState()를 사용한다. 전체 트리를 구축하는 시간이 단축되어 성능이 향상된다. 실제로 React는 메모리에 1개가 아닌 2개의 VD 트리를 유지하기 때문에 생산성도 크게 향상된다.

4. 간단한 사용

다른 JavaScript 접근 방식보다 훨씬 사용하기 쉽다(사실 React 외에 써보지 않아서 모름)

5. 생산력

데이터를 업데이트하는 방식은 효율성을 높인다. 가상 DOM은 실제 DOM의 UI보다 더 빠르고 쉽게 렌더링 된다

📝 Component

리액트의 핵심은 재사용 가능한 UI의 생성이라고 했다. 모든 UI는 컴포넌트화하여 구성한다. 스스로 상태를 관리하는 캡슐화된 컴포넌트를 통해 복잡한 UI를 만들 수 있다.

간단한 컴포넌트

React 컴포넌트는 render()라는 메서드를 구현하는데, 이것은 데이터를 입력받아 화면에 표시할 내용을 반환하는 역할을 한다. 컴포넌트로 전달된 데이터는 render()안에서 this.props를 통해 접근할 수 있다.

상태를 가지는 컴포넌트

컴포넌트는 this.props를 이용해 입력 데이터를 다루는 것 외에도 내부적인 상태 데이터를 가질 수 있다. 이는 this.state로 접근할 수 있다. 컴포넌트의 상태 데이터가 바뀌면 render()가 다시 호출되어 마크업이 갱신된다.

애플리케이션

props와 state를 사용해서 간단한 ToDo 애플리케이션을 만들 수 있다. state를 사용해 사용자가 입력한 텍스트와 할 일 목록을 관리할 수 있다. 이벤트 핸들러들이 인라인으로 각각 존재하는 것처럼 보이지만, 실제로는 이벤트 위임을 통해 하나로 구현된다.

외부 플러그인을 사용하는 컴포넌트

리액트는 다른 라이브러리나 프레임워크를 함께 활용할 수 있다.

📝 Create-react-app

Facebook은 React 앱을 빌드 하는 데 필요한 모든 것이 미리 구성된 환경인 Create React App을 만들었다. 라이브 개발 서버를 만들고, Webpack을 사용하여 React, JSX 및 ES6를 자동으로 컴파일 한다. 뿐만 아니라 CSS 파일에 자동 접두사를 붙이고, ESLint를 사용하여 코드의 실수를 테스트하고 경고한다.
이를 설정하려면 프로젝트를 시작하려는 한 단계 위 디렉토리에서 다음 코드를 실행하면 된다

$ npx create-react-app react-app
$ (npx create-react-app 생성할 폴더 명)

설치가 완료되면 새로 생성된 디렉토리로 이동하여 프로젝트를 시작하면 된다

$ cd react-app
$ npm start

이 명령을 실행하면 localhost:3000에 새 React 앱과 함께 새 창이 나타난다.

💁‍♀️출처

이승혜

더 높이

다음 포스트