JavaScript 디자인 패턴 학습, 제 2판

12장. React.js 디자인 패턴

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

지난 몇 년 동안 JavaScript를 사용하여 UI를 구성하는 간단한 방법에 대한 수요가 증가했습니다. 프론트엔드 개발자들은 다양한 라이브러리와 프레임워크에서 제공하는 즉시 사용 가능한 솔루션을 찾습니다. 이 분야에서 React의 인기는 2013년에 처음 출시된 이후 오랫동안 지속되어 왔습니다. 이 장에서는 React 세계에서 유용한 디자인 패턴을 살펴봅니다.

React.js라고도 하는React는 Facebook에서 UI 또는 UI 컴포넌트를 구축하기 위해 설계한 오픈 소스 JavaScript 라이브러리입니다. 물론 이 라이브러리만 있는 것은 아닙니다. 재사용 가능한 요소로 인터페이스를 구성하는 데는 Preact, Vue, Angular, Svelte, Lit 등 여러 가지 라이브러리도 유용합니다. 그러나 React의 인기를 감안하여 현재 10년간의 디자인 패턴에 대해 논의하기 위해 이 라이브러리를 선택했습니다.

React 소개

프론트엔드 개발자가 코드( )에 대해 이야기할 때는 대부분 웹용 인터페이스를 디자인하는 맥락에서 이루어집니다. 그리고 우리가 인터페이스 구성을 생각하는 방식은 버튼, 목록, 탐색 등과 같은 요소에 있습니다. React는 이러한 요소에서 인터페이스를 표현하는 최적화되고 간소화된 방법을 제공합니다. 또한 인터페이스를 컴포넌트, 프로퍼티, 상태라는 세 가지 핵심 개념으로 구성하여 복잡하고 까다로운 인터페이스를 구축하는 데 도움을 줍니다.

React는 컴포지션 중심이기 때문에 디자인 시스템의 요소에 완벽하게 매핑할 수 있습니다. 따라서 React로 디자인하면 모듈 방식으로 사고하는 것에 대한 보상을 받을 수 있습니다. 페이지나 뷰를 구성하기 전에 개별 컴포넌트를 개발할 수 있으므로 각 컴포넌트의 범위와 목적을 완전히 이해할 수 있으며, 이 과정을 컴포넌트화라고 합니다.

사용된 용어

이 장에서는 다음 용어를 자주 사용합니다. 각 용어의 의미를 간단히 살펴보겠습니다:

React/React.js/ReactJS

2013년에 Facebook에서 만든 React 라이브러리

ReactDOM

react-dom 패키지는 클라이언트 및 서버 렌더링을 위한 DOM 전용 메서드를 제공합니다.

JSX

JavaScript로의 구문 확장

Redux

중앙 집중식 상태 컨테이너

Hook

클래스를 작성하지 않고 state 및 기타 React 기능을 사용하는 새로운 방법

ReactNative

JavaScript로 크로스 플랫폼 네이티브 앱을 개발하기 위한 라이브러리

웹팩

React 커뮤니티에서 인기 있는 JavaScript 모듈 번들러

단일 페이지 애플리케이션(SPA)

전체 페이지 새로 고침/재로드 없이 동일한 페이지에 새 콘텐츠를 로드하는 웹 앱입니다.

기본 개념

React 디자인 패턴에 대해 논의하기 전에 React에서 사용되는 몇 가지 ...