React 란 ?
페이스북에서 개발한 자바스크립트 라이브러리이며, 프론트엔드 개발에서 가장 많이 채택되고 있다.
프레임워크인 Vue, Angular 와 달리 라이브러리 이므로 확장성이 좋고
SPA(Single Page Application) 방식으로 동작하기 때문에 높은 사용자 경험을 제공한다.
❗️프레임워크 & 라이브러리
1. 프레임워크
애플리케이션의 흐름과 제어를 관리하며 개발에 필요한 기능을 제공해 준다.
개발자는 프레임워크의 규칙과 인터페이스에 따라 코드를 작성해야 한다.
2. 라이브러리
개발을 위해 재사용 가능한 코드의 집합이며, 특정 기능을 수행하는 함수, 클래스, 모듈 등으로 구성된다. 개발자가 코드의 흐름과 제어를 직접 관리하며 필요한 기능을 호출하여 사용할 수 있다.
즉, 프레임 워크인 Vue, Angular는 애플리케이션 개발의 전체적인 구조와 규칙을 제공하기 때문에 개발자는 제한된 환경에서 개발을 해야 한다.
반면, 리액트는 애플리케이션의 전체 구조나 아키텍처를 결정하지 않으며, 사용자 인터페이스(UI) 개발에 초점을 맞춘 라이브러리 이다.
‼️ SPA (Single Page Application)
어플리케이션을 구성하는 다양한 페이지를 하나의 페이지인 것처럼 처리하는 기술
최초 진입 시, 전체 화면 정보를 로드하고 사용자 인터렉션에 따라필요한 부분만 비동기로 로딩하는 방식
예를들어, Header 와 Navigator 같이 화면마다 고정되는 영역은 로딩하지 않고 Contents 부분만 로딩한다.
☝🏻 필요한 리소스만 부분 로딩하기 때문에 빠르고 서버 부담이 적다.
✌🏻 화면 전환 시 깜빡임 없이 부드럽게 이동한다.
주요 특징 💡
1. 컴포넌트 기반 아키텍처
웹 어플리케이션의 복잡한 UI를 재사용 가능한 단위로 분할하는 방식을 말한다.
각각의 컴포넌트는 자체적으로 상태와 속성을 가지고 있으며 독립적으로 존재한다.
이는 UI를 계층적으로 구조화하여 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있다.
컴포넌트 개발 시, 구성요소 간의 의존성을 최소화 시켜야 복잡도가 낮고 재사용성을 높일 수 있는 장점이 있다. 😀
2. 가상(Virtual) DOM
기존 렌더링의 경우, 화면에 변화가 생기면 모든 요소의 스타일을 다시 계산해 새로 그려주었는데
리액트는 가상DOM을 사용해 변경된 부분만 실제DOM에 그려주기 때문에 효율적이다. ✨
React 렌더링 과정
☝🏻 업데이트가 발생하면, 변경된 화면 정보가 담긴 가상돔(Next VDOM)을 생성 한다.
✌🏻 업데이트 이전의 내용을 담고있는 가상돔(Prev VDOM)과 비교 과정을 통해 업데이트가 필요한 Element를 파악한다. (Diffing 과정)
🤟🏻 이 Element 들만 실제 돔(Actual DOM)에 업데이트 시킨다(Reconcil 과정)
❗️ 리액트 렌더링이 효과적인 이유는, 변경된 Element 들만 집단화 시켜 딱 한번만 실제 돔에 반영하기 때문이다.
자세한 렌더링 과정은 React 렌더링 프로세스를 참고❗️
3. JSX 기반 문법 사용
React는 UI를 컴포넌트 단위로 구성하게 되는데, JSX 문법을 사용해 함수형 컴포넌트를 HTML 처럼 표현할 수 있도록 도와준다.
❗️ JSX(JavaScript XML)
React에서 컴포넌트를 만들 때 사용하는 JavaScript 확장 문법이다.
JavaScript 코드 안에 HTML 태그처럼 보이는 문법을 작성할 수 있으며, 더 직관적이고 선언적으로 표현할 수 있다.Example
function welcome(props){ return <h1>Hello, {props.name}! </h1> }
4. React Hook 제공
리액트 훅은 컴포넌트 내에서 다양한 기능을 사용할 수 있게 해주는 일정의 함수 API 이다.
이를 통해 로직을 간결하게 만들 수 있고 컴포넌트간 상태를 공유 하거나 불필요한 리렌더링을 방지해 최적화 시킬 수 있다.
대표적인 React Hook
useState: 컴포넌트 안에서 상태(State)를 관리해 준다.useEffect: 컴포넌트가 리렌더링 되거나 특정 변수가 업데이트 될 때마다 특정 작업을 수행하도록 설정할 수 있다.useRef: 기존의 getElementById 와 같이 Dom Element에 접근할 수 있다.useMemo: 연산이 오래 걸리는 함수의 호출 결과를 캐싱하고, 동일한 param 이 입력되면 캐시 데이터를 반환한다.
5.풍부한 생태계
Next.js, React Router, Recoil, zustand, Redux 등 다양한 오픈소스와의 연계가 가능하다.
또한, 활발하고 다양한 커뮤니티를 가지고 있어 개발 인사이트를 쉽게 얻을 수 있다.
