본문 바로가기
DEV_BACKEND/React

[멋쟁이사자처럼 부트캠프 TIL 회고] 백엔드 부트캠프 13기: Java 28일차 React-1

모건_Morgan 2025. 1. 10. 18:28

React : 프론트엔드 개발을 위한 라이브러리

1. 핵심 개념

React의 기본적인 작동 원리와 주요 기능들입니다.

1.1 컴포넌트 (Component)

  • React의 기본 빌딩 블록으로, UI를 구성하는 독립적이고 재사용 가능한 코드 조각입니다.
  • 종류:
    • 함수형 컴포넌트 (Functional Component): 함수로 정의되며, useState나 useEffect 같은 훅(Hooks)을 사용할 수 있습니다.
    • 클래스형 컴포넌트 (Class Component): class로 정의되며, 과거에 주로 사용되었지만 현재는 함수형 컴포넌트로 대체되고 있습니다.

1.2 JSX (JavaScript XML)

  • JavaScript 코드 안에 HTML을 작성할 수 있게 해주는 문법입니다.
  • React 컴포넌트를 선언하고 UI를 렌더링하는 데 사용됩니다.
    • React의 가상 DOM(Virtual DOM)을 생성하는 데 중요한 역할을 함.

1.3 Props (Properties)

  • 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방식입니다.
  • 읽기 전용으로, 자식 컴포넌트에서 수정할 수 없습니다.

1.4 State

  • 컴포넌트 내부에서 관리되는 데이터입니다.
  • 동적인 UI를 만들 때 사용되며, 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.
    • 상태 변경 시 컴포넌트가 재렌더링되는 과정을 단방향 데이터 흐름(unidirectional data flow)라고 합니다. 부모에서 자식으로 props를 통해 데이터를 전달하고, 자식에서 상태를 변경하면 이벤트 버블링을 통해 부모에게 알려주는 방식입니다.

1.5 Lifecycle (생명주기)

  • 컴포넌트가 생성되고, 업데이트되고, 제거되는 과정을 나타냅니다.
  • 주요 단계:
    • Mounting (생성)
    • Updating (업데이트)
    • Unmounting (제거)
  • 클래스형 컴포넌트에서 주로 사용되었으나, 함수형 컴포넌트에서는 useEffect로 대체됩니다.
    • useEffect 훅을 사용하여 componentDidMount, componentDidUpdate, componentWillUnmount과 유사한 동작을 구현할 수 있습니다.

 

2. React의 확장 개념

React를 더 강력하게 만드는 추가 도구와 개념들입니다.

2.1 Hooks

  • 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 기능입니다.
  • Custom Hooks: 개발자가 직접 Hook을 만들어 재사용성을 높일 수 있습니다.
  • Rules of Hooks: Hook을 사용할 때 지켜야 할 규칙 (예: 함수의 최상위에서만 호출, 동기적으로만 호출 등)
  • 주요 훅:
    • useState: 상태 관리
    • useEffect: 사이드 이펙트 관리
    • useContext: 전역 상태 관리
    • useReducer: 복잡한 상태 로직 관리
    • useRef: DOM 조작 및 상태 유지

2.2 Context API

  • 전역 상태를 관리할 수 있는 기능으로, 컴포넌트 계층 구조를 따라 데이터를 전달할 필요 없이 여러 컴포넌트에서 상태를 공유할 수 있습니다.
  • Provider와 Consumer: Context API는 Provider를 통해 값을 제공하고, Consumer를 통해 값을 소비하는 구조로 이루어져 있습니다.
  • 성능: Context API는 많은 컴포넌트에서 사용될 경우 성능 저하가 발생할 수 있으므로 주의해야 합니다.

2.3 React Router

  • 싱글 페이지 애플리케이션(SPA)에서 라우팅을 관리하는 라이브러리입니다.
  • URL에 따라 다른 컴포넌트를 렌더링합니다.
    • Nested Routes: 중첩된 라우트를 구성하여 복잡한 애플리케이션을 구축할 수 있습니다.
    • Dynamic Routing: URL 파라미터를 사용하여 동적인 라우팅을 구현할 수 있습니다.

