React 입문

요즘은 아니고 한참되긴 했지만 Vue.js 만큼이나 React가 인기라서 이거 안하고 넘어갈 수는 없겠다 싶어서 카테고리 하나 늘리고 React를 시작해보기로 결심했다.

 

https://reactjs-kr.firebaseapp.com 에 접속하면 바로 보이는 장면

https://reactjs-kr.firebaseapp.com/ 에 접속해보면 React가 우리를 반겨줄거다. 물론 반겨준다고 했지 React가 쉬울거라곤 하지 않았다.

 

요즘 라이브러리들이 다들 똑같이 "우리 라이브러리는 배우기가 매우 쉬워요. 자 보세요. Hello,World를 화면에 표시해보는 것부터 시작해볼까요?"라고 하지만 중반 이후 부터는 뭔 소리를 하고 있는지 알 도리가 없는 요상한 말을 하면서 "자 이제 이것도 해보시지?" 하는 것 마냥 우리를 조롱하는 것만 같지만 어쩔 수 없다. 우린 Hello, World에 속아넘갔으니까.

 

뭔소린진 잘 모르겠지만 아무튼 일단 React를 시작하려면 기본적으로 Node.js가 설치되어있어야한다.

Node.js 설치에 대한 내용이라면 이 블로그 어딘가에 있을거다. 분명 있다.(https://blog.thereis.xyz/89 여기에 있다)

잘 읽어보고 Node.js 설치를 마치고 돌아오도록 하자.

 

Node.js를 설치했다면 npm 명령어를 사용할 수 있게 된다. 이제 이를 통하여 create-react-app이라는 패키지를 설치할 수 있게 되었다.

 

$ npm install -g create-react-app

콘솔창에 이렇게 입력해주면 알아서 리엑트 어플리케이션을 만들기 위한 기본 패키지를 자동으로 설치해줄거다.

(콘솔창을 어떻게 띄우는지 모르겠다면 https://blog.thereis.xyz/90 에 가서 보면 있으니까 배워와라)

 

이제 적당한 위치에 가서 아래의 명령어를 입력하자.

적당한 위치란? 폴더의 이름에 "한글"이 들어가있지 않은 "영문"으로만 경로를 만들 수 있고 경로에 있는 폴더이름 중 대괄호가 들어가있어서서도 안되며 콤마(.), 하이픈(-), 언더 스코어(_)만 사용된 샘플프로젝트를 만들어도 괜찮은 폴더를 이야기한다.

$ create-react-app hello-react

그러면 알아서 hello-react라는 폴더를 만들고 그 안에 React 프로젝트를 위한 패키지를 자동으로 설치한 다음 바로 클라이언트 서버를 띄울 수 있도록 셋팅을 해준다. hello-react 폴더에가서 npm start라고 입력해보자.

 

이런 메시지들을 뿜어내다가 뭔가 완료되면 브라우저를 띄워주는 것을 확인할 수 있다.

 

일단 React 프로젝트를 만드는데 성공했다. 이제 우리의 목표인 Hello, World를 표시해보도록 하자.

 

그러기 위해서는 src의 모든 소스를 지우고 index.js 파일만 하나 만들어주자.

 

그리고 코드는 아래와 같이 작성해보도록 하자.

 

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

이렇게 작성하면 브라우저에는 아래와 같이 표시가 될거다.

 

이제 Hello, world를 화면에 표시해봤으니까.. 다음엔 페이지 이동에 대해서 알아볼까.

 

오늘은 여기까지다. 다음 시간엔 Router에 대해서 알아보자.

안녕