리액트 (소프트웨어)

리액트(React, React.js 또는 ReactJS)는 자유-오픈 소스 프론트엔드 자바스크립트 라이브러리로, 컴포넌트 기반의 사용자 인터페이스를 "원활하게" 구축하는 것을 목표로 한다. 이 라이브러리는 메타 (이전 페이스북)와 개별 개발자 및 기업 커뮤니티에 의해 유지보수된다. 스택 오버플로 개발자 설문조사에 따르면, 리액트는 가장 일반적으로 사용되는 웹 기술 중 하나이다.

리액트는 싱글 페이지, 모바일 또는 서버 렌더링 애플리케이션을 Next.js 및 리액트 라우터(React Router)와 같은 프레임워크와 함께 개발하는 데 사용될 수 있다. 리액트는 사용자 인터페이스와 DOM에 컴포넌트를 렌더링하는 것에만 관여하기 때문에, 리액트 애플리케이션은 종종 라우팅 및 기타 클라이언트 측 기능에 라이브러리에 의존한다. 리액트의 주요 장점은 페이지의 변경된 부분만 다시 렌더링하여, 변경되지 않은 DOM 요소의 불필요한 재렌더링을 피한다는 점이다. 리액트는 모든 웹사이트의 약 6%에서 사용되는 것으로 추정된다.

 기능 
 선언형 
리액트는 선언형 프로그래밍 패러다임을 따른다. 개발자는 애플리케이션의 각 상태에 대한 뷰를 설계하며, 데이터가 변경되면 리액트가 컴포넌트를 업데이트하고 렌더링한다. 이는 명령형 프로그래밍과 대조된다.

 컴포넌트 
리액트 코드는 컴포넌트라고 불리는 엔티티로 구성된다. 이 컴포넌트들은 모듈화되어 재사용될 수 있다. 리액트 애플리케이션은 일반적으로 여러 계층의 컴포넌트로 구성된다. 컴포넌트는 React DOM 라이브러리를 사용하여 DOM의 루트 요소에 렌더링된다. 컴포넌트를 렌더링할 때, 값은 props("properties"의 약어)를 통해 컴포넌트 간에 전달된다. 컴포넌트 내부에 있는 값은 해당 컴포넌트의 상태라고 불린다.

리액트에서 컴포넌트를 선언하는 두 가지 주요 방법은 함수 컴포넌트와 클래스 컴포넌트를 통하는 것이다. React v16.8부터는 함수 컴포넌트 사용이 권장되는 방법이다.

 함수 컴포넌트 
React Conf 2018에서 발표되어 React v16.8부터 사용 가능한 함수 컴포넌트는 단일 "props" 인수를 받고 JSX를 반환하는 함수로 선언된다. 함수 컴포넌트는 useState Hook을 사용하여 내부 상태를 사용할 수 있다.

 React Hooks 
2019년 2월 16일, 리액트 16.8이 공개 출시되었고, 이 버전에서 React Hooks가 도입되었다. Hooks는 개발자가 함수 컴포넌트에서 React 상태 및 생명주기 기능에 "연결"할 수 있도록 하는 함수이다. 특히 Hooks는 클래스 내부에서는 작동하지 않으며, 개발자가 클래스 없이 React의 더 많은 기능을 사용할 수 있도록 한다.

리액트는 useState, useContext, useReducer, useMemo 및 useEffect와 같은 여러 내장 Hooks를 제공한다. 다른 Hooks는 Hooks API 레퍼런스에 문서화되어 있다. 가장 일반적으로 사용되는 useState와 useEffect는 각각 상태 및 부작용을 제어한다.

 Hooks의 규칙 
Hooks가 의존하는 특징적인 코드 패턴을 설명하는 두 가지 Hooks 규칙이 있다.

 "Hooks는 최상위 레벨에서만 호출" — Hooks가 각 렌더링마다 동일한 순서로 호출되도록 루프, 조건문 또는 중첩된 문장 내부에서 Hooks를 호출하지 마세요.
 "Hooks는 React 함수에서만 호출" — 상태를 가진 로직이 컴포넌트와 함께 유지되도록 일반 자바스크립트 함수에서 Hooks를 호출하지 마세요.

