최근 수정 시각 : 2024-12-10 18:28:01

React(라이브러리)

ReactJS에서 넘어옴
웹 프레임워크 기술
{{{#!wiki style="margin:0 -10px"
{{{#!folding [ 펼치기 / 접기 ]
{{{#!wiki style="margin:-5px 0px -10px; word-break:keep-all"
$ 유료 포함 • 취소선 단종 및 중단
<colbgcolor=#f6f6f9,#2f3241> 프론트엔드 <colbgcolor=#fcfcfd,#272935> CSS Bootstrap Tailwind CSS Bulma Foundation Skeleton Pico
JSX React SolidJS Astro Preact Gatsby Remix Inferno Qwik
JS Angular Svelte Backbone.js jQuery Astro htmx Ember.js Lit 11ty Marko VanJS Alpine.js
Vue Vue.js VuePress Gridsome Quasar Astro
Python Reflex
백엔드 Java Spring Struts GWT Grails Jooby Play! Framework Scala
Kotlin Ktor
JS Express NestJS koa Hono fastify
.NET ASP.NET$
PHP Laravel Codeigniter Reasonable phalcon Symfony zend CakePHP FuelPHP Yii Slim PHPixe
Python Django Flask FastAPI
Ruby Ruby on Rails Sinatra
Go Gin echo Fiber
풀스택 JSX Next.js Astro SolidStart Remix Qwik City
JS SvelteKit Fresh Astro Marko
Vue Nuxt.js Astro
Java Vaadin$
Python Streamlit Reflex
Rust Rocket Actix Leptos Axum
하이브리드 .NET Blazor
Dart Flutter
Kotlin Kotlin Multiplatform
}}}}}}}}} ||

{{{#!wiki style="margin: -10px -10px" <tablealign=center><tablewidth=320><tablebordercolor=white,#1f2023> 파일:React 로고.svg 파일:React 로고 밝은버전.svg React }}}
<colcolor=#087ea4,#58C4DC> 종류 라이브러리
라이선스 MIT 라이선스
개발 Meta Platforms
언어 JavaScript, TypeScript
버전 19.0.0 (2024. 12. 5. 업데이트)
파일:홈페이지 아이콘.svg 파일:GitHub 아이콘.svg 파일:GitHub 아이콘 화이트.svg 파일:Bluesky 아이콘.svg 파일:페이스북 아이콘.svg

1. 개요
1.1. React 19.0
2. 예시
2.1. 해설2.2. 리액트가 있고 없고의 차이(컴포넌트)
3. Virtual DOM4. JSX5. 개발 환경 만들기6. React Native7. React를 사용하는 웹사이트/프로그램8. 강의9. 논란10. 여담

[clearfix]

1. 개요


메타에서 개발한 오픈 소스 자바스크립트 라이브러리.

프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. GitHub Star 수와 npm 패키지 다운로드 수는 React가 가장 많다.

SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트해야 하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는 게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리 잡았다. 이와 더불어 타입스크립트 Sass 같은 언어도 지원한다. 또한 Next.js 등의 등장으로 인해 SSG, SSR 등을 할 수 있게 되면서 사용 범위 또한 기하급수적으로 늘어났다.

1.1. React 19.0

현지 시각으로 2024년 12월 5일, React 19 정식 버전을 발표하였으며, 아래 기능이 추가되었다.
  • 비동기 대응 가능한 유틸리티 훅 함수 추가 (useTransition, useActionState)
  • <form> 태그는 자체 Context를 가지며, useFormStatus 훅을 통해 인접한 <form> 양식 상태를 가져올 수 있다.
  • 서버 컴포넌트와 서버 액션을 통해 서버로부터 값을 불러오거나 변경하는 추상적 기능 추가
  • useOptimistic 훅 함수를 통한 낙관적 상태 관리 지원
  • 비동기 등의 자원을 가져올 수 있는 Hook인 use 훅 추가
  • 자원 미리 불러오기(resource preloading)
  • ref 는 이제 일반 속성이 되어 useRef 훅이 불필요하며, 콜백 작성 시 useEffect 처럼 정리 함수 반환 가능.
  • createContext 로 만든 컨텍스트 자체가 이제 Provider 역할을 하게 됨(소비는 useContextuse 훅 사용)
  • 초기화를 제외한 재렌더링 시 상태를 관리할 수 있는 지연 상태 관리 훅 useDeferredValue 추가
  • <meta> 태그 직접 지원
  • 스타일시트 관련 태그 직접 지원
  • <script async> 태그와 속성 조합으로 비동기 스크립트 지원, react가 스크립트 자원 관리.
  • 사용자 정의 태그(웹 컴포넌트 표준 포함) 지원
  • 향상된 오류 보고

이 중에 서버 컴포넌트와 폼 양식 관련된 기능은 Next.js 에서 13.2 버전부터 점진적으로 추가되어 바로 실무에서도 사용이 가능하다.
서버 컴포넌트 등의 서버 기능은 Next.js 처럼 프레임워크 및 라이브러리에서 지원하거나 직접 서버 단에서 구현하여 사용 가능하다.

2. 예시

함수 문법(권장)
#!syntax javascript
import ReactDOM from 'react-dom';

function App ({name}){
  return (
    <h1>Hello, {name}!</h1>
  )
}

ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));

클래스 문법(클라이언트상 오류 디버깅 용도 외 비권장)
[ 펼치기 / 접기 ]
#!syntax javascript
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    )
  }
}

ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));

