리액트 개요

리액트는 Facebook에서 개발한 자바스크립트 라이브러리로, 특히 싱글 페이지 애플리케이션을 위해 널리 사용됩니다. 애플리케이션의 각 상태에 대한 간단한 뷰를 설계하고, 리액트는 데이터 변경 시 효율적으로 업데이트하고 적절한 컴포넌트를 렌더링합니다.

리액트 알아보기

리액트의 주요 특징을 간단히 살펴보겠습니다:

리액트 자체는 라우팅이나 전역 상태 관리와 같은 기능을 포함하지 않는 컴포저블한 사용자 인터페이스를 구축하기 위한 라이브러리입니다. 그러나 리액트는 Redux¹와 같은 추가적인 라이브러리를 사용하여 상태 관리 또는 React-Router를 사용하여 라우팅과 함께 자주 사용됩니다.

리액트는 성능, 컴포넌트의 재사용성 및 넓은 생태계로 인해 개발자들 사이에서 매우 인기가 있습니다. 이는 Facebook과 개인 개발자, 기업의 커뮤니티에 의해 유지되고 있습니다.

리액트 특징

컴포넌트로부터 사용자 인터페이스 생성하기

리액트는 Thumbnail, LikeButton, Video와 같은 개별적인 조각들을 컴포넌트라고 부르며, 이들을 조합하여 전체 화면, 페이지, 앱을 만들 수 있도록 해줍니다. 자신만의 리액트 컴포넌트를 생성하고 이들을 결합하여 사용자 인터페이스를 구성할 수 있습니다.

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>
  );
}

혼자 작업하든 수천 명의 다른 개발자와 함께 작업하든, 리액트를 사용하면 동일한 느낌을 받을 수 있습니다. 리액트는 독립된 사람들, 팀 및 조직이 작성한 컴포넌트를 원활하게 결합할 수 있도록 설계되었습니다. 이를 통해 다른 사람들이 작성한 컴포넌트를 자유롭게 조합할 수 있습니다.

코드와 마크업을 사용하여 컴포넌트 작성하기

리액트 컴포넌트는 자바스크립트 함수입니다. 어떤 내용을 조건부로 표시하고 싶을 때는 if 문을 사용하세요. 목록을 표시하고 싶을 때는 array map()을 사용해보세요. 리액트를 배우는 것은 프로그래밍을 배우는 것과 동일합니다.

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라고 불립니다. 이는 리액트에 의해 인기를 얻은 자바스크립트 구문 확장입니다. JSX 마크업을 관련 렌더링 로직 근처에 배치하는 것은 리액트 컴포넌트를 쉽게 생성, 유지 및 삭제할 수 있도록 해줍니다.

필요한 곳마다 상호작용성(interactivity)을 추가하세요.

리액트 컴포넌트는 데이터를 받아들이고 화면에 표시해야 할 내용을 반환합니다. 사용자가 입력란에 입력하는 등의 상호작용에 대응하여 새로운 데이터를 컴포넌트에 전달할 수 있습니다. 그러면 리액트는 화면을 새로운 데이터와 일치하도록 업데이트합니다.

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}”`} />
    </>
  );
}

페이지 전체를 리액트로 구축할 필요는 없습니다. 기존의 HTML 페이지에 리액트를 추가하고, 인터랙티브한 리액트 컴포넌트를 어디에서든 렌더링할 수 있습니다.

Next.js와 리액트

Next.js는 리액트 위에 구축된 웹 개발 프레임워크입니다. 이를 통해 개발자는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 및 다양한 최적화 기능을 쉽게 활용할 수 있습니다.