리액트는 UI를 만들기 위한 자바스크립트 라이브러리이다. (공홈피셜) 사용자와의 인터랙션이 많은 대규모 웹 애플리케이션의 UI를 쉽게 만들기 위해서 리액트를 비롯한 여러 라이브러리와 프레임워크가 만들어졌다.
리액트의 특징
컴포넌트 기반
컴포넌트는 UI를 구성하는 개별적인 뷰 단위이다. 전체 앱은 각 컴포넌트를 결합하여 만들어진다. 컴포넌트 단위로 코드를 작성하면 캡슐화(테스트 용이), 확장성, 재사용성 등의 이점이 있고 유지 보수가 쉽다.
단방향 데이터 흐름
MVC 패턴을 따르는 여타 프레임워크와 달리, 리액트는 단방향 데이터 흐름을 가진다. 양방향 데이터 흐름은 규모가 커질 수록 데이터 흐름을 추적하기가 어려워진다. 리액트는 데이터가 변경되었을 때 View를 변화시키지 않고 새로 만드는 단순한 방식을 사용하며, 이 방식에 따른 성능상 문제점을 아래의 virtual DOM으로 해결한다.
virtual DOM
DOM 조작에는 렌더 트리를 재생성, 각 요소 스타일 연산, 레이아웃, 리페인팅 과정이 따른다. virtual DOM 사용을 통해 DOM 조작 회수를 줄임으로써 성능을 개선할 수 있다.
리액트에게 원하는 UI의 상태를 알려주면(선언적) DOM이 그 상태와 일치하도록 한다. 업데이트한 UI를 virtual DOM에 리렌더링하고 실제 DOM과 비교하여 바뀐 부분만 실제 DOM에 적용하는 방식이다. DOM 조작을 줄이는 것 자체는 virtual DOM을 사용하지 않고도 달성할 수 있지만, 리액트는 이 과정을 자동화, 추상화하여 제공하기 위해 virtual DOM을 이용한다.
** 추가: 실제 DOM과 비교하여 바뀐 부분을 적용하기 위해서는 필연적으로 UI 각 요소를 비교하는 작업을 해야 하는 오버헤드가 발생하는데, 이것이 virtual DOM의 단점이라 할 수 있다.
=> 리액트는 규모가 크고 사용자와 인터랙션이 많으면서도 비교적 빠르게 동작하는 웹 애플리케이션(페이스북과 같은!)을 만들고 유지 보수할 때 장점이 가장 잘 드러나는 라이브러리이다.
함수 컴포넌트, 클래스 컴포넌트
공식문서에 따르면 클래스 컴포넌트를 제거할 것은 아니지만, 함수 컴포넌트의 사용을 권장한다.
함수 컴포넌트
- 클래스형보다 선언하기 쉽다
- 클래스형보다 메모리 자원을 덜 사용한다
- state, 라이프사이클 API 대신 Hooks(useState, useEffect 등)를 사용한다
- 컴포넌트 자체가 함수이기 때문에 컴포넌트 간 공통 로직 관리가 간편하다 (Hooks로 컴포넌트 로직을 뽑아내어 재사용)
클래스 컴포넌트
- render()가 필수적이다. 화면에 출력할 내용을 생성하여 반환하는 함수로서 부수 효과를 발생시켜서는 안 된다
- React Component를 상속해야 한다
- stateful하다. 로직과 상태를 컴포넌트 내에서 구현하여 함수 컴포넌트 대비 복잡한 UI 로직을 가진다
- 생명주기 메소드에 관련 없는 로직이 섞이기 쉽다
- 공통 로직을 관리하기 위해 고차 컴포넌트 패턴 등이 따로 필요하다
Hooks
useEffect
컴포넌트가 렌더링(마운트 및 업데이트)되면 useEffect가 수행된다. 개발자가 지정한 effect 함수를 호출하는 것이다. 컴포넌트 내부에 선언되므로 state와 prop에 접근할 수 있다.
기본적으로 모든 렌더링 후에 effect를 적용하기 때문에 두번째 인수로 의존성 배열을 넘겨 해당 값이 변경될 때에만 effect를 적용하도록 한다
