이 글은 기본적으로 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! 을 띄우도록 간단하게 코드를 작성했는데, 어떠한 의미들을 갖고 있는지 알아보자.
📄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 뿐만 아니라 여러 가지 장점들이 있다. 나머지 장점들은 다음 글들을 통해 알아보자
'개발 > React' 카테고리의 다른 글
| Apexcharts 리액트 차트 그리기 (1) | 2021.10.19 |
|---|---|
| 리액트 투두앱 간단하게 만들기 - 10분만에 (0) | 2021.10.16 |
| 리액트 시작하기 2 - Component로 기본 끝내기 (0) | 2021.10.16 |