2.4 Redux (또는 상태 관리 라이브러리)

  • 애플리케이션의 상태를 전역적으로 관리하는 라이브러리입니다.
  • React의 useContext와 함께 상태 관리를 강화하는 도구로 사용됩니다.

 

3. React 관련 개발 도구

React 생태계에서 활용되는 유용한 도구들입니다.

3.1 Create React App (CRA)

  • React 프로젝트를 빠르게 시작할 수 있는 CLI 도구입니다.

3.2 React Developer Tools

  • 브라우저 확장 도구로, React 컴포넌트 트리와 상태를 디버깅할 수 있습니다.

3.3 Next.js

  • React를 기반으로 하는 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다.

 

4. 실제 개발에서의 React 분류

React는 프로젝트의 규모와 복잡성에 따라 아래와 같이 활용됩니다:

4.1 소규모 프로젝트

  • 컴포넌트 기반 설계
  • 상태 관리에 useState와 useContext 사용

4.2 중/대규모 프로젝트

  • 상태 관리에 Redux, Recoil, MobX 같은 라이브러리 사용
  • 코드 스플리팅 및 동적 로딩
  • 라우팅에 React Router 사용
  • 서버 사이드 렌더링(SSR) 도입 시 Next.js 활용

- 실제 개발에서의 React 분류 부분

  • SSR (Server-Side Rendering): SEO, 초기 로딩 속도 향상 등의 장점이 있지만, 서버 자원 소모가 증가할 수 있습니다.
  • SSG (Static Site Generation): 미리 빌드된 HTML 파일을 제공하여 최상의 성능을 제공하지만, 동적 콘텐츠에는 적합하지 않습니다.

요약

React는 컴포넌트, 상태, Props, 생명주기와 같은 핵심 개념을 기반으로 동작하며, Hooks, Context API, Redux와 같은 도구들로 확장됩니다. 실제 개발에서는 프로젝트의 요구사항에 따라 React의 기본 기능과 확장 도구를 조합하여 사용합니다.

 

 

 

 

-Virtual DOM

 

간단히 말해서 일반적인 DOM은 항상 모든 것을 렌더링하지만 가상 DOM은 감지된 변경 사항만 렌더링함

 

  • 일반적인 DOM: 변경이 발생하면 DOM 전체를 다시 렌더링합니다. 이 과정에서 모든 노드를 확인하고 다시 그리는 작업이 이루어지므로, 많은 요소가 있는 경우 성능에 영향을 줄 수 있습니다.
  • 가상 DOM (Virtual DOM): DOM의 가상 사본을 메모리에 유지하고, 변경 사항이 발생하면 두 버전(이전 상태와 새로운 상태)을 비교(diffing)하여 실제 DOM에 반영해야 할 최소한의 변경 사항만 업데이트합니다.

요약

  • 일반 DOM: 모든 것을 다시 렌더링
  • 가상 DOM: 변경 사항만 효율적으로 업데이트

이 방식은 React와 같은 라이브러리에서 성능 최적화를 위해 사용됩니다.

 

React를 선택해야 하는 이유

 

1. 컴포넌트 기반 아키텍처

  • 재사용성: UI를 작은 컴포넌트 단위로 나누어 관리하여 코드 재사용성을 높입니다.
  • 유지보수성: 각 컴포넌트를 독립적으로 개발하고 테스트할 수 있어 유지보수가 용이합니다.
  • 규모 확장성: 복잡한 애플리케이션도 작은 컴포넌트들을 조립하여 구축할 수 있습니다.

2. 가상 DOM

  • 성능 향상: 실제 DOM을 직접 조작하는 대신 가상 DOM을 사용하여 불필요한 렌더링을 최소화하고 성능을 향상시킵니다.
  • 효율적인 업데이트: 실제 DOM과 가상 DOM을 비교하여 변경된 부분만 업데이트합니다.

