티스토리 뷰

하루하루 공부하는 테디베어/React 공부하기

[테디베어 코딩공부] 제1주차 React 완벽 가이드: 개발 배경부터 핵심 개념까지

포근한테디 2024. 12. 4. 10:40
728x90
반응형
반응형

 

제1주차 React 완벽 가이드: 개발 배경부터 핵심 개념까지

728x90

1. React의 개발 배경

React는 페이스북의 소프트웨어 엔지니어인 조던 월케(Jordan Walke)가 처음 개발했습니다. React는 2011년 페이스북의 뉴스피드 기능에 처음 사용되었고, 이후 2012년 인스타그램에도 적용되었습니다. React는 2013년에 오픈 소스로 공개되면서 널리 사용되기 시작했습니다.

2. React가 해결하고자 하는 문제

React가 주로 해결하고자 했던 문제는 UI의 동적인 업데이트 관리와 개발의 복잡성 감소입니다.

Declarative Programming React는 선언적 프로그래밍 패러다임을 채택하여, 개발자가 어떻게(How)가 아닌 무엇(What)을 할 것인지에 집중할 수 있고, 코드의 가독성을 향상시키며 버그를 줄이는 데 도움이 됩니다.
Virtual DOM 동적인 웹 애플리케이션에서 사용자 인터랙션에 의해 UI가 빈번하게 변경되는 것을 효율적으로 관리하기 위해 Virtual DOM을 도입했습니다. Virtual DOM은 실제 DOM에 적용하기 전에 변경사항을 메모리 상에서 재조합하고, 최소한의 연산으로 DOM을 업데이트합니다.
Component React는 UI를 독립적이고 재사용 가능한 컴포넌트로 나누어 구성할 수 있도록 합니다. 이 접근 방식은 코드의 재사용성을 높이고, 복잡한 UI를 쉽게 구성하고 관리할 수 있게 해 줍니다.

3. 프로그래밍 패러다임

프로그래밍 패러다임은 프로그램을 작성하는 방식과 문제를 해결하는 접근 방식에서 차이가 있습니다.

자바스크립트의 프로그래밍 스타일

자바스크립트는 태생적으로는 명령형 언어이지만, 매우 유연하여 선언적 스타일의 프로그래밍도 충분히 지원하므로 개발자는 상황에 따라 필요한 프로그래밍 패러다임을 선택하여 사용할 수 있습니다.
ES6 이후에 추가된 여러 기능들은 함수형 프로그래밍을 보다 쉽게 구현할 수 있게 도와주며, 선언적 프로그래밍 스타일을 자바스크립트에서 더욱 효과적으로 사용할 수 있게 합니다.
선언적 프로그래밍은 주로 "무엇을" 할지에 초점을 맞추는 프로그래밍 패러다임입니다. 이 방식에서는 자바스크립트의 고차 함수(map, filter, reduce 등)가 중요한 역할을 합니다. 이 메서드들은 데이터를 처리하는 데 있어 명시적인 반복문을 작성하지 않고도 배열과 같은 컬렉션을 효율적으로 처리할 수 있게 해 줍니다.
선언적 프로그래밍을 효과적으로 구현하려면 자바스크립트의 메서드들을 정확히 이해하고 숙련하는 것이 필수적입니다. 자바스크립트의 기본 메서드를 활용할 줄 안다면, React, Vue, Angular, Svelte 등 자바스크립트 기반 라이브러리와 프레임워크에서 모두 작성 가능합니다.

// 명령형 프로그래밍 패러다임
// 명령형 방식에서는 for문을 사용하여 배열의 각 요소를 명시적으로 접근하고, 각 요소를 직접 수정합니다.
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = [];

for (let number of numbers) {
    doubledNumbers.push(number * 2);
}

console.log(doubledNumbers);  // [2, 4, 6, 8, 10]
    
// 선언적 프로그래밍 패러다임
// 선언적 방식에서는 map 함수를 사용하여 배열의 각 요소에 대해 실행할 연산을 선언하고,
// map 함수가 내부적으로 배열의 모든 요소에 대해 이 연산을 수행하도록 합니다.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);

