쥴리의 devlog

1. 리액트의 등장 배경

• 기존의 프레임워크(Angular, Backbone.js, ..., Vue.js)의 특징
  • 주로 MVC, MVVM, MVW 아키텍처로 애플리케이션을 구조화한다.
  • 뷰를 변형(mutate)하며 변경된 사항을 뷰에 반영한다.
  • 단점
    • 애플리케이션 규모가 크면 상당히 복잡해지고 제대로 관리하지 않으면 성능이 떨어질 수 있다.
• 이러한 단점을 보완하는 방법은 없을까?
  • 데이터가 변할 때마다 어떤 변화를 줄지 고민 X → 기존 뷰를 냘려 버리고 처음부터 새로 렌더링
  • 장점
    • 애플리케이션 구조가 매우 간단해지고, 작성해야 할 코드 양도 많이 줄어든다.
  • 근데 이게 가능해?
    • CPU 점유율도 크게 증가하고, DOM은 느리고, 메모리도 많이 사용할 것이고, 새로 렌더링 하면 끊김 현상이 일어나지 않을까?
  • 페이스북 개발 팀에서 앞서 설명한 방식으로 최대한 성능을 아끼고 편한한 사용자 경험을 제공하면서 구현하고자 개발한 것이 바로 리액트이다.

2. 리액트 이해

• 오직 View만 신경 쓰는 라이브러리이다.

2.1. 컴포넌트

• 특정 부분이 어떻게 생길지 정하는 선언체이다.
• 재사용이 가능한 API로 수많은 기능들이 내장되어있다.

2.2. 리렌더링

• 리렌더링은 리액트가 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공하는 비결이다.
• 두 가지 과정으로 구성되어있다.

2.2.1. 초기 렌더링

• 맨 처음 어떻게 보일 지를 정하는 초기 렌더링이 필요하다.
• render 함수
  • 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다.
  • 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.
  • 컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있는데, 이때 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 된다.
• 초기 렌더링 과정
  • 최상위 컴포넌트를 렌더링 → 지니고 있는 정보들을 사용하여 HTML 마크업을 만듦 → 실제 페이지의 DOM 요소 안에 주입

2.2.2. 조화 과정

• 리액트에서 뷰를 업데이트할 때는 "업데이트 과정을 거친다"라고 하기보다는 "조화 과정(reconciliation)을 거친다"라고 하는 것이 정확한 표현이다.
• 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또다시 호출한다.
• 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영 X → 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.
• 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트한다.
• 

3. 리액트의 특징

3.1. Virtual DOM

3.1.1. DOM이란?

• Document Object Model의 약어
• 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.
• 트리 형태로 구성
• DOM은 과연 느릴까?
  • DOM의 치명적인 문제점은 동적 UI에 최적화되어 있지 않다는 것이다.
  • HTML은 정적이지만 자바스크립트를 사용하여 이를 동적으로 만든다.
  • DOM 자체는 빠르다. DOM 자체를 읽고 쓸 때의 성능은 자바스크립트 객체를 처리할 때의 성능과 다르지 않음.
  • 단, DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는 과정에서 시간이 허비되는 것이다.
• 해결법?
  • Virtual DOM
    • DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

3.1.2. Virtual DOM

• 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.
• 리액트에서 데이터가 변하여 DOM을 업데이트하는 과정
  1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
  2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
  3. 바뀐 부분만 실제 DOM에 적용한다.
• 리액트 + Virtual DOM → 업데이트 처리 간결성!

3.2. 기타 특징

• 리액트는 오직 뷰만 담당한다.
• 리액트는 프레임워크가 아니라 라이브러리이다.
• 기타 기능은 직접 구현하거나 라이브러리를 사용해야 한다.
• 리액트는 다른 웹 프레임워크나 라이브러리와 혼용할 수도 있다.

4. 작업 환경 설정

1. Node.js
   • 왜 사용하지?
     • 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용한다.
       • 바벨
         • ES6를 호환시켜준다.
       • 웹팩
         • 모듈화 된 코드를 한 파일로 합치고(번들링) 코드를 수정할 때마다 웹 브라우저를 리로딩 기능 등을 수행한다.
   • nvm 사용한다.
     • Node,js를 여러 버전으로 설치하여 관리해 준다.
2. yarn
   • npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다.
3. create-react-app으로 프로젝트 생성하기
   • yarn create react-app (프로젝트 이름)
   • cd (프로젝트 이름)
   • yarn start

현재 다니고 있는 빅테크 회사에

백앤드 개발 직무로 지원을 했지만

"프론트앤드도 공부를 해봐" 라는 파트장님의 말과 함께

정규직이 되어서는 프론트 개발도 많이 하게 되었습니다. ㅋㅋ

학교 수업에서 HTML, CSS, 순수 Javascript로 홈페이지를 만들어 본 것과

iOS 개발을 조금 해본 것이 다이기 때문에

"과연 프론트앤드 실무 개발을 잘 할 수 있을까..?" 라는 생각이 들었지만

『리액트를 다루는 기술』 책으로 공부해보니 React를 재밌고 나름대로 수월하게 공부할 수 있었습니다.

Javascript는 알지만 React를 처음 공부하시는 분들에게 이 책을 추천드립니다.

이 책이 좋았던 이유는 Hooks, 리덕스에 대해서 잘 설명이 되어있는 것과 이해를 돕는 디테일한 예제가 도움이 되었기 때문입니다.

(광고 아님 xxx)

벌써 이 책으로 공부를 한 지 1년이 되었는데

공부했던 내용을 블로그에 적어보려고 합니다.

http://www.yes24.com/Product/Goods/78233628