해당 코드는 최신 브라우저에서 막 지원하기 시작한 import문과, JS 표준 문법이 아닌 JSX를 사용했기 때문에 이 코드가 그대로 브라우저상에 작동되는 것은 아니다. Babel을 통해 대부분의 브라우저가 사용할 수 있는 JS 코드로 변환한 후 사용할 수 있다.

2.1. 해설

#!syntax javascript
function App ({ name }) {
  return (
    <h1>Hello, {name}!</h1>
  );
}
({ name })은, JavaScript 또는 TypeScript에서 사용할 수 있는 destructuring( 구조 분해 할당)이라는 문법을 사용한 부분이다. 즉, App이라는 함수의 첫 번째 인자의 name이라는 속성을 name이라는 변수에 할당한 것이다.

또한 Return 뒤에 HTML 태그처럼 보이는 것이 나오는데, 이는 JSX로 Virtual DOM(React Element)을 생성하는 부분이다. 풀어 쓰면 다음과 같다. JSX가 일반적인 함수 호출로 변경되었다.

#!syntax javascript
import { jsx } from "react/jsx-runtime";

function App(props) {
  const name = props.name;
  return jsx("h1", {
    children: ["Hello, ", name, "!"]
  });
}

2.2. 리액트가 있고 없고의 차이(컴포넌트)

  • 리액트가 없을 때
#!syntax xml
<header>
  <h1>Logo</h1>
</header>
<nav>
 <ul>
  <li>
    <a href="#">메뉴1</a>
  </li>
  <li>
    <a href="#">메뉴2</a>
  </li>
 </ul>
</nav>
<section>
  <p>Hello World!</p>
</section>

  • 리액트가 있을 때
#!syntax javascript
const Hlogo = () => {
  return (
    <header>
      <h1>Logo</h1>
    </header>
  );
};

const Anav = () => {
  return (
    <nav>
      <ul>
        <li>
          <a href="#">메뉴1</a>
        </li>
        <li>
          <a href="#">메뉴2</a>
        </li>
      </ul>
    </nav>
  );
};

const Bsection = ({ amumal }) => {
  return (
    <section>
      <p>{amumal}</p>
    </section>
  );
};

const App = () => {
  return (
    <div className="App">
      <Hlogo />
      <Anav />
      <Bsection amumal="Hello World!" />
    </div>
  );
};

export default App;


(위에서 보는 것처럼 컴포넌트 클래스 값은 대문자로 시작되어야 한다.)

