Dutch pay 서비스에서 이용할 기술셋 2 (23일차)

<React>

1. React란?

• 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

2. 특징

2-1. 선언형

• 어플리케이션의 각 상태에 따라서 어떤 뷰(view)를 보여주면 될지, 뷰(view)만 설계하면 됨
• 상태가 달라짐에 따라 React가 알아서 필요한 컴포넌트만 업데이트하여 렌더링

2-2. 컴포넌트 기반

• 스스로 상태를 관리하는 캡슐화된 컴포넌트이다.
• 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나눌 수 있다.
• 컴포넌트 간 재사용 및 조합이 가능하다 → 복잡한 UI도 조금 더 쉽게 구현이 가능
• 외부에서 주어지는 인풋인 props와 내부에서만 관리하는 상태인 state로 이루어졌다.

3. 꼭 짚고 가야 할 핵심 개념

3-1. 가상 DOM(virtual DOM)

• 노드 트리를 메모리 상에 로드 해두고, 한 컴포넌트 내 props/state 변화가 있을 때마다, 업데이트 되어야 할 최소한의 컴포넌트를 계산하고, 이를 실제 DOM 트리와 연동하여 렌더링 성능을 향상시키기 위해 탄생
  • 잦은 DOM 트리 조작이 성능 저하의 원인? → 정확히는 DOM 트리 조작 이후에 일어나는 스타일링 계산, 화면에 그림을 그리는 페인팅 절차가 많은 리소스를 소모하기 때문이다.
• DOM 조작이 일어날 때마다 업데이트하는 방식이 아니다.
  • 모든 변화를 하나로 묶어서 실제 DOM 업데이트는 최소한으로~! -> 잦은 DOM 업데이트 연산의 횟수를 줄이고자 하는 것
• React의 가상 DOM은 이 과정을 자동으로 처리해 준다.

3-2. 고차 컴포넌트(HOC, Higher Order Component)

• 컴포넌트 로직을 재사용하기 위한 React의 고급 기술로, 별도의 API가 아니라 React의 디자인적 특성임
• 고차 컴포넌트는 React 컴포넌트를 인풋으로 받아 새로운 컴포넌트를 반환하는 함수
• 횡단 관심사를 분리하는데 사용됨
  • 횡단 관심사(cross-cutting concern)란?
    • 어플리케이션을 계층 구조로 바라 보았을 때, 계층에 관계없이 공통적으로 관심있어할 것들
    • e.g. 로깅, 보안 등

3-3. 제어 컴포넌트(controlled component)

• React와 관계 없이 입력 폼에 관련된 엘리먼트들은 사용자의 입력을 기반으로 독립적으로 state를 관리
  • e.g. input, select, textarea 엘리먼트
• React와 결합할 경우, 관리되는 state의 원천이 여러 곳이 될 수 있음. React state로 모든 컴포넌트를 제어하기 위해, 폼에 발생하는 사용자 입력값 또한 React 컴포넌트 내에서 제어할 수 있도록 하겠다는 개념
• 제어 컴포넌트 = React 컴포넌트에 의해 제어가 되는 입력 폼 엘리먼트

3-4. 컨텍스트(context)

• 컨텍스트는 React 컴포넌트 트리 안에서 전역적으로 사용될 수 있는 데이터를 공유할 수 있도록 고안된 방법
• 컨텍스트를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유할 수 있다.
  • 사용 하면 좋은 예: 테마 (다크모드, 일반 모드 등), 언어, 현재 로그인 한 유저 등
• Context를 생성한 후, Provider를 이용해 루트 트리에 Context를 제공하면, 어느 뎁스에 있는 자식 컴포넌트라도 이 값을 가져다 쓸 수 있다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

* 필수 삽입 링크 : http://bit.ly/3Y34pE0