이러한 규칙은 런타임에 강제할 수 없지만, 린터와 같은 코드 분석 도구를 구성하여 개발 중에 많은 실수를 감지할 수 있다. 이 규칙은 Hooks 사용 및 다른 Hooks를 호출할 수 있는 사용자 정의 Hooks 구현 모두에 적용된다.

 서버 컴포넌트 
React Server Components (RSC)는 서버에서만 실행되는 함수 컴포넌트이다. 이 개념은 "Data Fetching with Server Components"라는 강연에서 처음 소개되었다. 서버 사이드 렌더링과 유사한 개념이지만, RSC는 하이드레이션이 발생하지 않으므로 클라이언트에 해당 자바스크립트를 보내지 않는다. 결과적으로 Hooks에 접근할 수 없다. 그러나 이들은 비동기 함수일 수 있으므로 비동기 작업을 직접 수행할 수 있다.

async function MyComponent() {
 const message = await fetchMessageFromDb();

 return (
 
Message: {message}

 );
}

현재 서버 컴포넌트는 Next.js와 함께 가장 쉽게 사용할 수 있다. Next.js를 사용하면 서버와 클라이언트(브라우저) 모두를 위한 컴포넌트를 작성할 수 있다. 서버 렌더링된 컴포넌트가 브라우저에 의해 수신되면, 브라우저의 React가 제어권을 넘겨받아 가상 DOM을 생성하고 이벤트 핸들러를 연결한다. 이를 하이드레이션이라고 한다.

 클래스 컴포넌트 
클래스 컴포넌트는 ES6 클래스를 사용하여 선언된다. 함수 컴포넌트와 동일하게 동작하지만, 상태 및 생명주기 이벤트를 관리하기 위해 Hooks를 사용하는 대신, React.Component 기반 클래스의 생명주기 메서드를 사용한다.
class ParentComponent extends React.Component {
 state = { color: 'green' };
 render() {
 return (
 

 );
 }
}2019년 2월 React 16.8에서 React Hooks가 도입되면서 개발자들은 함수 컴포넌트 내에서 상태 및 생명주기 동작을 관리할 수 있게 되었고, 클래스 컴포넌트에 대한 의존도를 줄였다.

이러한 경향은 함수형 프로그래밍과 모듈식 디자인으로의 광범위한 산업 움직임과 일치한다. React가 계속 발전함에 따라, 개발자들은 새로운 애플리케이션을 구축하거나 기존 애플리케이션을 리팩토링할 때 함수형 컴포넌트와 React Hooks의 이점을 고려하는 것이 중요하다.

 라우팅 
리액트 자체는 라우팅에 대한 내장 지원을 제공하지 않는다. 리액트는 주로 사용자 인터페이스를 구축하기 위한 라이브러리이며, 즉시 사용 가능한 완전한 라우팅 솔루션을 포함하지 않는다. 리액트 라우터와 같은 서드파티 라이브러리를 사용하여 React 애플리케이션에서 라우팅을 처리할 수 있다. 이를 통해 개발자는 React 친화적인 방식으로 경로를 정의하고, 탐색을 관리하며, URL 변경을 처리할 수 있다.

섬네일|실제 DOM을 구현하는 데 사용되는 가상 DOM이 있다

 가상 DOM 
또 다른 주목할 만한 기능은 가상 문서 객체 모델 또는 가상 DOM의 사용이다. 리액트는 브라우저 DOM과 유사한 인메모리 데이터 구조를 생성한다. 컴포넌트가 렌더링될 때마다 결과는 가상 DOM과 비교된다. 그런 다음 계산된 차이점만으로 브라우저에 표시된 DOM을 효율적으로 업데이트한다. 이 과정을 재조정(reconciliation)이라고 부른다. 이를 통해 프로그래머는 전체 페이지가 변경될 때마다 렌더링되는 것처럼 코드를 작성할 수 있으며, React는 실제로 변경되는 컴포넌트만 렌더링한다. 이러한 선택적 렌더링은 주요 성능 향상을 제공한다.

 업데이트 
