리액트 시작하기 1 - 설치 및 기본 예제 분석

이 글은 기본적으로 HTML/CSS/Javascript의 기본은 알고 있다는 전제하에 작성되어 있습니다.
잘은 몰라도 되지만 어느 정도 기본 개념은 알고는 있어야 이해하기 쉽습니다.

💾node js 설치

React를 사용하기 위해서는 npm이 필요하다.

npm을 설치하기 위해 node.js 공식 홈페이지(nodejs.org)에 접속해서 설치 파일을 받아주자.

LTS가 붙어 있는 버전과 Current 버전이 있는데 특별한 목적이 있지 않는 한 둘 중 아무거나 받아준다.
(LTS는 안정적인 버전이고 Current는 가장 최신 버전이지만 LTS에 비해 안정적이진 않다.)

IDE 설치

통합 개발 환경(Integrated Development Environment, IDE)의 뜻으로 개발 시 사용되는 툴을 말한다.
이 글에서는 VSCode로 진행을 할 예정이며, 사용하는 IDE가 따로 있다면 사용해도 좋다.

공식 사이트(code.visualstudio.com)에서 다운 받아 설치해주자.

💾React 설치

터미널을 이용해서 React 설치를 진행할거다.

VSCode의 경우 실행 후 <ctrl+`>를 눌러 터미널을 열어 주자.

🤼‍♂️npx vs npm

React를 설치 시 npx와 npm을 이용한 방식이 있다.

npx는 npm과 다른 점이 실행하고자 하는 명령어를 일회성으로 잠깐 설치했다가 실행 후 지운다.

공간 절약 + 항상 최신 유지한다는 장점이 있지만,
여러 번 앱을 생성해야 한다면 매번 다시 받아야 하는 단점이 있다.

🧨npx - 일회성 설치

일회성으로 create-react-app이라는 모듈을 설치했다가 실행하고 지우는 방식이다.

//test-app은 생성하고자 하는 app의 이름이다
$ npx create-react-app test-app

🧨npm - 일반 설치

맥에서는 문제없이 확인했다.
개인적으로는 윈도우 환경에서는 환경변수 등록이 필요한지 create-react-app을 설치 후 명령어가 실행이 되지 않아 npx로 실행했다.

$ npm install -g create-react-app
$ create-react-app test-app

 

🚀기본 프로젝트 실행

아래와 같이 명령어를 실행하면 기본 예제 코드를 실행할 수 있다.

브라우저가 자동으로 실행되면서 앱을 확인할 수 있다.

$ npx create-react-app test-app
$ cd test-app
$ npm start

기본 예제 코드 실행 화면

 

🏃🏼‍♀️종료 방법

종료하는 방법은 위 명령어를 실행한 터미널에서 <ctrl+c>을 누르고 y를 입력하면 실행을 종료할 수 있다.

앱 종료

 

🔍기본 프로젝트 살펴보기

create-react-app <프로젝트명>
명령어로 기본 프로젝트를 생성하면 여러 가지 파일들이 생성된 것을 볼 수 있다.

파일이 너무 많아 당황스럽다면 겁먹지 말고 아래와 같이 필요 없는 파일들을 제거해보자.

훨씬 깔끔해진 파일 목록

훨씬 가벼워 보인다.

나머지 파일들을 살펴보면

node_moudules:
React에 필요한 모듈들이 npm 명령어로 설치되는 곳. 모듈들이 저장되어 있다고 생각하면 된다.

package.json:
프로젝트에 설치된 모듈들 버전과 이름들이 작성되어 있다.

* package-lock.json - npm을 사용하면
* yarn.lock - yarn을 사용하면
위와 같이 lock이 붙어있는 파일들도 있는데 package.json보다 정확히 어떤 버전이 설치되어있는지가 작성되어 있다.

리액트를 공부할 때는 이런 게 있구나 정도만 알아두면 되고, 깊게는 필요할 때 찾아보면 된다.

이제 간단히 코드를 작성해보며 React에 대해 알아보자.

 

🚀Hello World

기본적으로 작성되어 있는 불필요한 군더더기들은 제거하고 이제 Hello World를 띄워보는 작업을 해보자.

React가 function 기반 혹은 Class 기반으로 코드를 구현할 수 있는데, 우리는 class 기반으로 작성할 예정이다.

index.js와 App.js를 아래 코드와 같이 수정해서 실행시켜보자.

Hello World 코드

결과 화면

📑코드 내용 확인

Hello World! 을 띄우도록 간단하게 코드를 작성했는데, 어떠한 의미들을 갖고 있는지 알아보자.

📄index.js

최초 진입 시 불려지는 파일이다.

• 5~10 line: ReactDOM.render(컴포넌트, 위치)
  첫 번째 인자에는 일반적인 HTML의 태그처럼 생긴 Component들을 'root'라는 id를 갖고 있는 element에 띄워 달라는 의미이다.
• 6, 8 line: <React.StrictMode>
  코드의 잠재적인 문제점을 파악하기 위한 도구이다. 렌더링은 되지 않아 보이는 UI가 없으며, 미리 잠재적인 문제점들을 경고해주도록 도와준다.
• 7 line: <App />
  App.js에서 만든 Component를 띄운다.

 

📄App.js

App이라는 Component가 구현되어 있다. App은 class이며 Component를 상속받는다. App Component를 사용하면 <div>Hello World!</div> HTML 태그를 렌더링 하게 된다.

 

☝🏼Component란?

그럼 예제 코드에서 만든 Component가 무엇인가?

Componet는 너무 길고 복잡한 HTML 코드를 모듈화 할 수 있도록 만들어주는 최소 단위를 말한다.

우리는 Hello World!를 띄우는 간단한 예제를 통해 3줄짜리 <div> 태그를 <App />이라는 하나의 Component로 바꾸는 간단한 일을 했다.

하지만 실제 개발 시에는 몇십 줄, 몇백 줄 또는 몇천 줄 이상의 코드 작성하는데, 이를 모듈화 해서 복잡성을 줄여 개발을 편하게 만들어 준다.

Component를 이용한 모듈화를 통해 가독성 / 재사용성 / 유지 보수성을 높일 수 있는 장점이 있다.

 

React는 Component 뿐만 아니라 여러 가지 장점들이 있다. 나머지 장점들은 다음 글들을 통해 알아보자