React 개념 정리

개념

React는 메타(페이스북)가 주도하여 개발한 자바스크립트 라이브러리로 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 사용된다. 

 

장점

• React는 방대한 커뮤니티와 자료가 있어 쉽게 접하고 배울 수 있다.
• CRS (Client Side Rendering), SSR (Server Side Rendering) 둘 다 지원한다.
• 가상돔 (Virtual DOM)을 사용하여 어플리케이션의 성능을 향상시킨다.
• Component를 사용하기 때문에 가독성이 높고 재사용에 용이하다.

 

단점

• View 만 담당하기 때문에 Vuew 이외의 기능은 Third Party Library를 사용하거나 직접 구현해야한다.

 

Component 란?

컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 컴포넌트를 쉽게 조립형 PC에 비유할 수 있습니다. 컴퓨터의 부품 하나하나가 컴포넌트이고 교체가 필요할 때 특정 부품만 바꾸게 되도 문제없이 작동한다는 것이 컴포넌트의 개념이다.

즉, 헤더, 메인 콘텐츠, 버튼, 사이드바 메뉴 같은 것들을 각각 하나의 컴포넌트로 묶어서 관리할 수 있습니다. 따라서 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 컴포넌트만 수정하여 사용할 수 있다. 코드의 재사용성과 유지보수성을 증가시켜 준다.

 

내부 작동 원리

React는 실제 DOM을 직접 조작하지 않고, 중간에 가상돔 (VirtureDOM)을 두어 가상돔이 변경될 때, 실제 DOM을 변경하도록 설계하고 이 작업을 재조정 (Reconciliation)이라고 한다.

 

가상돔 VirtureDOM

가상돔은 "DOM (Document Object Model)을 추상화한 가상의 객체"이다. 가상돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술로 DOM 조작에 의한 렌더링의 비효율적인 문제를 개선하기 위해 등장했다.

예전의 경우 DOM이 변경된 것을 인지한 브라우저 엔진은 렌더링을 다시 했다. 

브라우저 렌더링

DOM을 변경하고 변경할 구성 요소가 100개면 위의 과정을 100번을 하는 비효율적인 작업을했다.

이런 문제를 가상돔을 통해 변경 내역을 한 번에 모으고 실제 DOM과 변경된 가상돔의 차이를 판단한 후, 변경된 부분만 찾아 변경하고 그에 따른 렌더링을 한 번만 하는 것으로 해결했다.

 

재조정 (Reconciliation)

리액트는 가상돔 (VirtureDOM)을 사용하기에 기존의 가상돔과 변경사항이 생긴 가상돔의 비교작업이 이루어지는데 이 과정을 Reconciliation(재조정)이라한다.

이를 위해 React는 두 가지 가정에 기반하여 O(n)의 시간에 두 엘리먼트 트리에 대한 비교를 수행할 수 있는 휴리스틱 알고리즘을 구현했다.

• 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
• 개발자가 각 엘리먼트에 key를 명시함으로써, React가 각 엘리먼트를 정확히 분별할 수 있도록 한다.

 

React LifeCycle (생명주기)

React 생명주기는 크게 3가지로 구성된다. Mount → Update → UnMount

• componentDidMount()
  • 렌더링이 완료된 후 호출되는 메서드
• componentDidUpdate()
  • 컴포넌트 업데이트 작업 완료 후 실행되는 메서드
• componentWillUnmount()
  • 컴포넌트가 DOM에서 제거될 때 호출되는 메서드
• render()
  • 가장 기본이면서 가장 중요한 메서드로 컴포넌트를 렌더링할 때 필요한 필수 메서드

 

state를 직접 변경하지 않고 setState를 사용하는 이유

• state는 immutable(불변성)을 유지해야한다.
• 상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링하려면 setState를 사용해야 합니다. 
• setState는 비동기적으로 동작하기 때문에 state가 직접 수정되어 여러번 상태를 업데이트 하는 경우, 이전 업데이트 내용이 다음 업데이트 내용에 덮어 쓰여질 수가 있어 예상치 못한 곳에서 버그가 발생 할 수 있다.

 

React 에서 상태 변화를 아는 방법

React는 상태를 immutable하게 변경하므로 상태 객체의 주소값이 변경되면 상태 변경을 감지할 수 있습니다.

 

React Hooks

React Hooks은 상태 관리가 가능하고 라이프사이클 API를 사용할 수 있는 함수형 컴포넌트이다.

React Hooks의 장점

• 로직의 재사용 가능, 관리가 쉽다.
  • Hooks은 함수형 컴포넌트 이므로 함수 안에서 다른 함수를 호출하는 것으로 새로운 Hooks을 만들어 볼 수 있다. 따라서 리액트의 내장되어있는 Hooks과 다른 사람들이 만든 여러 Custom Hooks을 레고처럼 조립해서 쉽게 만들수 있다.
• 로직을 한 곳으로 모을수 있어서 가독성이 좋다.
• 정적 타입언어로 타입을 정의하기 쉽다.
• 상태 관리 방법을 더 쉽게 설명할 수 있다

 

Props Drilling 이란?

Prop Drilling 은 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.

문제점은 Props가 10개, 15개 같이 더 많은 과정을 거치게 된다면 코드를 읽을 때 해당 prop을 추적하기 힘들어진다.

과도한 Prop Drilling를 피하기 위해서는 전역 상태관리 라이브러리 사용한다.

redux, MobX, recoil 등을 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러서 사용할 수 있습니다.

 

JSX란?

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.

JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하고 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.