logo by @sawaratsuki1004

React

웹 및 사용자 인터페이스를 위한 라이브러리

컴포넌트를 사용하여 사용자 인터페이스 만들기

React를 사용하면 컴포넌트라고 불리는 조각들을 사용하여 사용자 인터페이스를 만들 수 있습니다. Thumbnail, LikeButton, 그리고 Video 같은 컴포넌트를 만들 수 있습니다. 그런 다음 전체 화면, 페이지 및 앱에서 이들을 결합할 수 있습니다.

Video.js

function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}

혼자서 작업하든, 수천 명의 다른 개발자와 함께 작업하든, React를 사용하는 느낌은 동일합니다. 개인, 팀, 조직에서 작성한 컴포넌트를 원활하게 결합할 수 있도록 설계되었습니다.

코드와 마크업으로 컴포넌트 작성하기

React 컴포넌트는 JavaScript 함수입니다. 조건부로 내용을 표시하려면 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에 의해서 대중화된 JavaScript 구문의 확장입니다. 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} />;
}

React는 아키텍처이기도 합니다. 이를 구현하는 프레임워크를 사용하면 서버에서 실행되는 비동기 컴포넌트에서 또는 빌드 도중에 데이터를 가져올 수 있습니다. 파일이나 데이터베이스에서 데이터를 읽고, 이를 상호작용하는 컴포넌트로 전달할 수 있습니다.

모든 플랫폼에서 사용하기

사람들은 다양한 이유로 웹과 네이티브 앱을 좋아합니다. React는 동일한 기술을 사용하여 웹 앱과 네이티브 앱을 모두 만들 수 있습니다. 각 플랫폼에 강점을 활용하여 모든 플랫폼에서 적합한 인터페이스를 구현할 수 있습니다.

example.com

웹에 충실하기

사람들은 웹이 빠르게 로드되길 기대합니다. 서버에서 React를 사용하면 데이터를 가져오는 동안 HTML을 스트리밍하여 JavaScript 코드가 로드되기 전에 남은 내용을 점진적으로 채울 수 있습니다. 클라이언트에서 React는 표준 web API를 사용하여 렌더링 중에도 UI를 반응적으로 유지할 수 있습니다.

12:15 PM

네이티브에서 사용하기

사람들은 네이티브 앱이 플랫폼과 같은 모양처럼 느껴지기를 원합니다. React Native Expo를 사용하면 React를 통하여 Android, iOS 등을 위한 앱을 빌드할 수 있습니다. UI들이 native이기 때문에 진짜 native처럼 보입니다. 이것은 web view가 아닙니다. React 컴포넌트들은 실제 Android, iOS 플랫폼에서 제공하는 view를 렌더링합니다.

React를 사용하면 웹 및 네이티브 개발자가 될 수 있습니다. 사용자 경험의 저하 없이 여러 플랫폼에 출시할 수 있습니다. 조직에서는 플랫폼 간의 격차를 줄이고, 기능을 완전히 소유하는 팀을 구성할 수 있습니다.

새로운 기능이 준비되면 업그레이드 하기

React는 변화에 신중하게 접근합니다. 모든 React 커밋은 10억 명 이상의 사용자가 있는 비즈니스에 크리티컬한 영역에서 테스트 됩니다. Meta에서는 10만 개 이상의 React 컴포넌트가 모든 마이그레이션 전략을 검증합니다.

React 팀은 항상 React를 개선하는 방법을 연구합니다. 몇 년이 걸리는 연구도 있습니다. React는 연구 아이디어를 제품에 적용하는 데에 높은 기준을 가지고 있습니다. 검증된 접근 방식만이 React 일부가 됩니다.

수백만 명이 있는 커뮤니티

여러분은 혼자가 아닙니다. 200만 명이 넘는 개발자들이 React 문서를 매달 방문합니다. React는 사람들과 팀이 동의할 수 있는 것입니다.

People singing karaoke at React Conf
Sunil Pai speaking at React India
A hallway conversation between two people at React Conf
A hallway conversation at React India
Elizabet Oliveira speaking at React Conf
People taking a group selfie at React India
Nat Alison speaking at React Conf
Organizers greeting attendees at React India

이것이 바로 React가 라이브러리를 넘어 아키텍처, 심지어 에코시스템 그 이상인 이유입니다. React는 커뮤니티입니다. 도움을 요청하고, 기회를 찾고, 새로운 친구를 만날 수 있는 곳입니다. 개발자와 디자이너, 초보자와 전문가, 연구원과 예술가, 교사와 학생을 만날 수 있습니다. 모두의 배경은 다를 수 있지만, React를 통해 함께 사용자 인터페이스를 만들 수 있습니다.

logo by @sawaratsuki1004

React 커뮤니티에 오신 것을 환영합니다.

시작하기