console.log(doubledNumbers);  // [2, 4, 6, 8, 10]
패러다임 설명
명령형 프로그래밍 명시적으로 배열을 순회하며 각 요소에 대한 연산을 직접 지정합니다. 개발자는 반복문을 통해 배열의 인덱스를 관리하고, 각 요소를 어떻게 처리할지를 직접 제어합니다.
선언적 프로그래밍 배열의 각 요소에 적용할 함수를 map 메서드에 전달함으로써, 무엇을(what) 할지만 선언합니다. 배열의 순회와 요소의 인덱스 관리는 map 메서드가 내부적으로 처리합니다.

4. 선언적 프로그래밍 (Declarative Programming)

선언적 프로그래밍(Declarative Programming)은 프로그램의 로직을 표현하는 프로그래밍 패러다임 중 하나로, 어떻게(How) 문제를 해결할 것인가 보다는 무엇(What)을 할 것인가에 초점을 맞춥니다.
개발자는 원하는 결과만 선언하고 실행 방법은 시스템에 맡깁니다. 예를 들어, SQL에서는 원하는 데이터를 선언적으로 요청하고, HTML은 웹 페이지의 구조를 선언합니다. React에서도 UI 상태에 따라 화면에 표시될 내용을 선언적으로 정의합니다.

SQL

데이터베이스 언어인 SQL은 선언적 프로그래밍의 대표적인 예입니다. 데이터를 어떻게 가져올 것인지에 대한 구체적인 방법(How)을 지정하지 않고, 어떤 데이터를 가져오고 싶은지(What)를 선언합니다.

SELECT name FROM users WHERE age > 20;

HTML

웹 페이지의 구조를 설명하는 HTML은 어떤 내용을 표시할 것인지 선언하며, 그 표시 방법은 브라우저의 렌더링 엔진에 의해 처리됩니다.

<p>Hello world</p>

React

React는 UI를 구성할 때 선언적 접근을 사용합니다. 사용자 인터페이스의 특정 부분이 사용자의 상호작용이나 입력된 데이터에 따라 변화해야 할 때, 개발자는 그 변화를 직접 코딩으로 구현하는 것이 아니라, 그 상태에 대해 선언적으로 작성합니다.

// Bakery 컴포넌트는 bread라는 prop을 받습니다.
function Bakery({ bread }) {
  // 출력(return)은 입력된 bread prop에 따라 달라집니다.
  // bread 값이 어떻게 변경되었는지에 대한 처리는 React가 자동으로 해줍니다
  return <h1>Today, {bread}!</h1>;
  // 개발자는 "Today, {bread}!" 형태로 화면에 표시될 내용만 선언적으로 작성하면 됩니다.
}

React의 선언적 프로그래밍 예제 코드

import { useState } from 'react';