동일한 컴포넌트와 대상에 대해 ReactDOM.render가 다시 호출되면, React는 가상 DOM에 새로운 UI 상태를 나타내고 라이브 DOM의 어떤 부분(있는 경우)을 변경해야 하는지 결정한다.

alt=realDOM에 대한 업데이트는 virtualDOM에 종속된다|섬네일|가상 DOM은 실제 DOM을 실시간으로 업데이트한다.

 생명주기 메서드 
클래스 기반 컴포넌트의 생명주기 메서드는 컴포넌트의 생명 주기 중 특정 지점에서 코드 실행을 허용하는 후킹 형태를 사용한다.
 ShouldComponentUpdate는 렌더링이 필요하지 않을 경우 false를 반환하여 개발자가 불필요한 컴포넌트 재렌더링을 방지할 수 있도록 한다.
 componentDidMount는 컴포넌트가 "마운트"된 후(컴포넌트가 사용자 인터페이스에 생성되었을 때, 종종 DOM 노드와 연결됨으로써) 한 번 호출된다. 이는 일반적으로 API를 통해 원격 소스에서 데이터를 로드하는 것을 트리거하는 데 사용된다.
 componentDidUpdate는 업데이트가 발생한 직후 호출된다.
 componentWillUnmount는 컴포넌트가 파괴되거나 "언마운트"되기 직전에 호출된다. 이는 컴포넌트가 언마운트되더라도 단순히 제거되지 않을 리소스 집약적인 종속성을 (예: 컴포넌트와 관련된 setInterval() 인스턴스를 제거하거나, 컴포넌트의 존재로 인해 "document"에 설정된 "이벤트 리스너"를 제거) 정리하는 데 일반적으로 사용된다.
 render는 가장 중요한 생명주기 메서드이며, 어떤 컴포넌트에서든 유일하게 필수적인 메서드이다. 이는 일반적으로 컴포넌트의 상태가 업데이트될 때마다 호출되며, 이는 사용자 인터페이스에 반영되어야 한다.

 JSX 

JSX 또는 JavaScript XML은 자바스크립트 언어 구문의 확장이다. HTML과 유사한 모습을 가지고 있으며, JSX는 많은 개발자들에게 익숙한 구문을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공한다. React 컴포넌트는 일반적으로 JSX를 사용하여 작성되지만 (순수 자바스크립트로도 컴포넌트를 작성할 수 있음), 필수는 아니다. 컴파일하는 동안 JSX는 자바스크립트 코드로 변환된다. JSX는 페이스북이 PHP를 위해 만든 또 다른 확장 구문인 XHP와 유사하다.

JSX 코드의 예:
function Example() {
 // Declare a new state variable, which we'll call "count"
 const [count, setCount] = useState(0);

 return (
 

You clicked {count} times

 setCount(count + 1)}>
 Click me
 

 );
}

 HTML을 넘어서는 아키텍처 
리액트의 기본 아키텍처는 브라우저에서 HTML을 렌더링하는 것을 넘어 확장된다. 예를 들어, 페이스북은 
 태그에 렌더링되는 동적 차트를 가지고 있으며, 넷플릭스와 페이팔은 서버와 클라이언트 모두에서 동일한 HTML을 렌더링하기 위해 유니버설 로딩을 사용한다. 리액트는 또한 리액트 네이티브를 사용하여 안드로이드 및 iOS용 네이티브 앱을 개발하는 데 사용될 수 있다.

 서버 사이드 렌더링 
서버 사이드 렌더링 (SSR)은 클라이언트 측 자바스크립트 애플리케이션을 브라우저가 아닌 서버에서 렌더링하는 프로세스를 의미한다. 이는 특히 느린 연결이나 장치를 사용하는 사용자에게 애플리케이션의 성능을 향상시킬 수 있다.

SSR을 사용하면 클라이언트에 전송되는 초기 HTML에 애플리케이션의 완전히 렌더링된 UI가 포함된다. 이를 통해 클라이언트의 브라우저는 자바스크립트가 다운로드되어 실행되기 전까지 기다리지 않고 즉시 UI를 표시할 수 있다.

