컴포넌트를 사용하여
사용자 인터페이스 만들기
React를 사용하면 컴포넌트라 불리는 조각들을 사용하여 사용자 인터페이스를 만들 수 있습니다. Thumbnail, LikeButton, 그리고 Video 같은 컴포넌트를 만들어 보세요. 그런 다음 전체 화면, 페이지 및 앱에서 이들을 결합할 수 있습니다.
혼자서 작업하든, 수천 명의 다른 개발자와 함께 작업하든, React를 사용하는 느낌은 동일합니다. 개인, 팀, 조직에서 작성한 컴포넌트를 원활하게 결합할 수 있도록 설계하였습니다.
코드와 마크업으로
컴포넌트 작성하기
React 컴포넌트는 자바스크립트 함수입니다. 조건부로 내용을 표시하려면 if 문을 사용할 수 있습니다. 목록을 표시하려면 배열에 map()을 사용할 수 있습니다. React를 배우는 것은 프로그래밍을 배우는 것입니다.
VideoList.js
function VideoList({ videos, emptyHeading }) {
const count = videos.length;
let heading = emptyHeading;
if (count > 0) {
const noun = count > 1 ? 'Videos' : 'Video';
heading = count + ' ' + noun;
}
return (
<section>
<h2>{heading}</h2>
{videos.map(video =>
<Video key={video.id} video={video} />
)}
</section>
);
}이 마크업 구문을 JSX라 부릅니다. 이것은 React에 의해서 대중화된 자바스크립트 구문의 확장입니다. JSX 마크업을 관련된 렌더링 로직과 가까이 두면, React 컴포넌트를 쉽게 만들고 관리하고 삭제할 수 있습니다.
필요한 곳에
상호작용 요소 추가하기
React 컴포넌트는 데이터를 받고 화면에 표시할 내용을 반환합니다. 사용자가 입력란에 입력하는 것과 같이 상호작용에 응답하여 새 데이터를 전달할 수 있습니다. 그런 다음 React는 새 데이터와 일치하도록 화면을 업데이트합니다.
SearchableVideoList.js
import { useState } from 'react';
function SearchableVideoList({ videos }) {
const [searchText, setSearchText] = useState('');
const foundVideos = filterVideos(videos, searchText);
return (
<>
<SearchInput
value={searchText}
onChange={newText => setSearchText(newText)} />
<VideoList
videos={foundVideos}
emptyHeading={`No matches for “${searchText}”`} />
</>
);
}전체 페이지를 React로 빌드할 필요는 없습니다. React를 기존 HTML 페이지에 추가하고, 페이지 어디에서나 상호작용하는 React 컴포넌트를 렌더링할 수 있습니다.
프레임워크를 통해
풀스택으로 만들기
React는 라이브러리입니다. 컴포넌트를 조합할 수 있도록 도와���지만, 라우팅이나 데이터를 가져오는 방법을 규정하지는 않습니다. React로 완전한 앱을 만들려면, Next.js 또는 Remix 같은 풀스택 React 프레임워크를 추천합니다.
confs/[slug].js
import { db } from './database.js';
import { Suspense } from 'react';
async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}
async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}19 Videos
React는 아키텍처이기도 합니다. 이를 구현하는 프레임워크는 서버에서 실행되는 비동기 컴포넌트 혹은 빌드 중에 실행되는 비동기 컴포넌트에서 데이터를 가져올 수 있도록 합니다. 파일이나 데이터베이스에서 데이터를 읽고, 이를 상호작용하는 컴포넌트에 전달할 수 있습니다.
모든 플랫폼에서 사용하기
사람들은 다양한 이유로 웹과 네이티브 앱을 좋아합니다. React는 동일한 기술을 사용하여 웹 앱과 네이티브 앱을 모두 만들 수 있습니다. 각 플랫폼의 장점을 활용하여 모든 플랫폼에서 적합한 인터페이스를 구현할 수 있습니다.
웹에 충실하기
사람들은 웹 앱이 빠르게 로드되길 기대합니다. 서버에서 React를 사용하면 데이터를 가져오는 동안 HTML을 스트리밍하여 자바스크립트 코드가 로드되기 전에 남은 내용을 점진적으로 채울 수 있습니다. 클라이언트에서 React는 표준 웹 API를 사용하여 렌더링 중에도 UI가 반응하도록 유지할 수 있습니다.
진정한 네이티브에서 사용하기
사람들은 네이티브Native 앱이 해당 플랫폼의 모습과 느낌을 갖기를 기대합니다. React Native와 Expo를 사용하면 React를 통해 Android, iOS 등을 위한 앱을 빌드할 수 있습니다. UI가 진정한 네이티브이기 때문에 네이티브처럼 보이고 느껴집니다. 이것은 웹 뷰Web View가 아닙니다. React 컴포넌트들은 실제 Android, iOS 플랫폼에서 제공하는 뷰View를 렌더링합니다.
React를 사용하면 웹 및 네이티브 개발자가 될 수 있습니다. 사용자 경험의 저하 없이 여러 플랫폼에 출시할 수 있습니다. 조직에서는 플랫폼 간의 격차를 줄이고, 기능을 완전히 소유하는 팀을 구성할 수 있습니다.
새로운 기능에 맞춰
업그레이드 하기
React는 변화에 신중하게 접근합니다. 모든 React 커밋은 10억명 이상의 사용자가 있는 비즈니스의 크리티컬한 영역에서 테스트를 진행합니다. Meta에서는 10만 개 이상의 React 컴포넌트가 모든 마이그레이션 전략을 검증합니다.
React 팀은 항상 React를 개선하는 방법을 연구합니다. 몇 년이 걸리는 연구도 있습니다. React는 연구 아이디어를 제품에 적용하는 데에 높은 기준을 가지고 있습니다. 검증된 접근 방식만이 React 일부가 됩니다.
수백만 명이 있는 커뮤니티
여러분은 혼자가 아닙니다. 전세계의 200만 명이 넘는 개발자들이 React 문서를 매달 방문합니다. React는 사람들과 팀이 동의할 수 있는 것입니다.
이것이 바로 React가 단순한 라이브러리, 아키텍처, 혹은 생태계 그 이상인 이유입니다. React는 바로 커뮤니티입니다. 도움을 요청하고, 기회를 찾고, 새로운 친구를 만날 수 있는 곳입니다. 개발자와 디자이너, 초보자와 전문가, 연구원과 예술가, 교사와 학생을 만날 수 있습니다. 배경은 모두 다를 수 있지만, React를 통해 함께 사용자 인터페이스를 만들 수 있습니다.