[react] Hello World

가장 작은 리엑트 예는 다음과 같다:

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

 

페이지에 "Hello, world!"를 보여준다.

 

이 가이드를 어떻게 읽을지

가이드에서, 리엑트 앱의 빌딩 블록: 엘리먼트와 컴포넌트를 사용해볼 것이다. 한 번 이것들을 마스터 하면, 작은 재사용 가능한 조각들로 복잡한 앱을 만들 수 있다.

TIP
이 가이드는 개념을 한단계씩 배우고자 하는 사람들을 위해 디자인 되었다. 만약 해보면서 배우고 싶다면, 실용적인 튜토리얼 파트를 보라. 이 가이드와 튜토리얼은 상호 보완적이다.

리엑트의 개념에 대해 한단계식 배우는 첫 단계이다. 네비게이션 사이드바에서 모든 챕터 리스트를 볼 수 있다. 만약, 모바일로 본다면, 화면의 오른쪽 아래에 있는 버튼을 눌러서 접근할 수 있다.

 

모든 챕터는 이전 챕터에서 소개한 지식을 알고있다고 가정하고 쓰여졌다. 사이드바에 순서대로 챕터를 읽으면 리엑트의 대부분을 학습할 수 있다. 예를 들어, "Introducing JSX" 는 이 다음 챕터이다.

 

지식 수준 가정

리엑트는 자바스크립트 라이브러리이다. 그래서 자바스크립트 언어에 대한 기본적인 이해가 있다고 가정한다. 그래서 만약 자신이 없다면, 자바스크립트 튜토리얼을 통해 지식 수준을 확인하고 오는 것을 추천한다. 그래야 이 가이드를 따라 학습할 수 있다. 30분에서 한시간 정도 걸릴 수도 있지만, 리엑트와 자바스크립트를 동시에 학습하는 것처럼 느낄 필요가 없다.

Note
이 가이드는 예제에 이따금 최신 자바스크립트 문법을 사용한다. 만약 최근 몇년간 자바스크립트를 사용하지 않았다면, 이 세가지 포인트가 최신 문법을 요약해 줄 것이다.
1. let 과 const 구문으로 변수를 선언한다. 리엑트  문서에서, 이것들을 var와 동일하게 여기면 된다.
2. JavaScript classes를 정의하기 위해 class 키워드를 사용한다. 기억해 둬야할 두가지는, 첫 째, 객체와는 다른다. class 메소드 선언 사이에 컴마를 둘 필요가 없다. 둘 째, 다른 언어의 클래스들과 다르게, 자바스크립트에서 메소드의 this의 값은 그 메소드가 어떻게 호출되냐에 달려있다.
3. 화살표 함수를 정의하기 위해 => 를 사용한다. 일반적인 함수와 비슷하나, 더 짧다. 예를 들어, x => x * 2 는 function(x) {return x * 2 } 와 동일하다. 중요한 것은, 화살표 함수는 스스로 this값을 갖지 않는다는 것이다. 그래서, 화살표 함수는 바깥 함수에 정의된 this 값을 보존하면서 핸들링 할 수 있다.

이제 시작해보자!