리액트 다루는 기술 1주차 스터디 정리

📝면접 질문 작성

VirtualDOM과 DOM에 대해 설명하세요

DOM은 객체를 문서구조로 표현한 것으로 XML이나 HTML로 작성됩니다. 이는 트리형태로 특정 노드를 수정, 삭제, 삽입이 가능합니다. 그러나 노드 하나의 변화에 CSS를 그리고, 레이아웃 변경 후 리페인트를 진행하기 때문에 큰 데이터를 가진 동적인 UI에는 취약합니다.

DOM의 성능을 개선하면서 최적의 UX 보장하기 위해 DOM을 추상화한 Virtual DOM이 나오게 되었습니다. 이는 데이터를 업데이트 할때 전체 UI를 Virtual DOM에 리렌더링 한 후 이전 VDOM과 비교하여 바뀐 부분만 실제 DOM에 적용하는 방식입니다.abs

번들러에 대해 설명하세요

모듈들을 하나의 파일로 합쳐 생성합니다. 여기서 모듈은 자바스크립트에 국한되지 않은 웹 애플리케이션을 구성하는 모든 자원을 말합니다. 번들러는 네트워크 요청을 최소화하고 코드 압축을 해줍니다.
자바스크립트의 대표 번들러로는 웹팩이 있습니다. 이는 코드 스플리팅, 트리 쉐이킹 등을 지원해주고 있으며 오랜기간 사용되어 안정성이 높습니다.

1장 리액트 시작

1.1 왜 리액트인가?

1. 리액트 배경

• 애플리케이션 규모가 커지면 뷰에서 수정하려는 요소를 찾아 변경해야 하여 성능이 떨어질 수 있음
• 이로인해 기존 뷰를 날리고 처음부터 새로 렌더링하는 방식을 고안함
• DOM은 느리기 때문에 CPU 점유율이 크고, 새로 렌더링시 끊김 현상이 발생할 수 있음
• 위 방식을 사용하면서 최대한 성능과 UX를 고려하여 개발한 것이 리액트다.

2. 리액트 이해

• 리액트는 자바스크립트 라이브러리로 오직 View만 신경쓰는 라이브러리다.
• 컴포넌트: 재사용이 가능한 API로, 하나의 컴포넌트에는 컴포넌트의 생김새와 작동방식을 정의함.
• 렌더링: 사용자 화면에 뷰를 보여주는 것.

3. 초기 렌더링
   • render() : 컴포넌트가 어떻게 생겼는지 정의. html 형식의 문자열이 아닌 뷰가 어떻게 생겼고 동작하는지에 대한 정보를 지닌 객체 반환.
   • 컴포넌트는 중첩이 가능하고 render 함수를 실행하면 재귀적으로 렌더링한다.
   • 컴포넌트 렌더링 작업이 끝나면 HTML 마크업을 만들고 DOM 요소 안에 주입
   • 컴포넌트를 실제 페이지에 렌더링할 때, 문자열 HTML 코드 생성 $\rightarrow$ 특정 DOM에 내용 주입
   •  
4. 조화 과정(reconciliation), 뷰 업데이트

• 새로운 데이터를 가지고 render()호출 $\rightarrow$ 이전 render()가 만든 컴포넌트 정보와 비교 $\rightarrow$ 뷰를 최소환의 연산 후, 차이를 DOM 트리에 업데이트
• 이 방식은 루트 노드에서 시작해 전체 컴포넌트를 처음부터 다시 렌더링하는 것처럼 보이지만, 사실 최적의 자원을 사용해 수행.

1.2 리액트 특징

1. Virtual DOM

• DOM : Documnet Object Model. 객체를 문서구조로 표현하는 방법으로 XML이나 HTML로 작성
  • DOM은 트리형태로 특정 노드를 찾아 수정, 삭제, 삽입이 가능하다
  • 동적 UI에 취약하다. HTML 자체는 정적이기 때문
  • DOM 자체는 빠르나 DOM에 변화가 일어날 때 시간이 많이 든다
    • CSSOM 그리기 $\rightarrow$ 레이아웃 구성 $\rightarrow$ 리페인트
  • 따라서 DOM을 추상화한 Virtual DOM M을 이용해 DOM 처리 횟수를 최소화 한다.

2. 리액트에서 DOM을 업데이트할 때 절차
   • 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
   • 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
   • 바뀐 부분만 실제 DOM에 적용
3. 오해

• Virtual DOM을 사용한다고 무조건 빠른게 아니다.
• 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축에 리액트가 용이하다.

4. 기타

• 다른 웹 프레임워크가 Ajax, 데이터 모델링, 라우팅 등 기능을 내장하고 있지만 리액트는 오직 뷰만 신경 쓴 라이브러리
• 리액트는 다른 웹 프레임워크나 라이브러리와 혼용 가능. Backbone.js, AngularJS등
  
  

2. JSX

1. 번들러

• import 구문 : 모듈을 불러와 사용할 수 있도록 함. 브라우저에서 제공하지 않지만 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능
• 번들러는 이러한 기능을 사용할 수 있도록 여러 모듈을 합쳐 한 파일로 생성해준다. 또 최적화 과정에서 여러 개의 파일로 분리하기도 한다.
• 웹팩의 로더를 사용해 SVG파일과 CSS파일도 불러와 사용 가능.

2. JSX

• 자바스크립트의 확장 문법. 코드가 번들링되는 과정에서 바벨을 사용해 일반 js코드로 변환됨
• 장점
  • HTML 코드를 작성하는 것과 비슷하여 편리하다
  • 컴포넌트를 HTML 코드 쓰듯이 사용 가능

3. JSX 문법

• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함.
  • Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이뤄져야 하는 규칙이 있기 때문이다
• 자바스크립트 표현식 사용 가능

var는 함수단위 코드영역, let & const는 블록단위

•  
• 자바스크립트 표현식에서 if문 사용이 불가. 대신 조건부 연산자 사용.
  • && 연산자
  • undefined 일 수도 있다면 or 연산자로 값 지정 가능
• 스타일 적용 시 객체 형태로 넣어야 함
• class 대신 className
• 태그 꼭 닫기

4. ESLint와 Prettier 적용

• ESLint는 문법 검사도구, Prettier는 코드 스타일 자동 정리도구
• 저장할 때 자동으로 코드 정리하기
  • VS Code code $\rightarrow$ 기본설정 $\rightarrow$ 설정 $\rightarrow$format on save