위와 같이 컴포넌트(부품)로 나누어서 정리가 가능하다. 이렇게 코드가 짧을 때에는 별로 의미가 없지만 한 페이지의 코드가 길 때에는 코드를 나누어 담을 수 있어서 유용하다. 또한 각 컴포넌트들은 js 파일로 만들어서 공유가 가능하기 때문에 이미 만들어진 컴포넌트들을 조립하여 웹 페이지를 만들 수 있어서 가능성이 무궁무진해진다.

참고로 메타에서는 크롬 개발자 도구를 이용해서 리액트로 만들고 있는 페이지의 리액트 컴포넌트들을 볼 수 있는 툴을 제공하고 있다.

3. Virtual DOM

Virtual DOM의 작동 방식을 비유적으로 설명한 영상(영어)

서버와의 데이터 통신과는 별개로 DOM을 직접적으로 조작해야 하는 기존의 웹 화면 개발 방식과 달리, React는 DOM을 직접적으로 조작하지 않고 데이터가 변화할 때 변경 사항이 적용된 Virtual DOM을 만든다. 그 다음 실제 DOM과 Virtual DOM의 차이점을 비교하고, 변경된 부분을 실제 DOM에 적용한다.

보이는 데이터의 잦은 변경이 필요한 웹 앱의 경우 이러한 방식을 통해 성능을 크게 향상시킬 수 있다. 실제 동적인 웹일수록 Angular 등과 비교해서 성능이 훨씬 더 빠른 편이다. 단, 데이터가 자주 변경되지 않는 비교적 정적인 웹 페이지에 이를 적용할 경우 오히려 성능 면에서 손해를 볼 수 있다.

3.1. 상태 관리 라이브러리

상태 관리의 용이성과 성능 최적화를 위해 상태 관리 라이브러리를 사용할 수 있다. React와 사용 가능한 것들 중 대표적인 것들은 다음과 같다.
  • Redux
  • Recoil - React와 마찬가지로 Meta에서 개발한 라이브러리이다. React 전용이다.
  • Jotai - Jotai는 React를 위한 원자적(atomic) 접근 방식의 경량화된 상태 관리 라이브러리로, React의 useState와 유사한 API를 제공하면서도 전역 상태 관리와 자동 최적화된 렌더링을 지원한다.
  • Zustand
  • MobX

4. JSX

#!syntax javascript
const element = <h1>Hello, world!</h1>;

JavaScript XML

React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML 같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.

HTML과 매우 흡사하긴 하지만, XML을 기반으로 한 데다 Javascript 내부에서 사용하다 보니 불가피하게 생긴 차이점이 몇 가지 있다.
  • HTML요소에 class값을 정의할 때, 원래 HTML에서는 <p class="container"></p>과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용한다.
  • 마찬가지 이유로 루프문 예약어와 겹치는 for은 htmlFor로 사용한다.
  • 또한 요소에서 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜 표기법으로 표기해야 한다.
  • 기존의 HTML에서 주석은 <!-- COMMENT -->이렇게 했었지만 JSX에서는 {/*주석*/} 으로 표현한다.
  • HTML Custom-Element는 <my-element>와 같이 표기했지만 React의 Custom Element는 <MyElement />와 같이 Pascal Case로 표기한다. 닫는 태그에는 꼭 명시적으로 /> 표기를 해준다. [1]
  • JSX 내부에서도 JS를 사용할 수 있다. {}로 불러온다. {console.log(this.props)} 같은 식이다.[2]

이 JSX 위주의 프론트엔드 라이브러리로는 Preact, SolidJS, Inferno 등이 있으며, Vue.js 등의 자체적인 포맷을 사용하거나 Svelte 같이 JSX 사용과 거리가 먼 라이브러리 및 프레임워크 또한 JSX를 사용할 수 있는 방법이 존재한다.

어도비 Photoshop, After Effects등의 프로그램에서 쓰이는 스크립트의 확장자명도 jsx이지만 이 jsx와는 자바스크립트라는 것 이외의 관련이 없다.

