React란 무엇인가요?

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 1번째.

React는 사용자 인터페이스를 구축하기 위한 세계에서 가장 인기 있는 라이브러리입니다. Facebook, Netflix, Airbnb: 여러분이 매일 사용하는 웹의 상호작용 요소들은 React로 구축되어 있습니다.

핵심 아이디어는 간단합니다. 하나의 거대한 페이지를 작성하는 대신, 컴포넌트라고 하는 작고 재사용 가능한 조각을 만듭니다. 버튼은 컴포넌트입니다. 프로필 카드는 컴포넌트입니다. 전체 페이지는 just 컴포넌트 안의 컴포넌트일 뿐입니다.

컴포넌트는 전혀 무서운 것이 아닙니다. JavaScript 화면에 표시되어야 하는 것을 반환하는 function입니다:

function App() {
    return <h1>Hello, React!</h1>;
}

JavaScript 안에 있는 HTML처럼 보이는 것은 JSX라고 합니다. 이를 사용하면 로직이 있는 바로 그곳에서 화면을 설명할 수 있습니다. React는 component가 return하는 내용을 가져와 실제 페이지를 동기화된 상태로 유지합니다. 원하는 what을 설명하면 React가 브라우저를 업데이트하는 how를 알아냅니다.

이 과정에서는 작은 React 앱의 주요 component인 App.jsx를 편집합니다. 오른쪽의 미리보기에는 입력하는 대로 앱이 실시간으로 표시됩니다. 무언가를 만들어 봅시다.

챌린지

초급

여기 여러분을 위해 이미 작성된 첫 번째 React component가 있습니다.

할 일:

App.jsx을 읽어 보세요. 이것은 JSX를 returns하는 function입니다.
Run 버튼을 누르세요.
오른쪽의 미리보기에 component가 반환한 내용이 render되는 것을 확인하세요.

이것이 React loop의 전부입니다. component는 JSX를 returns하고, React는 그것을 화면에 표시합니다. 다음 lesson부터는 여러분이 직접 JSX를 작성합니다.

직접 해보기

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>