리액트는 SSR을 지원하며, 개발자가 서버에서 리액트 컴포넌트를 렌더링하고 그 결과를 HTML로 클라이언트에 보낼 수 있도록 한다. 이는 애플리케이션의 성능 향상뿐만 아니라 검색 엔진 최적화 목적에도 유용하다.

 일반적인 관용구 
리액트는 완전한 애플리케이션 라이브러리를 제공하려고 시도하지 않는다. 이는 사용자 인터페이스 구축을 위해 특별히 설계되었으므로 일부 개발자가 애플리케이션 구축에 필수적이라고 생각할 수 있는 많은 도구를 포함하지 않는다. 이를 통해 개발자는 네트워크 접근 또는 로컬 데이터 저장과 같은 작업을 수행하기 위해 선호하는 라이브러리를 선택할 수 있다. 라이브러리가 성숙해짐에 따라 일반적인 사용 패턴이 나타났다.

 단방향 데이터 흐름 

리액트의 단방향 데이터 흐름 개념(이는 AngularJS의 양방향 흐름과 대조될 수 있음)을 지원하기 위해, 플럭스 아키텍처는 인기 있는 모델-뷰-컨트롤러 아키텍처의 대안으로 개발되었다. 플럭스는 중앙 디스패처를 통해 스토어로 전송되는 액션을 특징으로 하며, 스토어의 변경 사항은 뷰로 다시 전파된다. 리액트와 함께 사용될 때, 이 전파는 컴포넌트 속성을 통해 이루어진다. 플럭스는 개념화 이후 Redux 및 MobX와 같은 라이브러리에 의해 대체되었다.

플럭스는 옵서버 패턴의 변형으로 간주될 수 있다.

플럭스 아키텍처 하의 React 컴포넌트는 전달된 어떤 props도 직접 수정해서는 안 되지만, 디스패처에 의해 스토어를 수정하도록 전송되는 액션을 생성하는 콜백 함수를 전달받아야 한다. 액션은 발생한 일을 설명하는 책임을 지닌 객체이다. 예를 들어, 한 사용자가 다른 사용자를 "팔로우"하는 것을 설명하는 액션은 사용자 ID, 대상 사용자 ID, 그리고 USER_FOLLOWED_ANOTHER_USER 유형을 포함할 수 있다. 모델로 생각될 수 있는 스토어는 디스패처로부터 받은 액션에 응답하여 자신을 변경할 수 있다.

이 패턴은 때때로 "속성은 아래로 흐르고, 액션은 위로 흐른다"고 표현된다. 플럭스 생성 이후 많은 플럭스 구현이 만들어졌으며, 아마도 가장 잘 알려진 것은 단일 스토어를 특징으로 하는 Redux일 것이다. 이는 종종 단일 진실 공급원이라고 불린다.

2019년 2월, useReducer가 16.8 릴리스에서 React Hook으로 도입되었다. 이는 Redux와 일치하는 API를 제공하여 개발자가 컴포넌트 상태에 로컬인 Redux와 유사한 스토어를 생성할 수 있도록 한다.

 역사 
리액트는 메타의 소프트웨어 엔지니어 조던 워크(Jordan Walke)가 만들었으며, 그는 "F-Bolt"라는 프로토타입을 개발한 후 나중에 "FaxJS"로 이름을 변경했다. 이 초기 버전은 조던 워크의 깃허브 저장소에 문서화되어 있다. 이 프로젝트에 영향을 준 것 중에는 PHP용 HTML 컴포넌트 라이브러리인 XHP가 있다.

리액트는 2011년 페이스북의 뉴스 피드에 처음 배포되었고, 이어서 2012년 인스타그램에 통합되었다. 2013년 5월, JSConf US에서 이 프로젝트는 공식적으로 오픈 소스화되어, 그 채택과 성장에 중요한 전환점이 되었다.

리액트 네이티브는 React를 사용하여 안드로이드, iOS, UWP 개발을 가능하게 하며, 2015년 2월 페이스북의 React Conf에서 발표되었고 2015년 3월에 오픈 소스화되었다.

