React 시작하기

이글에서는 React를 처음 시도해보시는 분들을 위한 글이다.

대학생때 React, ReactNative를 이용해서 팀플을 했지만 졸업하고 군대를 가고나서는 다 까먹어버림...

찾아보니 버전도 많이 바껴있고 업데이트하고 조치하는데만 2일 걸렸다는 함정;;

가고싶어하는 회사에서도 React를 사용한다고 하니 나도 공부할 겸 저 처럼 처음 시도해보시는 분들을 위한 글입니다.

 

React 사용 전 시스템 버전 확인

Ubuntu 버전. 20.04.6 LTS를 사용하고 있다.

nodejs, npm  버전

위 그림에서 처럼 글쓴이는 Ubuntu 20.04.06 LTS, NodeJs 18.15.0, npm 9.5.0을 사용하고 있다.

대학생때도 그렇고 다시 시작하는 지금도 그렇고 가장 시간을 많이 쓰는 곳 중 하나가 버전 환경을 맞추는거 같다.

처음에는 ubuntu 18.04 LTS를 사용하고 npm은 5.버전, nodeJS는 12.버전을 사용하고 있었는데 React 페이지를 보니 사용해야하는 버전이 달라진거 같았다.

출처 React 공식 홈페이지

사진에서 처럼 Node 14.0.0, npm 5.6 이상을 사용하라고 나와있다. 무시하고 진행하면 당연히 오류로 진행이 안된다..

겨우 Node 18.15.0, npm 9.5.0으로 업데이트하고나서 진행을 하려고하는데 우분투 18.04 LTS에서는 지원하지 않는다고 해서 Ubuntu 20.04 LTS로 업데이트도 하고 왔습니다.. 블럭되고 여러 실패가 있었으나 이 글을 읽으시는 분들은 미리 업데이트를 잘하시길 바래요..

 

React 프로젝트 폴더 만들기

이제 필요한 버전들도 설치가 되었으니 React 프로젝트 폴더를 만들어보자.

터미널에서 프로젝트 폴더를 만들고 싶은 위치로 이동한 다음 아래 명령어를 입력하면 된다.

npx create-react-app [폴더 이름]

React 프로젝트 폴더가 만들어지고 있는 과정

React 프로젝트 폴더가 완성된 모습

프로젝트 폴더가 완성이되면 위 사진과 같은 화면이 나온다.

React 실행하기

프로젝트 폴더가 완성되고 난 뒤 마지막 2줄을 보면 우리가 만든 프로젝트 폴더로 이동한 다음 npm start를 입력해주면 된다고한다.

잘 모르겠지만 우선 해보자.

npm start 실행한 결과

오... 뭔지 모르겠는데 터미널에는 "Compiled successfully!" 라는 문구가 나오고 화면에 React 문양이 빙글빙글 돌고 있는 것으로 보아 실행에 성공한거 같다.

근데 우리는 어떤 코드도 입력하지 않았는데 프로젝트 폴더가 만들어지자 마자 이런 결과물이 나왔을까??

 

test-react/src/App.js 코드

test-react/src/App.js 코드를 보면 사진과 같이 나와있다.

아직 저 코드들이 이해가 안가도 된다. 처음하는데 이런거 어떻게 다 알아..

그런데 HTML, CSS, JavaScript 조금만 해본 사람이면 아 App.js 파일에서 작성된 요소들이 실행된거구나 라고 알 것이다.

우리는 앞으로 App.js를 수정하면서 코드를 작성하면 결과물을 확인할 수 있다.

 

test-react/src/index.js 코드

index.js 파일을 열어보니 위에서 본 App.js 를 import하고 render? 라는 것을 사용하고 있다.

ReactDOM은 뭐고 render은 뭐야... 많이 어렵다.

두려워하지마라. 나도 아직 기억이 가물가물해서 찾아보면서 작성하고있다. 처음부터 배워가면서 해야하고, 중도하차만 하지않으면

여러분들도 React를 다룰 수 있을 것이다.