리액트

- 웹 프론트엔드 프레임워크로 Javascript 기반 라이브러리
- 사용자 인터페이스의 개발을 위해 사용
  • 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리
  • 가상 DOM과 JSX 방식으로 동작
  • SPA 개발을 위한 프레임워크
  • 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 사용
  • 리액트는 가볍고 유연한 라이브러리로, 필요한 부분에만 적용 가능
  • 다른 프레임워크나 라이브러리와의 혼용도 가능하므로 기존 코드를 변경하지 않고도 리액트 도입 가능
  • 앵귤러와 뷰는 자신들만의 문법을 갖고 있지만, 리액트는 자바스크립트 기반의 문법을 사용하기 때문에 자바스크립트에 익숙하다면 보다 쉽게 사용 가능

 

SPA(싱글 페이지 어플리케이션)

서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 사용자와 소통하는 웹 애플리케이션이나 웹 사이트
  • 전통적인 웹페이지에서는 페이지를 유저에게 보여줄 때 즉, 페이지를 로딩할 때마다 서버에 미리 준비되어 있는 전체 페이지를 전달 받아와서 렌더링
  • 웹 브라우저에서 웹 서버 쪽으로 REST API 방식의 요청을 하면, 웹 서버는 JSON 포맷의 데이터만 웹 브라우저 쪽으로 전송하는 방식으로 동작
  • 웹 서버는 JSON 포맷 데이터만 웹 브라우저 쪽으로 전송하므로, MPA와 구분하기 위해 웹 서버라는 용어 대신 API 서버라는 용어 사용

 

💡 MPA(멀티 페이지 어플리케이션)

  • 대부분의 웹 페이지에서 볼 수 있는 웹 어플리케이션
  • 웹 브라우저에서 웹 서버 쪽으로 HTTP 요청을 보내면, 웹 서버는 HTML 형태의 HTTP 응답 제공
  • 웹 서버는 여러 개의 경로(page)를 제공하며, 웹 브라우저는 특정 경로로 HTTP 요청을 하는 방식
  • 웹 서버는 경로마다 각기 다른 HTML이 전송되므로, 웹 서버는 각기 다른 여러 개의 웹 페이지들을 응답하는 방식

 

장단점

  • 장점
    • 사용자의 행동에 빠르게 반응
    • 서버에 데이터를 계속 요청할 필요가 없어 서버 과부화 문제 줄일 수 있음
  • 단점
    • 첫 화면 로딩 시간이 긺.
    • 검색 엔진 최적화(SEO)가 좋지 않음
      • 검색엔진 최적화란 구글이나 네이버 같은 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것
      • SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못함

 

가상 DOM

  • 리액트는 가상 DOM이란 개념에 의해 동작하는 프론트엔드 프레임워크
  • 가상 DOM 개념은 Angular나 Vue.js에서도 볼 수 있음(구현 방식은 다름)

 

리액트 패키지 구조

  • 리액트는 항상 react와 react-dom 패키지 필요
  • react: 리액트 앱이 동작하는 환경과 무관하게 공통으로 사용하는 기능 제공
  • react-dom: react-dom/client, react-dom/server, react-native 등 렌더러 패키지들은 앱이 동작하는 환경(플랫폼)에 종속적인 기능을 제공하는데 특화

 

가상 DOM과 물리 DOM

  • 물리 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 물리 DOM을 조작하는 작업이 무거움.
  • 물리 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해서 내부적으로 가상 DOM을 만들어서 관리

 

FLUX 패턴

  • One-Way Binding (데이터 단방향 흐름)
    • 데이터 흐름 일관성
    • 데이터가 바꼈을 때 추적하기 쉬움
    • 간단하고 버그 잡기 편함
    • 대규모 웹사이트에 적합

 

컴포넌트 기반 아키텍처

특정 기능을 수행하는 독립적인 단위인 컴포넌트를 이용해서 마치 작은 레고 블록으로 거대한 집을 만들 듯이 프론트엔드를 만들어 가는 구조를 의미
  • 구성하는 UI 요소를 컴포넌트로 분리하여 개발하고, 이러한 컴포넌트들을 조합하여 복잡한 UI를 구성할 수 있음
  • 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높음
  • 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점

 

JSX 문법

Javascript와 XML을 조합한 문법
  • XML 구문에 자바스크립트 코드를 결합하는 용도로 만들어진 구문
    • XML
      • XML 규약은 <>로 감싼 시작 태그와 </> 끝 태그를 붙인 형태가 기본
      • 시작 태그에 id, style과 같은 속성을 기술할 수 있음.
      • 속성 값은 항상 ‘’, “”로 감싸줘야 함.
      • 스스로 닫는 태그: 자식 요소가 없는 태그를 <요소명/> 형태로 간결하게 표현
  • JSX는 기본 XML 구문을 리액트 방식으로 확장한 방식으로 동작
  • JSX는 가상 DOM을 가장 간결하게 표현할 수 있게 하는 XML 확장 구문의 역할 수행
  • 컴포넌트의 구조와 동작을 ‘선언적’으로 작성할 수 있게 해줌
    • 명령형(절차적) 프로그래밍은 "어떻게(HOW)" 처리할 지를 하나하나 코딩하는 방식이라면, 선언적 프로그래밍은 "무엇(WHAT)"을 해야 하는지를 지정하면 나머지는 알아서 하겠다는 방식을 의미
    • 가독성을 높이고, 컴포넌트의 렌더링을 보다 직관적으로 이해할 수 있도록 도와줌

 

장점

  • 가독성이 높고 작성이 쉬움
  • 높은 활용도

 

기본 규칙

  • 두 개 이상의 태그는 꼭 하나의 태그로 감싸줘야 함
  • 자바스크립트 값을 JSX 내부에서 사용할 때 중괄호로 감싸야 함
  • JSX 내부에서 스타일 사용 시, 객체 형태로 만들어야 동작
    • class가 아닌 className 사용

 

다른 라이브러리와 높은 호환성

  • 리액트는 단독으로 사용할 수도 있지만, 주로 다른 라이브러리나 프레임워크와 함께 사용
  • 예를 들어, 리액트 애플리케이션을 개발할 때는 리액트 라우터를 사용하여 페이지 간의 전환을 관리하고, 상태 관리를 위해 리덕스와 같은 라이브러리를 함께 사용할 수 있음

 

 

728x90
반응형

'React' 카테고리의 다른 글

React Component  (1) 2024.03.30
React Hook  (0) 2024.03.28

티스토리툴바