2017년 4월 18일, 페이스북은 React의 이전 렌더링 알고리즘인 Stack과 달리, 새로운 내부 렌더링 알고리즘 세트인 React Fiber를 발표했다. React Fiber는 React 라이브러리의 향후 개선 및 기능 개발의 기반이 될 예정이었다. React 프로그래밍의 실제 구문은 변경되지 않으며, 구문이 실행되는 방식만 변경되었다. React의 이전 렌더링 시스템인 Stack은 동적 변경에 대한 시스템의 초점이 이해되지 않던 시기에 개발되었다. Stack은 복잡한 애니메이션을 한 번에 모두 처리하려고 시도하는 등 느리게 그렸다. Fiber는 애니메이션을 여러 프레임에 걸쳐 분산될 수 있는 세그먼트로 분해한다. 마찬가지로, 페이지의 구조도 개별적으로 유지하고 업데이트할 수 있는 세그먼트로 분해될 수 있다. 자바스크립트 함수와 가상 DOM 객체는 "파이버(fibers)"라고 불리며, 각각 개별적으로 작동하고 업데이트될 수 있어 화면 렌더링을 더 부드럽게 만든다.

2017년 9월 26일, React 16.0이 공개 출시되었다. React 16.0은 "에러 바운더리"를 도입했는데, 이는 자식 트리 내의 어떤 자바스크립트 오류라도 잡아내고 앱이 중단되는 대신 폴백 UI를 렌더링하는 새로운 컴포넌트 유형이다.

2020년 10월 20일, React 팀은 React 개발자 대면 API에 큰 변경 사항 없이 첫 주요 릴리스인 React v17.0을 출시했다.

2022년 3월 29일, React 18이 출시되었으며, 새로운 동시성 렌더러, 자동 배치 및 Suspense를 통한 서버 사이드 렌더링 지원이 도입되었다. React 18은 인터넷 익스플로러 11에 대한 지원을 중단했다.

2024년 12월 5일, React 19가 출시되었다. 이 릴리스는 비동기 함수를 사용하여 상태 업데이트를 수동으로 보류 상태, 오류 및 낙관적 업데이트를 처리할 필요 없이 간소화하는 Actions를 도입했다. React 19는 또한 서버 컴포넌트 지원 및 향상된 정적 사이트 생성을 포함한다.

2025년 10월, 메타는 React, 리액트 네이티브, 및 JSX (JavaScript XML)를 리눅스 재단의 일부인 새로운 React Foundation에 기부할 것이라고 발표했다.

2025년 11월 29일, 원격 코드 실행을 허용하는 CVE-2025-55182 (react2shell) 취약점이 보고되었다. 이는 CVSS 최고 점수인 10.0을 받았다. 버전 19.0.1, 19.1.2, 19.2.1에서 수정 사항이 도입되었다.

2025년 12월 11일, React 팀은 React Server Components에서 추가적인 취약점을 공개했다: 서비스 거부 문제 (CVE-2025-55184 및 CVE-2025-67779, CVSS 7.5) 및 소스 코드 노출 문제 (CVE-2025-55183, CVSS 5.3). 수정 사항은 버전 19.0.3, 19.1.4, 19.2.3으로 백포트되었다.

 라이선스 