5. 개발 환경 만들기

개발 환경 구축은 npx나 yarn 중에서 선택하면 된다.

아래 설명에서는 create-react-app을 사용했지만, Vite를 사용하는 방법도 있다. 자세한 내용은 문서 참조.

5.1. Next.js

공식 가이드에서는 아예 Next.js를 사용해서 시작하기를 권장하고 있다.
npx create-next-app@latest

===# npx #===
  • 설치
Node.js를 설치해서 npm이 함께 설치되게 한 다음에 프로젝트를 만들 폴더의 터미널에서
npx create-react-app .
을 입력한다. (점까지 모두 입력되어야 한다.)


만일 다른 이름으로 프로젝트를 만들고자 한다면
npx create-react-app [Project name]
을 입력한다.


참고로 npx를 이용한 설치는 npm -g 처럼 노드 환경을 사용하는 pc 자체에 깔리는 것이 아니고 node module이 설치된 프로젝트 내부에만 설치되는 것도 아니다. create-react-app은 처음 프로젝트를 생성할 때만 필요하고 그 이후에는 있을 필요가 없기 때문에 npx를 사용해 1회성으로 설치 후 자동 삭제 된다. npm 5버전 이상부터는 npx가 자동으로 지원된다. 그렇지 못한 경우에는 다음과 같이 npx를 설치할 수 있다.
npm install npx -g


참고로 자바스크립트가 아닌 타입스크립트를 사용하려면
npx create-react-app . --template typescript
를 입력하면 된다.

  • 실행
npm start
를 터미널에서 입력하면 리액트가 실행된다. 실행을 종료하고 싶다면 Ctrl+C를 터미널에서 누르면 된다.

실행되면 리액트 폴더의 src/app.js 파일을 통해 페이지 수정을 하고, 자동으로 실행되는 웹 브라우저에서 확인이 가능하다.

  • 빌드
npm run build
를 입력하면 리액트 폴더의 내용물이 압축되어 웹상에 올리기 적합한 형태로 build 폴더 안에 생성된다.

serve -s build
를 입력한다면 build 폴더의 내용물을 볼 수 있는 서버가 생성된다. 중지는 Ctrl+C를 통해 할 수 있다.

===# yarn #===
  • 설치
Node.js를 설치해서 npm이 함께 설치되게 한 다음에 프로젝트를 만들 폴더의 터미널에서
npm i -g yarn 
을 입력한다. (Yarn 설치)

yarn create react-app .
을 입력한다. (점까지 모두 입력되어야 한다.)


만일 다른 이름으로 프로젝트를 만들고자 한다면
yarn create react-app [Project name]
을 입력한다.

참고로 yarn를 이용한 설치는 npm -g 처럼 노드 환경을 사용하는 pc 자체에 깔리는 것이 아니고 node module이 설치된 프로젝트 내부에만 설치되는 것도 아니다. create-react-app은 처음 프로젝트를 생성할 때만 필요하고 그 이후에는 있을 필요가 없기 때문에 yarn를 사용해 1회성으로 설치 후 자동 삭제 된다.

참고로 자바스크립트가 아닌 타입스크립트를 사용하려면
yarn create react-app . --template typescript
를 입력하면 된다.

  • 실행
yarn start
를 터미널에서 입력하면 리액트가 실행된다. 실행을 종료하고 싶다면 Ctrl+C를 터미널에서 누르면 된다.

실행되면 리액트 폴더의 src/app.js 파일을 통해 페이지 수정을 하고, 자동으로 실행되는 웹 브라우저에서 확인이 가능하다.

  • 빌드
yarn build
를 입력하면 리액트 폴더의 내용물이 압축되어 웹상에 올리기 적합한 형태로 build 폴더 안에 생성된다.

serve -s build
를 입력한다면 build 폴더의 내용물을 볼 수 있는 서버가 생성된다. 중지는 Ctrl+C를 통해 할 수 있다.

6. React Native

