공식 사이트에 들어가면 조심하셔야 됩니다.
영어도 영어지만 자칫하면 길을 잃을 수 있습니다. 곳곳에 링크들이 클릭을 유도하죠. 한 번 빠지면 다시 돌아 나오는 길은 쉽지 않습니다. 영포자가 미국에서 길을 잃는 게 이런 느낌일까요? 길 잃지 않게 조심하시고, 천천히 시작해 보시죠.
처음 살펴볼 내용은 'Getting Started(시작하기)' 부분입니다. 본격적인 공부에 앞서 전체적인 내용을 사알~짝 핥아보는 부분이랄까요? 주소는 아래와 같습니다.
https://reactjs.org/docs/getting-started.html
이 페이지의 내용은 크게 다섯 가지로 이뤄집니다.
- Try React(써봐라)
- Learn React(공부해라)
- Staying Informed(정보유지)
- Versioned Documentation(버전 관리되는 문서)
- Something Missing?(누락된 무엇??)
동사가 앞에 나오면 명령문이니까, 이 정도 해석이 맞...겠죠??
내용을 한번 살펴볼게요. 써봐라, 공부해라, 버전 관리되는 문서는 내용이 대략 유추되는데, 정보 유지, 누락된 무엇??은 무슨 내용일지 모르겠네요. 들어가 보겠습니다.
Try React(써봐라)
리액트는 컴포넌트 방식으로 프로그램을 만들도록 디자인되었습니다. 컴포넌트는 레고 블록이라고 생각하시면 돼요. 블록을 쌓아서 자동차도 만들고, 실제 집과 같은 크기의 모형물도 만들죠. 기본 구조는 블록입니다.
이와 동일하게 리액트는 작은 컴포넌트를 만들고, 그것을 여러 개 쌓아서 웹페이지나 애플리케이션을 만듭니다. 물론 레고가 사각형, 삼각형, 원형 등 여러 개의 모형이 있듯이, 컴포넌트도 버튼, 드롭박스, 그리드 등 여러 가지 종류가 있을 겁니다. 중복해서 사용하는 부분을 컴포넌트로 만들어서 복사해서 쓸 수 있다면, 생산성이 엄청나게 올라갈 겁니다.
우리도 작게 시작해 보겠습니다.
1. 온라인 놀이터
프로그램을 개발할 때 개발환경을 설정하는 것만큼 어려운 것이 있을까요? 리액트가 간단하다고 해도 '리액트 프로그램 실행시켜봐라'라는 요청이 들어오면 당황할 수밖에 없을 겁니다. 그런 장벽을 낮추고자 리액트 선구자들이 이미 환경을 만들어놨습니다.
CodePen, CodeSandbox, Stackblitz 와 같은 사이트에서는 리액트 코드를 온라인에서 실행해 볼 수 있습니다. 프로그램을 설치하고, 환경을 설정할 필요가 없습니다. 그저 브라우저로 화면을 열고, 코드를 치고 실행해보는 겁니다.
위쪽에 코드를 타이핑하면 아래쪽에 결과가 나타납니다. 아래쪽 'Hello world!'가 결과입니다.
VSC(Visual Studio Code) 같이 선호하는 텍스트 에디터가 있으신 분들은 download this HTML file에서 파일을 다운로드하여, 로컬에서 수정, 실행해 볼 수도 있습니다.
2. 웹사이트에 리액트 추가
add React to an HTML page in one minute.
여기 갈림길이 하나 나왔습니다. '1분 안에 html 페이지에 리액트 추가하기'라는 링크인데, 클릭을 할까 말까 고민해봅니다. 과연 1분 안에 끝낼 수 있을 것인가? 여기가 혹시 시간과 공간의 방은 아닐런지...
그래도 언젠가는 한번 들어가야 될 방이라 생각하고 들어가 봅니다.
1분 안에 html 페이지에 리액트 추가하기
웹브라우저와 시간입니다. 한번 따라가 보겠습니다.
step 1. 리액트가 들어갈 container 추가
step 2. 리액트 스크립트 태그 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div> <----------- 리액트가 들어갈 컨테이너
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script> <----------- 내가 만든 리액트 컴포넌트
</body>
</html>위 코드를 index.html 파일로 저장합니다. 내용을 보시면 'like_button_container'란 id를 가진 div 태그 안에 리액트가 들어갈 겁니다.
step 3. 리액트 컴포넌트 만들기
이제 위에서 봤던 like_button.js 파일을 만들어보겠습니다. 소스를 한번 보죠
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);LikeButton이라는 클래스를 만드는 소스입니다. liked라는 변수의 상태를 이용해서 출력 값을 변경해줍니다.
constructor 부분에서 liked라는 상태 변수를 'false'로 지정합니다. 렌더링을 할 때 render() 함수를 호출해서 이름이 'Like'라고 돼있는 버튼을 하나 만듭니다. 그 버튼에 onClick 이벤트를 설정해서 클릭을 하면 liked 변수의 값을 'true'로 바꿔줍니다. 상태가 변경되면 자동으로 리액트는 렌더링을 수행하는데, 그때 render() 함수가 수행되면서, if (this.state.liked)의 값이 true가 되면서 'You liked this.'라는 문자열을 화면으로 리턴해 출력해 줍니다.
마지막 두줄 중 첫 줄은 컨테이너를 가져와서, 컨테이너에 버튼을 추가해서 보여주는 역할을 합니다.
상태니 렌더링이니 하는 말들이 많이 나오는데, 일단은 대략적인 느낌만 가져가 보죠. 뒤에 가면 그 부분만 하루 종일 하게 될 겁니다.
어쨌든, 이렇게 하면 아래와 같이 프로그램을 실행해 볼 수 있습니다.
폴더에 들어가서 index.html을 클릭하면 아래와 같은 화면이 나타납니다.
Like 버튼을 클릭하면
Like 버튼이 'You liked this.'로 변경된 걸 확인할 수 있습니다.
1분으로는 안될 것 같은데, 어쨌든 '1분 안에 html 페이지에 리액트 추가하기'를 실행해 봤습니다.
3. 새로운 리액트 앱을 만들어라
리액트 프로젝트를 할 때, simple HTML page with script tags 가 최고의 옵션이 된다고 하네요. 여기 들어가는 것도 1분밖에 안 걸린답니다. 들어가 보죠. 들어가 보니 위에 2번 웹사이트에 리액트 추가페이지가 또 나오네요. 같은 내용입니다.
Learn React(리액트를 배워라)
공식 사이트에서 리액트를 배우는 방법은 크게 두 가지로 나눠집니다. 첫째가 이론부터 차근차근 진행하는 방법, 줄째가 몸으로 부딪치는 방법입니다. 이론부터 차근차근하는 방법은 리엑트 콘셉트부터 공부하는 방법입니다. 콘셉트를 알고 공부를 하면 효과가 더 좋겠지만, 보통은 콘셉트만 공부하게 되는 경우가 많죠. 그래서 전 튜토리얼을 이용해, 실행해 가며 익히는 방법을 선호합니다.
- 몸으로 부딪치면서 배우는 걸 좋아한다면, practical tutorial.
- 콘셉트부터 알고 싶다면, guide to main concepts.
여기서는 몇 가지 학습 방법에 대해 이야기합니다.
1. 첫 번째 예제들
리액트 메인화면에 라이브 에디터가 띄워져 있습니다. 거기에 있는 내용을 바꿔보고, 결과가 어떻게 나오는지 살펴보는 것이 도움이 됩니다. React homepage
2. 리액트 초보자들
리액트 문서가 본인의 페이스보다 빠르다고 느껴진다면, this overview of React by Tania Rascia 여기를 한번 살펴보세요. 리액트 콘셉트를 더 자세하고 쉽게 소개하고 있습니다. 내용을 다 살펴봤다면, 다시 이 사이트로 와서 공부하세요.
3. 자바스크립트 리소스
리액트 문서는 자바스크립트 프로그램을 좀 해본 사람을 대상으로 합니다. 전문가일 필요는 없지만 자바스크립트를 모른다면 this JavaScript overview 여기로 가서 자바스크립트를 한번 보고 오는 것도 좋다네요. 30분에서 한 시간 정도면 자신감이 생긴다고 합니다. 1분이라고 말한 자료가 10분쯤 걸렸으니, 30분이면 5시간 정도는 걸리지 않을까요? 자바스크립트를 모르는 분은 한번 보고 오셔도 좋을 것 같습니다.
4. 연습
당신이 하면서 배우는 걸 선호한다면 practical tutorial 에 들어가서 해보세요. 여기엔 리액트로 만들어진 틱-택-토게임이 있습니다. 게임을 만들기 싫어 넘기려고 할지 모르지만 이 게임에 사용된 기술들이 앱들에 사용되는 기초적인 기술이기 때문에, 이 기술들을 마스터하면 리액트에 대한 이해력을 높여 줄 것입니다.
5. 스텝바이스탭 가이드
순서대로 공부하는 방식을 선호한다면 guide to main concepts 에 들어가 보세요. 여기는 리액트 공부를 시작하기에 좋은 장소입니다. 모든 다음 장들은 이전 장들의 지식 위에 만들어져 있기 때문에 따라가면서 놓치는 부분이 없을 겁니다.
6. 리액트에 대한 생각
많은 리액트 사용자는 Thinking in React라는 내용을 신뢰합니다. 한번 읽어보세요.
7. 추천코스
가끔씩 사람들은 공식문서보다 더 도움이 되는 책이나 비디오 코스를 찾습니다. a list of commonly recommended resources 여기 들어가면 정리된 자료들을 볼 수 있습니다.
8. 진보된 콘셉트
메인 콘셉트가 익숙해지고, 리액트를 약간 사용해보고 나면, 더 진보된 토픽들에 흥미를 느끼게 될 것입니다. 이 섹션에서는 파워풀하고, 특별하게 사용되는 context 와 refs 같은 기능들을 소개할 것입니다. 관심 있으신 분은 링크를 클릭해 보세요.
9. API 레퍼런스
이 섹션은 특별한 리액트 API에 대해 좀 더 상세하게 배우기를 원할 때 유용합니다. 예를 들면 React.Component API reference 는 setState()가 어떻게 작업하는지와 라이프사이클 메서드들과 무엇이 다른지를 를 상세하게 알려줍니다.
10. 용어사전과 FAQ
glossary 는 리액트 문서에서 보일 가장 공통적인 단어들을 설명합니다. 그리고 FAQ 섹션은 일반적인 토픽에 대한 짧은 질의응답을 제공합니다.
Staying Informed(정보유지)
React blog 는 리액트 팀의 공식적인 블로그입니다. 릴리즈 노트와 같은 중요한 것들은 가장 먼저 블로그에 포스팅됩니다. @reactjs account 트위터를 팔로워 할 수도 있습니다. 그리고 모든 릴리즈들에 대해 디테일한 정보를 CHANGELOG.md file in the React repository에서 찾을 수 있습니다.
Versioned Documentation(버전 관리되는 문서)
이 문서는 항상 리액트 최신 버전을 반영합니다. 오래된 버전의 문서는 separate page 에서 찾을 수 있습니다. 지나간 버전은 스냅샷되고, 업데이트되지 않습니다.
Something Missing?(잃어버린 것?)
이 문서에서 어떤 것을 잃었거나, 어떤 부분이 혼란스럽다면 file an issue for the documentation repository 에 개선책을 제시하십시오. @reactjs account 에 트윗을 하는 것도 좋습니다.
시작하는 페이지 치고는 많은 내용이 들어가 있습니다. 생각보다 꼼꼼하게 챙겨주네요. 영문을 해석하면서 공부를 하다 보니, 그냥 번역기가 되는 것 같습니다. 조금씩 사람이 돼 보도록 하겠습니다.
'IT' 카테고리의 다른 글
| [영어로 배우는 React] MAIN CONCEPTS - 2. JSX 소개 (0) | 2022.03.18 |
|---|---|
| [영어로 배우는 React] Main Concepts - 1. Hello World (0) | 2022.03.17 |
| [영어로 배우는 React]1. 그래서 React가 뭔데? (1) | 2022.03.08 |
| 개발자가 영어를 잘하면 좋은 5가지 이유 (0) | 2022.03.03 |
| [React] React 란? (0) | 2021.08.09 |