2013년 5월 React의 초기 공개 릴리스는 아파치 라이선스 2.0을 사용했다. 2014년 10월, React 0.12.00은 이를 3-절 BSD 라이선스로 대체하고 소프트웨어와 관련된 페이스북 특허 사용을 허용하는 별도의 PATENTS 텍스트 파일을 추가했다.여기에 부여된 라이선스는 자동으로 그리고 통지 없이 다음의 경우 종료된다: (a) 페이스북 또는 그 자회사 또는 계열사의 특허를 직간접적으로, 또는 기여적으로 침해하거나 침해를 유도한다고 주장하는 어떠한 청구 (소송 제기, 주장 또는 기타 행동을 포함)를 하는 자에 대해: (i) 해당 청구가 소프트웨어와 관련이 있든 없든 페이스북 또는 그 자회사 또는 계열사에 의한 경우, (ii) 해당 청구가 페이스북 또는 그 자회사 또는 계열사의 소프트웨어, 제품 또는 서비스로부터 전체 또는 일부 발생하는 경우, 해당 청구가 소프트웨어와 관련이 있든 없든 어떤 당사자에 의한 경우, 또는 (iii) 소프트웨어와 관련된 페이스북의 특허 청구의 어떠한 권리가 유효하지 않거나 집행 불가능하다고 주장하는 어떤 당사자에 의한 경우.이러한 비전통적인 조항은 React 사용자 커뮤니티에서 약간의 논란과 논쟁을 불러일으켰는데, 이는 페이스북이 많은 시나리오에서 라이선스를 철회할 수 있는 권한을 부여하는 것으로 해석될 수 있었기 때문이다. 예를 들어, 페이스북이 라이선시를 고소하여 블로그나 다른 곳에 행동을 게시하도록 "다른 행동"을 취하도록 유도하는 경우 등이다. 많은 사람들이 페이스북이 해지 조항을 불공정하게 악용할 수 있거나, React를 제품에 통합하는 것이 스타트업 회사의 미래 인수를 복잡하게 만들 수 있다는 우려를 표명했다.

커뮤니티 피드백을 바탕으로 페이스북은 2015년 4월에 특허 허가서를 덜 모호하고 더 관대하게 업데이트했다.

여기에 부여된 라이선스는 귀하(또는 귀하의 자회사, 계열사 또는 대리인)가 직접 또는 간접적으로, 또는 직접적인 재정적 이익을 가지고 다음의 경우 특허 주장을 시작하는 경우 자동으로 그리고 통지 없이 종료됩니다: (i) 페이스북 또는 그 자회사 또는 계열사를 상대로 하는 경우, (ii) 해당 특허 주장이 페이스북 또는 그 자회사 또는 계열사의 소프트웨어, 기술, 제품 또는 서비스로부터 전체 또는 일부 발생하는 경우 어떤 당사자를 상대로 하는 경우, 또는 (iii) 소프트웨어와 관련된 어떤 당사자를 상대로 하는 경우. [...] "특허 주장"은 교차 청구 또는 반소를 포함하여 특허의 직접적, 간접적, 또는 기여적 침해 또는 침해 유도를 주장하는 모든 소송 또는 기타 행동을 의미합니다.

아파치 소프트웨어 재단은 이 라이선스 협정을 자체 라이선스 정책과 호환되지 않는 것으로 간주했는데, 그 이유는 "우리 소프트웨어의 다운스트림 소비자에게 라이선스 제공자가 아닌 라이선시에게 유리하도록 불균형하게 위험을 전가하여, 보편적 기증자라는 아파치 법적 정책을 위반한다"는 점과 "아파치 라이선스 2.0에 있는 것의 하위 집합이 아니며, 아파치 라이선스 2.0으로 재라이선스할 수 없다"는 점 때문이었다. 2017년 8월, 페이스북은 아파치 재단의 다운스트림 우려를 일축하고 라이선스 재고를 거부했다. 다음 달, 워드프레스는 Gutenberg와 Calypso 프로젝트를 React에서 다른 것으로 전환하기로 결정했다.

2017년 9월 23일, 페이스북은 다음 주에 Flow, Jest, React, Immutable.js를 표준 MIT 허가서로 재라이선스할 것이라고 발표했다. 회사는 React가 "웹을 위한 광범위한 오픈 소스 소프트웨어 생태계의 기반"이며 "비기술적인 이유로 전진을 방해하고 싶지 않다"고 밝혔다.

2017년 9월 26일, React 16.0.0이 MIT 라이선스로 출시되었다. MIT 라이선스 변경은 React 15.6.2와 함께 15.x 릴리스 라인에도 백포트되었다.

 같이 보기 
 빌드 자동화
 리덕스

 각주 

 관련 문헌 

 
 
 
 
 
 
 

 외부 링크 
 

분류:자바스크립트 라이브러리
분류:Ajax
분류:2015년 소프트웨어
분류:페이스북 소프트웨어
분류:MIT 라이선스 소프트웨어