React란
왜? React를 사용할까?
A JavaScript library for building user interfaces
리액트는 유저 인터페이스 UI를 만들기 위한 JavaScript 라이브러리다.
컴포넌트 구조의 개발
React로 만들어진 어플리케이션은 기본적으로 element라는 화면에 보여질 것을 표현하는 요소로 구성되어 있다.
객체 지향 프로그래밍 언어에는 생성자가 있다. 즉, 객체를 생성하고 초기화하는 역할을 맡은 요소이다. React에는 React element를 생성하는 component가 있다.
component는 props라는 입력을 받고, React element를 만들어낸다. 즉, 함수형 컴포넌트, 클래스형 컴포넌트로도 component를 정의할 수 있다. component는 복잡한 UI단을 추상화해준다. 프로그래밍 패러다임의 복잡한 문제를 쪼개기 위한 개념 같은 존재로, 복잡하고 거대한 UI도 쉽게 설계할 수 있게 해준다.
Virtual DOM을 이용한 빠른 렌더링
UI의 표현을 DOM을 추상화한 가상의 객체로서 메모리에 저장하고 DOM을 동기화하는 프로그래밍 개념.
DOM에 변화가 생기면 렌더링 과정, 즉 렌더 트리를 재생성하고 레이아웃을 만들고 페인팅하는 과정이 반복된다. 복잡한 SPA에서는 DOM조작이 많이 발생해 브라우저 연산이 많아져 전체적인 프로세스가 비효율적이게 된다.
Virtual DOM은 뷰에 변화가 있다면, 가상 DOM에 먼저 적용되고 최종적인 결과를 실제 DOM에 전달한다. 모든 변화를 한 번에 묶어 전달해 딱 한 번만 렌더링 과정을 거친다.
이렇게 브라우저 내에서 발생하는 연산의 양을 줄이며, 성능을 개선시킬 수 있다.
- 데이터가 업데이트되면, 전체적인 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교한다.(최소한의 변경사항만 변경한다.)
- 바뀐 부분만 실제 DOM에 적용된다.
React의 장점
- Virtual DOM을 사용해 빠르다.
- 단순하다. 컴포넌트 구성하는 것이 쉽다.
- 서버 사이드 렌더링 지원이 잘된다.
- 일부 페이지에 큰 수정없이 바로 적용할 수 있다.
- 개발 속도를 빠르게 하고 유지보수를 용이하게 한다.
함수형 컴포넌트
- 코드가 간결해진다.
- 컴포넌트를 정의할 때 화살표 함수를 사용한다. 이때 props를 비구조화 할당을 이용해 받아올 수 있다.
- 리액트 라이프 사이클 매서드를 사용할 때, 클래스형 컴포넌트는 각각의 라이프 사이클 매서드를 따로 작성해야 하는데 함수형 컴포넌트는 useEffect, hook안에서 모두 작성할 수 있다.
클래스형 컴포넌트
- 상태 로직 재사용이 어렵다.
- 코드가 복잡해진다.
- 관련 없는 로직들이 섞여있어 이해하기 힘들다.