[45일차] React 기초

 

 

React란

SPA(Single Page Application)을 자바스크립트 라이브러리로 주로 사용자 인터페이스(UI)를 개발하는 데 중점을 두고 있다.

 

 

React 특징

1. 가상돔 (Virtual DOM) 활용

리액트는 렌더링이 발생될 상황이 생기면 새로운 화면에 들어갈 내용이 담긴 가상돔을 생성한다. 가상돔을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용하게 된다. 이는 실제 DOM의 가벼운 사본이라고 생각하면 된다.

 

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 아래 3가지 절차를 거치게 된다.

  1) 데이터를 업데이트하면, 전체 UI를 Virtual DOM에 렌더링한다.

  2) 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.

  3) 바뀐 부분만 실제 DOM에 적용한다.

 

위 절차를 통해 변화가 필요한 부분만 선택적으로 업데이트하므로 빠른 처리가 가능해지고, 애플리케이션의 성능이 향상되게 된다.

 

또한 Virtual DOM은 immutable 이라는 특징이 있다. 이는 한 번 생성된 Virtual DOM 객체는 절대 직접 수정되지 않는다는 의미이다.

즉, 리액트는 기존 가상돔을 "변경"하는 대신, 매번 새로운 가상돔을 생성하여 이전 것과 비교(diffing)하는 방식을 택하기에 immutable을 유지하게 된다.

 

 

출처: https://thebook.io/080203/0013/

 

 

2. 컴포넌트 재사용성

리액트는 각 컴포넌트를 독립적으로 재사용할 수 있도록 지원한다. 재사용성이 높은 컴포넌트를 별도의 컴포넌트로 분리하고, 이를 조합하여 웹 페이지를 구성할 수 있다.

이를 통해 쉽게 새로운 기능을 추가하거나 수정을 진행할 수 있다.

 

 

3. 유연성과 호환성

리액트 코드는 다양한 플랫폼 (웹, 모바일, 데스크톱 등)에서 쉽게 재사용할 수 있다.

 

4. 고성능

리액트는 효율적인 렌더링 알고리즘을 통해 뛰어난 성능을 제공하며, 화면을 빠르게 갱신한다.

 

5. 앱 개발

리액트는 리액트 네이티브라는 모바일 애플리케이션 프레임워크도 지원한다. 따라서 웹과 앱의 전환이 다른 라이브러리나 프레임워크보다는 쉽다는 장점이 있다.

 

6. 거대한 커뮤니티와 리소스

리액트는 2023년 전 세계 웹 개발자를 상대로 사용하는 기술 스택 설문조사에서 40.58%의 점유율로 2위를 하였다. 이렇듯 인터넷에 리액트에 대한 정보가 많고, 다양한 기업에서 리액트를 사용하고 있기 때문에 어느 정도의 성능이 보장되어 있다고 볼 수 있다.

2023년 stackoverflow

7. JSX 사용

JSX (JavaScript XML)라는 자바스크립트를 확장한 문법을 사용한다.

JSX는 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환한다. 

 

8. Reack Hook

Hook은 React 버전 16.8부터 리액트 요소로 새로 추가된 것이다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 리액트의 기능을 사용할 수 있다.

종류로는 useState (컴포넌트 상태 관리), useEffect (컴포넌트 생애주기에 개입 O), useContext (컴포넌트 간 전역 상태 관리) 등이 있으며 이외에도 여러 훅들이 있다.

추가적으로 개발자가 Custom Hook을 직접 만들어서 반복되는 로직을 묶어 하나의 컴포넌트로 만들듯 반복되는 메서드를 하나로 묶어 사용할 수 있다는 장점이 있다.

 

 

 

React의 중요 문법

스프레드 문법 (Spread Syntax)

- 객체를 복제하거나, 새로운 객체를 만들 때 사용하는 문법이다.

- 형식

{ …변수명 }

 

 

- 특징

  - 객체의 내용을 복사한 새로운 객체가 생성된다.

  - 기존 객체에 변경을 가해도 복제된 객체에는 영향 X

  - 기존 객체와 새 객체는 서로 다른 참조 (reference)를 가진다. 따라서 두 객체의 값이 같아도 서로 다른 메모리 공간을 참조한다.

서로 다른 참조를 나타내는 예시 코드

 

React 설치 및 프로젝트 생성

설치

npm install -g create-react-app

 

프로젝트 생성 (+ Vite 빌드 도구)

npm create vite@latest my-app

 

이때 Vite란 웹 개발을 위한 빠르고 간단한 빌드 도구로, 장점은 다음과 같다.

Vite 장점

 

React 폴더 구조

`/public`

: 정적 -> 패키징 되지 않는다.

 

`/src`

: 동적 -> 패키징 된다. (실제 코드를 작성하는 폴더)

 

---

회고

프론트엔드의 꽃인 React 강의가 시작되었다.

 

React는 1년 전 GDSC에서 스터디를 하면서 처음 접해보았고, 프로젝트까지 진행해 보았던 프레임워크이다. 그래서 익숙하긴 하지만, 공식문서보다는 강의 위주로 빠르게 학습하며 프로젝트를 진행했던 터라 공식문서 등 제대로 하나하나 짚어가면 학습을 하지 못했던 것이 아쉬움이 커서 부트캠프를 신청하게 된 것도 있다.

 

그만큼 이번에는 제대로 공식문서까지 탈탈 털어가며 공부하고자 하는 열망이 크고, 이번에 꼭 React를 마스터까진 아니더라도 AI를 사용하지 않고 (아이디어 제외 ㅎㅎ) 구글링과 공식문서만으로 미니 프로젝트를 진행해보고 싶다. 

 

또한 타 부트캠프 면접에서 React의 특징조차 말하지 못했던 모습이 너무 한탄스러웠어서 이번엔 React의 특징 같은 것들도 제대로 습득하여 면접에서 지지 않을 것이다.

1달 동안 화이팅!

 

해파리 케로로

아 저는 요즘 케로로 클립 보는 맛에 살아갑니다..