Hello World

가장 단순한 React 예시는 다음과 같이 생겼습니다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

위 코드는 페이지에 “Hello, world!”라는 제목을 보여줍니다.

CodePen에서 실행하기

온라인 에디터로 열어보려면 상단의 링크를 클릭하세요. 코드를 자유롭게 수정하고, 결과가 어떻게 변하는지 관찰해보세요. 이 안내서의 거의 모든 페이지에서는 이런 형태로 수정 가능한 예시를 함께 제공합니다.

이 안내서를 읽는 방법

이 안내서에서 우리는 엘리먼트와 컴포넌트라고 불리는 React 앱의 구성 블록들에 대해 살펴볼 것입니다. 이들을 숙달하고 나면 재사용 가능한 조각들로부터 복잡한 앱을 만들 수도 있습니다.

팁

이 안내서는 개념들을 단계적으로 배우길 원하는 사람들을 대상으로 합니다. 실습을 통해 배우길 원한다면, 실전 튜토리얼을 확인하세요. 이 안내서와 실전 튜토리얼은 상호보완적인 내용을 담고 있습니다.

이 페이지는 React 주요 개념에 대한 단계별 안내서의 첫 번째 장입니다. 내비게이션 사이드바에서 모든 장의 목록을 확인할 수 있습니다. 모바일 기기에서 읽고 있다면, 화면 오른쪽 하단 끝에 있는 버튼을 클릭하여 내비게이션에 접근할 수 있습니다.

이 안내서의 모든 장들은 이전 장의 내용을 토대로 작성되었습니다. 사이드바에 보이는 순서대로 “주요 개념” 안내서의 장들을 읽으면 React의 거의 모든 내용을 익힐 수 있습니다. “JSX 소개”가 바로 이 다음 장입니다.

지식수준 가정

React는 JavaScript 라이브러리이며, 따라서 JavaScript 언어에 대한 기본적인 이해가 필요합니다. 아직 자신이 없다면, JavaScript 튜토리얼 살펴보기를 통해 자신의 지식수준을 확인해보길 권장드리며 이를 통해 길을 잃지 않고 이 안내서를 잘 따라올 수 있게 될 것입니다. 30분에서 1시간 가량 소요되지만, 결과적으로 더 이상 React와 JavaScript를 동시에 배운다는 느낌을 받지 않을 수 있습니다.

주의

이 가이드에서는 가끔 최신 JavaScript 문법을 예시에 사용합니다. 지난 몇 년간 JavaScript로 작업하지 않았다면, 이 3가지 사항을 통해 대부분의 것을 얻을 수 있습니다.

시작해봅시다!

아래로 계속 스크롤하면, 푸터 바로 앞에서 다음 장으로 연결된 링크를 찾을 수 있습니다.