재사용 가능한 사용자 인터페이스 컴포넌트를 구축하기 위한 UI 라이브러리

수년 간, JS를 사용하여 UI를 구성하는 간단한 방법에 대한 수요가 증가했다. React는 페이스북에서 개발한 오픈 소스 JS 라이브러리로, UI 또는 UI 컴포넌트를 구축하는 데 사용된다.

React는 물론 유일한 UI 라이브러리는 아니다. Preact, Vue, Angular, Svelte, Lit 등 많은 다른 라이브러리도 재사용 가능한 요소를 사용하여 인터페이스를 구성하는 데 효과적이다. React의 인기를 고려할 때, 이 가이드에서 일부 디자인, 렌더링 및 성능 패턴을 살펴볼 때 React가 어떻게 동작하는지 알아보는 것이 가치가 있다.

프론트엔드 개발자들이 코드에 대해 이야기할 때, 그 맥락은 주로 Web 인터페이스 디자인이다. 그리고 인터페이스 구성을 버튼, 목록, 내비게이션 등과 같은 요소로 생각한다. React는 이러한 요소들을 효율적이고 간소화된 방식으로 표현할 수 있도록 도와준다. 또한 컴포넌트, 프롭스(props), 상태(state)라는 세 가지 주요 개념을 사용하여 복잡하고 까다로운 인터페이스를 구축할 수 있다.

React는 구성 중심적(composition-focused)이기 때문에 디자인 시스템의 요소와 완벽하게 매핑될 수 있다. 따라서 React를 위해 디자인하는 것은 실제로 모듈식으로 생각하는데 이점이 있다. 각 컴포넌트의 범위와 목적을 완전히 이해하기 위해 페이지나 뷰를 구성하기 전에 개별 컴포넌트를 디자인하여 인터페이스를 구성할 수 있으므로, 이를 컴포넌트화라는 과정이라고 할 수 있습니다.

용어 설명

• React / React.js / ReactJS - 페이스북에서 2013년에 개발한 React 라이브러리
• ReactDOM - DOM 및 서버 렌더링을 위한 패키지
• JSX - 자바스크립트의 구문 확장
• Redux - 중앙 집중식 상태 컨테이너
• Hooks - 클래스를 작성하지 않고도 상태와 다른 React 기능을 사용하는 새로운 방법
• ReactNative - 자바스크립트로 크로스 플랫폼 네이티브 앱을 개발하기 위한 라이브러리
• Webpack - 자바스크립트 모듈 번들러로, React 커뮤니티에서 인기.
• CRA (Create React App) - 프로젝트를 시작하기 위한 React 앱 스캐폴딩을 위한 CLI 도구
• Next.js - SSR, 코드 분할 등 다양한 우수한 기능을 갖춘 React 프레임워크

Rendering with JSX

우리는 예제에서 JSX를 사용할 것이다. JSX는 XML과 유사한 구문을 사용하여 JS에 템플릿 HTML을 삽입하는 JavaScript의 확장이다. JSX는 유효한 JS로 변환되도록 설계되었지만, 이 변환의 의미론적인 측면은 구현에 따라 다를 수 있다. JSX는 React 라이브러리와 함께 인기를 얻었지만, 다른 구현체에서도 사용되고 있다.