작품2013
리액트
React
리액트(React, React.js 또는 ReactJS)는 자유-오픈 소스 프론트엔드 자바스크립트 라이브러리로, 컴포넌트 기반의 사용자 인터페이스를 "원활하게" 구축하는 것을 목표로 한다. 이 라이브러리는 메타 와 개별 개발자 및 기업 커뮤니티에 의해 유지보수된다. 스택 오버플로 개발자 설문조사에 따르면, 리액트는 가장…
작품2013
React
리액트(React, React.js 또는 ReactJS)는 자유-오픈 소스 프론트엔드 자바스크립트 라이브러리로, 컴포넌트 기반의 사용자 인터페이스를 "원활하게" 구축하는 것을 목표로 한다. 이 라이브러리는 메타 와 개별 개발자 및 기업 커뮤니티에 의해 유지보수된다. 스택 오버플로 개발자 설문조사에 따르면, 리액트는 가장…
이 항목이 포함된 사건 파일에서 정보와 관계를 함께 살펴보세요.
이 항목이 포함된 사건 파일이 아직 없습니다.
이 항목으로 조사 시작하기이 항목과 이어지는 작품이나 사람을 살펴보고 있어요.
리액트
연결된 것을 찾고 있어요.
리액트(React, React.js 또는 ReactJS)는 자유-오픈 소스 프론트엔드 자바스크립트 라이브러리로, 컴포넌트 기반의 사용자 인터페이스를 "원활하게" 구축하는 것을 목표로 한다. 이 라이브러리는 메타 (이전 페이스북)와 개별 개발자 및 기업 커뮤니티에 의해 유지보수된다.
리액트(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을 사용하여 내부 상태를 사용할 수 있다.
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는 React 함수에서만 호출" — 상태를 가진 로직이 컴포넌트와 함께 유지되도록 일반 자바스크립트 함수에서 Hooks를 호출하지 마세요.
이러한 규칙은 런타임에 강제할 수 없지만, 린터와 같은 코드 분석 도구를 구성하여 개발 중에 많은 실수를 감지할 수 있다. 이 규칙은 Hooks 사용 및 다른 Hooks를 호출할 수 있는 사용자 정의 Hooks 구현 모두에 적용된다.
React Server Components (RSC)는 서버에서만 실행되는 함수 컴포넌트이다. 이 개념은 "Data Fetching with Server Components"라는 강연에서 처음 소개되었다. 서버 사이드 렌더링과 유사한 개념이지만, RSC는 하이드레이션이 발생하지 않으므로 클라이언트에 해당 자바스크립트를 보내지 않는다. 결과적으로 Hooks에 접근할 수 없다. 그러나 이들은 비동기 함수일 수 있으므로 비동기 작업을 직접 수행할 수 있다.
현재 서버 컴포넌트는 Next.js와 함께 가장 쉽게 사용할 수 있다. Next.js를 사용하면 서버와 클라이언트(브라우저) 모두를 위한 컴포넌트를 작성할 수 있다. 서버 렌더링된 컴포넌트가 브라우저에 의해 수신되면, 브라우저의 React가 제어권을 넘겨받아 가상 DOM을 생성하고 이벤트 핸들러를 연결한다. 이를 하이드레이션이라고 한다.
클래스 컴포넌트는 ES6 클래스를 사용하여 선언된다. 함수 컴포넌트와 동일하게 동작하지만, 상태 및 생명주기 이벤트를 관리하기 위해 Hooks를 사용하는 대신, React.Component 기반 클래스의 생명주기 메서드를 사용한다.
2019년 2월 React 16.8에서 React Hooks가 도입되면서 개발자들은 함수 컴포넌트 내에서 상태 및 생명주기 동작을 관리할 수 있게 되었고, 클래스 컴포넌트에 대한 의존도를 줄였다.
이러한 경향은 함수형 프로그래밍과 모듈식 디자인으로의 광범위한 산업 움직임과 일치한다. React가 계속 발전함에 따라, 개발자들은 새로운 애플리케이션을 구축하거나 기존 애플리케이션을 리팩토링할 때 함수형 컴포넌트와 React Hooks의 이점을 고려하는 것이 중요하다.
리액트 자체는 라우팅에 대한 내장 지원을 제공하지 않는다. 리액트는 주로 사용자 인터페이스를 구축하기 위한 라이브러리이며, 즉시 사용 가능한 완전한 라우팅 솔루션을 포함하지 않는다. 리액트 라우터와 같은 서드파티 라이브러리를 사용하여 React 애플리케이션에서 라우팅을 처리할 수 있다. 이를 통해 개발자는 React 친화적인 방식으로 경로를 정의하고, 탐색을 관리하며, URL 변경을 처리할 수 있다.
또 다른 주목할 만한 기능은 가상 문서 객체 모델 또는 가상 DOM의 사용이다. 리액트는 브라우저 DOM과 유사한 인메모리 데이터 구조를 생성한다. 컴포넌트가 렌더링될 때마다 결과는 가상 DOM과 비교된다. 그런 다음 계산된 차이점만으로 브라우저에 표시된 DOM을 효율적으로 업데이트한다. 이 과정을 재조정(reconciliation)이라고 부른다. 이를 통해 프로그래머는 전체 페이지가 변경될 때마다 렌더링되는 것처럼 코드를 작성할 수 있으며, React는 실제로 변경되는 컴포넌트만 렌더링한다. 이러한 선택적 렌더링은 주요 성능 향상을 제공한다.
동일한 컴포넌트와 대상에 대해 ReactDOM.render가 다시 호출되면, React는 가상 DOM에 새로운 UI 상태를 나타내고 라이브 DOM의 어떤 부분(있는 경우)을 변경해야 하는지 결정한다.
클래스 기반 컴포넌트의 생명주기 메서드는 컴포넌트의 생명 주기 중 특정 지점에서 코드 실행을 허용하는 후킹 형태를 사용한다.
ShouldComponentUpdate는 렌더링이 필요하지 않을 경우 false를 반환하여 개발자가 불필요한 컴포넌트 재렌더링을 방지할 수 있도록 한다.
componentDidMount는 컴포넌트가 "마운트"된 후(컴포넌트가 사용자 인터페이스에 생성되었을 때, 종종 DOM 노드와 연결됨으로써) 한 번 호출된다. 이는 일반적으로 API를 통해 원격 소스에서 데이터를 로드하는 것을 트리거하는 데 사용된다.
componentDidUpdate는 업데이트가 발생한 직후 호출된다.
componentWillUnmount는 컴포넌트가 파괴되거나 "언마운트"되기 직전에 호출된다. 이는 컴포넌트가 언마운트되더라도 단순히 제거되지 않을 리소스 집약적인 종속성을 (예: 컴포넌트와 관련된 setInterval() 인스턴스를 제거하거나, 컴포넌트의 존재로 인해 "document"에 설정된 "이벤트 리스너"를 제거) 정리하는 데 일반적으로 사용된다.
render는 가장 중요한 생명주기 메서드이며, 어떤 컴포넌트에서든 유일하게 필수적인 메서드이다. 이는 일반적으로 컴포넌트의 상태가 업데이트될 때마다 호출되며, 이는 사용자 인터페이스에 반영되어야 한다.
JSX 또는 JavaScript XML은 자바스크립트 언어 구문의 확장이다. HTML과 유사한 모습을 가지고 있으며, JSX는 많은 개발자들에게 익숙한 구문을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공한다. React 컴포넌트는 일반적으로 JSX를 사용하여 작성되지만 (순수 자바스크립트로도 컴포넌트를 작성할 수 있음), 필수는 아니다. 컴파일하는 동안 JSX는 자바스크립트 코드로 변환된다. JSX는 페이스북이 PHP를 위해 만든 또 다른 확장 구문인 XHP와 유사하다.
JSX 코드의 예:
리액트의 기본 아키텍처는 브라우저에서 HTML을 렌더링하는 것을 넘어 확장된다. 예를 들어, 페이스북은 <canvas> 태그에 렌더링되는 동적 차트를 가지고 있으며, 넷플릭스와 페이팔은 서버와 클라이언트 모두에서 동일한 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년 페이스북의
출처: 리액트 (소프트웨어) (CC BY-SA)
확인된 구조화 정보, 사용자 의견, AI가 찾은 관계를 구분해 표시해요.
아직 댓글이 없어요. 먼저 한마디 남겨 보세요.