React를 사용하는 이유
리액트는 라이브러리이기 때문에 IoC, (Inversion of Control)를 적용해
- 유지보수의 비용을 줄이고,
- 단순한 구현을 통해 코드량을 줄일 수 있다.
또한, 스택오버플로우 질문수나 다운로드 횟수에서 볼 수 있듯 현재 프론트엔드 진영에서 가장 두터운 커뮤니티를 형성하고 있는 라이브러리이다.
React의 특징
선언적 프로그래밍
리액트의 어원은 reactive view update인데, 상태의 변화가 일어나면 자동으로 view를 업데이트한다.
여기서 view를 업데이트할 때, 개발자는 IoC 특징을 활용해 무엇이 보일지만 선언하면 된다.
이것은 명령형 프로그래밍인 바닐라 자바스크립트, 즉 DOM의 한계를 보완해 최종 결과물 위주의 효율적인 개발을 할 수 있다.
대신 절차적인 과정은 리액트가 알아서 해준다!!
Virtual-dom
리액트에서 UI를 업데이트할 때 DOM 요소에 변화를 주기전, 리액트는 내부적으로 가상의 DOM을 이용해 실제 DOM에 일어날 변화를 비교한다.
이러한 과정은 불필요해 보이지만, 만약 이러한 가상돔의 과정이 없다면 어떻게 될까?
사용자와 브라우저 사이에 수많은 상호작용이 오가는 작금의 많은 웹페이지는 많은 요청이 DOM에게 이뤄지고 전체적인 프로세스에 비효율적인 리소스가 발생할 것이다.
그렇기 때문에, 리액트는 이전 UI 상태를 메모리에 유지하는 가상 DOM을 통해 변경될 UI의 최소 집합을 계산해 리소스를 사용을 최소화한다.
변화가 있다면 가상 DOM에 먼저 적용시키고, 최종 결과를 실제 DOM으로 전달한다. 이로써, 웹 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능 저하를 개선할 수 있다.
Component
컴포넌트는 재활용 가능한 UI 구성 단위를 의미한다.
컴포넌트를 활용해 비슷한 UI를 여러 번 재사용이 가능하며, 이는 자바스크립트의 함수와 유사한 개념이다.
컴포넌트는 자바스크립트와 비슷하게 함수형 컴포넌트와 클래스형 컴포넌트로 이뤄진다. 각각 JSX를 반환한다.
클래스형 컴포넌트는 구현부에서 render() 메서드를 호출해야 한다.
React 16.8버전에서Hook기능의 추가로 함수형 컴포넌트에서도 state 및 lifecycle API를 활용할 수 있게 됨에 따라 두 기능 중 함수형 컴포넌트가 더 많이 사용된다.
JavaScript Syntax eXtension
JSX는 리액트에서 사용하는 자바스크립트 확장 문법으로, HTML과 자바스크립트 로직을 하나의 파일 안에서 모두 처리할 수 있다.
대신, 브라우저에서 동작하기 전에 Babel이라는 transcompiler로 일반 자바스크립트 코드로 변환 후 사용 가능하다.
함수나 클래스 내부에 return 키워드 뒤에서 괄호를 활용해 HTML 문법과 유사한 형태로 쓰여진다.
여기서 return 문에는 하나의 태그밖에 반환하지 못하기 때문에 div 태그를 사용하거나 컴포넌트로 HTML 태그를 감싸 하나의 태그를 반환하는 것처럼 할 수 있다.
그 이유로, 가상 DOM에서 컴포넌트 변화를 효율적으로 비교하도록 한 컴포넌트는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
그런데, 최상위를 태그에 특별한 의미나 스타일이 없다면 div로 감싸는 등의 불필요한 요소를 생성할텐데, 이 때 유용하게 사용되는 것이 <React.Fragment>입니다. 심지어 <>라는 축약형으로도 사용 가능하다.
Create-React-App
리액트는 UI 기능만 제공하기 때문에 웹 애플리케이션을 만드는 데 필요한 개발환경을 직접 구축해야 하는 것들이 많다. 이러한 CRA는 이러한 문제를 해결하기 위한 toolchain으로, 리액트 프로젝트를 시작하는 데 필요한 환경을 세팅해준다.
npx create-react-app [프로젝트명]터미널에서 위와 같은 명령어를 통해 CRA를 간편하게 설치할 수 있다.
설치만으로 프로젝트를 진행할 최소 단위의 파일과 폴더들이 설치돼 초심자에게 친절한 라이브러리라고 할 수 있다.
이외에도 NodeJS 런타임 환경에서 가동되는 라이브러리이기 때문에 NodeJS 내 다른 프레임워크나 라이브러리와 호환이 잘 되는 장점도 있다!
본 후기는 유데미-웅진씽크빅 취업 부트캠프 3기 백엔드 과정 학습 일지 리뷰로 작성되었습니다.
유데미 바로가기 / STARTERS 취업 부트캠프 공식 블로그 보러가기
🧷 참고 교재
[길벗]리액트를 다루는 기술 - 김민준