파일:상세 내용 아이콘.svg   자세한 내용은 React Native 문서
번 문단을
부분을
참고하십시오.

7. React를 사용하는 웹사이트/프로그램

8. 강의

9. 논란

Next.js 에서 앞서 지원하는 서버 컴포넌트 등의 일련의 추가 기능 이후로 React의 활동에서 Vercel의 활동이 많은 것 자체를 일각에서 우려를 표하고 있다. 특히, SPA 앱 위주의 개발자들 입장에서는 Next.js 관련 커밋이 일반적인 React 앱을 고려하지 않는다는 비판이 일부 나오고 있는데, 최근 React 19 출시에 앞서 한 커밋을 기점으로 Vercel 기여에 대한 논란에 불이 타오르기 시작했다.
이 커밋의 요지는 <Suspense> 컴포넌트 내 자식을 미리 렌더링하지 않도록 하는 조치인데, 서버 컴포넌트에서는 그대로 수행하지만, SPA 상에서는 자식 컴포넌트들이 순서대로 렌더링하는 현상을 React 인기 비동기 라이브러리인 Tanstack Query 개발자가 발견하여[4] SPA 개발자 입장에서는 당혹스럽거나 분노하는 반응이 상당했다. 결국 React 팀은 별도의 이슈를 만들어 커뮤니티의 의견을 수렴하고 있으며, 해당 커밋에 대한 개선 사항이 나올 때까지 React 19 출시를 보류한다고 밝혔다. 여하튼 이번 사건으로 인해 Vercel 기여에 대해 반발하는 React 개발자가 늘어나는 계기를 만들게 되어 React 차기 버전이 출시되더라도 논란이 사그러들지 않을 전망이다.

10. 여담

현재는 전혀 관련 없는 이야기이지만 초기 라이선스는 특이한 BSD + Patent 라이선스였으며[5], 핵심은 페이스북에 특허 소송을 제기하는 순간 React 사용 권한을 상실한다는 내용이었다. 페이스북 측은 React의 보호를 위해 특별히 만든 라이선스라고 했지만 오히려 페이스북 측이 React를 인질 삼아 React를 핵심으로 개발한 서비스의 특허를 무단으로 사용하기 위함이라는 의혹까지 생겨났을 정도였으니. 때문에 아파치 재단에서는 아예 React 라이선스가 적용된 소스 코드의 사용을 금지한다고 발표했으며 오픈 소스 생태계에서 배제되는 사건이 발생했었다. 이후 지금의 MIT 라이선스로 리라이선싱되면서 사건은 종료.

전자정부표준프레임워크의 차기 베타 버전과 함께 샘플 프로젝트를 공개적으로 제공하는데, 그중 프론트엔드 샘플 프로젝트가 바로 이 리액트다. 비록 샘플일 뿐이었지만, 이게 프론트엔드 표준으로 착각하는 이들이 늘어나기 시작했고, 정부에 납품하는 신생 업체들이 트랜드에 따른다는 이유로 프론트엔드에 리액트를 채택하는 경우가 늘어나, 일부 정부 사이트에 리액트 도입이 실제로 늘어나는 효과가 일어났다. 물론 시스템 통합으로 가면 다들 예상했듯 달라지기는커녕 오히려 기술이 뒤로 가는 경향이 있다.


[1] xml 문법 [2] 이 부분이 의외로 큰 차이가 있는 게, 객체의 프로퍼티를 읽을 때 Optional chaining을 사용해서 객체 a의 프로퍼티 b를 a?.b로 안전하게 불러올 수 있다. 해당 기능이 지원되지 않는 Angular Vue.js는 a && a.b 같이 상위 객체의 null 여부를 일일이 검증해야 한다. [3] 업데이트 시 뜨는 알림창과 오픈 소스 라이선스 열람으로 알 수 있다 [4] 관련 블로그 글 링크 [5] BSD 라이선스 자체는 문제가 없다. 괜히 상당량의 오픈 소스가 BSD 아니면 MIT인 게 아니다.