function Counter() {
  // useState 훅을 사용해 카운터의 상태를 관리합니다.
  const [count, setCount] = useState(0);

  return (
    <>
      <p>You clicked {count} times</p>
      {/* 버튼 클릭 시 setCount를 호출하여 count 상태를 업데이트합니다. */}
      <button onClick={() => setCount(count + 1)>Click</button>
    </>
  );
}

export default Counter;

5. 렌더링

React 앱의 모든 화면 업데이트는 트리거, 렌더링, 커밋의 세 단계로 이루어집니다. 자세한 내용은 React 공식 문서를 참고하세요.

DOM (Document Object Model)

DOM은 HTML과 XML 문서의 프로그래밍 인터페이스입니다. 웹 페이지를 스크립트 또는 프로그래밍 언어에서 사용할 수 있도록 구조화된 노드와 객체로 구성된 표현입니다. DOM을 통해 프로그램은 문서 구조, 스타일 및 내용을 변경할 수 있습니다. 문제는 DOM 조작이 비용이 많이 드는 작업이라는 것입니다. 복잡한 애플리케이션에서 DOM을 자주 업데이트하게 되면 페이지 성능이 저하될 수 있습니다.

VDOM (Virtual DOM)

DOM의 변경사항을 최소화하고 효율적으로 관리하기 위해 Virtual DOM 개념이 등장했습니다. Virtual DOM은 실제 DOM을 직접 조작하는 대신, 이를 추상화한 버전입니다. React와 같은 라이브러리에서는 Virtual DOM을 사용하여 브라우저의 DOM과 동기화하는 작업을 최적화합니다. SPA(Single Page Application)의 성능과 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

SPA (Single Page Application)

단일 웹 페이지에서 필요한 모든 HTML, JavaScript, CSS를 한 번에 로드한 후, 사용자와의 상호 작용에 따라 동적으로 콘텐츠를 업데이트합니다.

SPA의 특성

사용자가 클릭하거나 작업을 요청할 때, 전체 페이지를 새로고침하지 않고 필요한 데이터만 비동기적으로 불러와서 빠르게 업데이트합니다. 상호작용이 많은 환경에서 Virtual DOM은 실제 DOM보다 변경사항을 효율적으로 처리하여, 성능 저하 없이 사용자 인터페이스의 반응 시간을 단축합니다.

 

6. 컴포넌트 (Component)

React는 컴포넌트 기반의 라이브러리로, 개발자가 사용자 인터페이스(UI)를 독립적이고 재사용 가능한 부분으로 나누어 설계할 수 있게 합니다.
React의 컴포넌트는 UI의 독립적인 코드 블록으로, 버튼, 입력 필드, 다이얼로그 박스 등 다양한 UI 요소를 포함하거나 헤더와 사이드바 같은 큰 구성 요소로 사용됩니다. 컴포넌트는 헤더, 사이드바, 콘텐츠 영역과 같은 더 큰 UI 구성 요소를 형성할 수도 있습니다. (아토믹 디자인 시스템 참고)
이 컴포넌트들은 재사용이 가능합니다. 예를 들어 '로그인 버튼'을 여러 페이지에서 사용하여 개발 시간을 절약하고 일관성을 유지할 수 있습니다.

컴포넌트 기반의 접근 방식은 복잡한 UI를 간단하게 나누어 관리할 수 있게 해 주며, 각 컴포넌트는 독립적인 상태를 유지하고 props를 통해 데이터를 교환합니다.

7. React 파이버 (React Fiber)

1. React 파이버를 알아보기 전에

React를 사용하는 데 있어 중요한 것은 컴포넌트 작성, 상태 관리, props 사용 등 기본적인 React 개념과 API의 활용입니다. Fiber와 같은 내부 아키텍처는 성능 최적화나 고급 문제 해결이 필요할 때 추가적으로 깊이 파고들 수 있는 영역입니다.
React 개발을 시작하는 단계에서는 기본적인 React 사용법에 집중하고, 필요하거나 관심이 생길 때 점차 내부 구조나 고급 주제들을 탐구하는 접근을 추천드립니다.

2. React의 코어 알고리즘

React Fiber는 React의 코어 알고리즘을 재구성한 것으로, React의 렌더링 엔진을 개선하고 더 유연하며 효율적인 방식으로 작업을 스케줄링하고 처리할 수 있도록 설계된 내부 아키텍처입니다.
2017년에 React 16 버전에서 처음 도입되었습니다. "Fiber"는 React 내부에서 사용하는 새로운 타입의 작업 단위이며, React 컴포넌트의 인스턴스에 대응합니다.
Fiber의 증분 렌더링(Incremental Rendering)은 큰 업데이트를 작은 단위로 나누어 비동기적으로 처리하여 메인 스레드의 블로킹을 방지하고 애플리케이션의 반응성을 향상시킵니다.
태스크 우선순위 설정을 통해 React Fiber는 중요한 작업(예: 애니메이션)에 높은 우선순위를 부여하고, 덜 중요한 작업(예: 데이터 패칭)은 낮은 우선순위를 설정하여 효율적으로 자원을 관리하고 오류 발생 시 애플리케이션의 전체 중단을 방지합니다.

3. 추가 학습 자료

React의 동작 원리를 자세히 알고 싶다면 아래 두 가지 정리된 글과 영상을 보고 추가 스터디를 하시는 것을 추천합니다.

8. 프론트엔드에서 자주 만나는 용어

트랜스파일러, 번들링, 패키지 매니저

트랜스파일러는 새로운 버전의 코드를 호환 가능한 버전으로 변환하고, 번들링 도구는 여러 파일을 하나로 통합해 네트워크 요청을 최소화하며, 패키지 매니저는 소프트웨어 패키지의 설치 및 관리를 자동화합니다.
트랜스파일러, 번들링, 패키지 매니저는 모두 현대 웹 개발에서 중요한 역할을 하는 서로 다른 유형의 도구들입니다.

Transpiler (트랜스파일러)

트랜스파일러는 한 언어로 작성된 코드를 다른 언어로 변환하는 도구입니다. 자바스크립트에서는 새로운 문법이나 제안된 기능들을 현재 브라우저나 환경에서 실행할 수 있도록 기존 자바스크립트 버전으로 변환하는 작업을 말합니다.
- 예시: Babel은 ES6 이상의 자바스크립트 코드를 ES5로 변환해, 더 오래된 브라우저에서도 실행할 수 있도록 합니다.

Bundling (번들링)

번들링은 HTML, CSS, JavaScript, img, svg 등의 파일을 하나로 합치거나 몇 개의 파일로 합쳐서 웹 사이트의 로딩 시간을 단축시키는 소프트웨어 도구입니다.

번들링 설명

코드 최적화 코드를 압축하고, 불필요한 코드를 제거하여 전체 파일 크기를 줄입니다.
의존성 관리 자바스크립트 모듈이나 라이브러리 간의 의존성을 해결하고, 올바른 순서로 스크립트를 로드합니다.
변환 작업 최신 자바스크립트(ES6 이상)를 브라우저에서 실행 가능한 코드로 변환하거나, LESS/SASS와 같은 CSS 전처리기 코드를 일반 CSS로 변환합니다.

번들링 도구 종류

Webpack Webpack은 가장 널리 사용되는 모듈 번들러 중 하나로, JavaScript, CSS, 이미지와 같은 자원들을 모듈로 처리하여 하나 또는 여러 개의 번들로 만듭니다.
Rollup Rollup은 효율적인 번들링을 위해 ES6 모듈 구문을 사용하는 번들러로, 주로 라이브러리와 프레임워크의 개발에 적합합니다.
Vite Vite는 개발 도구로서, 개발 중에는 ES 모듈(ESM)을 직접 브라우저에 제공하여 매우 빠른 콜드 스타트와 업데이트를 가능하게 합니다. 프로덕션 빌드에서는 Vite가 Rollup을 사용하여 최종 자산을 번들링합니다.
Turbopack Turbopack은 Next.js 팀이 개발 중인 새로운 번들러로, Webpack의 후속 작업으로 볼 수 있습니다.

Package Manager (패키지 매니저)

패키지 매니저는 프로젝트에 필요한 라이브러리나 모듈을 관리하고, 의존성을 효율적으로 처리하는 데 사용됩니다.

패키지 매니저 종류

종류 설명
npm 대부분의 JavaScript 라이브러리와 프레임워크가 npm 레지스트리에 등록되어 있습니다. npm은 Node.js 설치할 때 자동으로 설치됩니다.
pnpm pnpm의 목적은 노드 모듈의 중복을 방지하여 디스크 공간을 절약하고 설치 시간을 단축하는 것입니다. 설치 명령어: npm install -g pnpm
yarn Yarn은 설치 프로세스를 최적화하여 npm보다 빠른 설치 속도를 제공합니다. 이는 병렬로 의존성을 처리하고, 효율적인 캐싱 메커니즘을 사용하기 때문입니다. 설치 명령어: npm install -g yarn

태그

#React #프론트엔드 #웹개발 #자바스크립트 #JavaScript #컴포넌트 #VirtualDOM #선언적프로그래밍 #프로그래밍패러다임 #트랜스파일러 #번들링 #패키지매니저 #Babel #Webpack #Rollup #Vite #Turbopack #npm #pnpm #yarn #SPA #SinglePageApplication #ReactFiber #상태관리 #Props #컴포넌트기반 #UIDevelopment #현대웹기술 #오픈소스 #페이스북 #인스타그램 #ES6 #함수형프로그래밍 #고차함수 #ReactHooks #useState #useEffect #React생태계 #개발도구 #코드최적화 #의존성관리 #소프트웨어엔지니어링 #UIUX #웹애플리케이션

 

728x90
반응형