3. JSX

  • 직관적인 UI 개발: JavaScript 코드 안에 HTML과 유사한 문법으로 UI를 작성하여 개발 생산성을 높입니다.
  • 컴포넌트 구조 시각화: JSX를 사용하면 컴포넌트의 구조를 명확하게 파악할 수 있습니다.

4. 단방향 데이터 흐름

  • 예측 가능한 상태 관리: 데이터 흐름이 일정한 방향으로 이루어져 상태 관리가 간단하고 예측 가능합니다.
  • 오류 감소: 데이터 흐름이 복잡해져 발생할 수 있는 버그를 줄일 수 있습니다.

5. 강력한 생태계

  • 다양한 라이브러리 및 도구: React Router, Redux, Next.js 등 다양한 라이브러리와 도구를 활용하여 복잡한 기능을 구현할 수 있습니다.
  • 활발한 커뮤니티: 많은 개발자가 사용하고 있어 풍부한 자료와 커뮤니티 지원을 받을 수 있습니다.

6. Facebook의 지원

  • 안정적인 유지보수: Facebook에서 적극적으로 개발하고 지원하여 안정성과 지속적인 발전을 보장합니다.
  • 기업에서의 신뢰도: Facebook과 같은 대규모 서비스에서 사용되고 있어 기업에서도 신뢰할 수 있습니다.

React를 선택해야 하는 경우

  • 대규모 웹 애플리케이션: 복잡하고 대규모의 웹 애플리케이션을 개발하려는 경우 React의 컴포넌트 기반 아키텍처와 성능이 유용합니다.
  • 빠른 개발 속도: JSX와 컴포넌트 재사용을 통해 개발 속도를 높이고 싶은 경우 React가 적합합니다.
  • 유지보수가 용이한 애플리케이션: 컴포넌트 단위로 관리하여 유지보수가 쉽고 코드 변경에 따른 영향을 최소화하고 싶은 경우 React를 고려할 수 있습니다.
  • 성능이 중요한 애플리케이션: 가상 DOM을 통해 최적화된 렌더링을 제공하여 성능이 중요한 애플리케이션에 적합합니다.

결론적으로 React는 배우기 쉽고, 생산성이 높으며, 강력한 기능을 제공하는 프론트엔드 라이브러리입니다. 다양한 프로젝트에 적용 가능하며, 특히 대규모 웹 애플리케이션 개발에 있어 탁월한 선택이 될 수 있습니다.

 

 

1. 개발 환경 준비

1. Node.js

  • Node.js 공식 홈페이지 (https://nodejs.org/ko/)에서 다운로드 및 설치
  • 또는 NVM(Node Version Manager)을 통해 여러 버전을 관리하며 설치
  • Node 14 LTS 이상의 버전을 사용하면 React 18와 호환이 원활합니다.

2. Visual Studio Code

3. 터미널 환경

  • Windows: Git for Windows 설치 후 Git Bash 사용 권장
  • macOS, Linux: 기본 터미널 사용

2. Node.js 설치하기 

[방법 1] 공식 홈페이지(https://nodejs.org/ko/)에서 설치

[방법 2] nvm-windows GitHub 저장소(https://github.com/coreybutler/nvm-windows/releases)에서 최신 버전 다운로드 및 설치

 

이후 nvm설치(버전 컨트롤) 후 프로젝트를 생성하였다.

 

React 18 프로젝트 만들기

1. 프로젝트 생성

  • 원하는 프로젝트 폴더 위치로 이동 후 명령어 실행: npx create-react-app [프로젝트이름]
  • git 클라이언트가 설치되어 있어야 합니다. 그렇지 않으면 오류 발생
  • 예시: npx create-react-app first-react

설치후 first-react안의 package.json을 다음과 같이 수정

{
    "name": "first-react",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
	},
	......
	}
}

 

2. 프로젝트 실행

cd first-react

npm start

  • 자동으로 http://localhost:3000 이 브라우저에서 열립니다.
  • 3000번 포트가 이미 사용 중이면, 비어 있는 다른 포트로 자동 실행됩니다.

 

티스토리툴바