생활코딩 이고잉 님의 리액트 강의를 부스트코스를 통해서 수강하고 있다.
component란
리액트에서 사용자 정의 태그를 작성하는 것을 component 라고 한다.
이렇게 component를 사용할 경우
- 가독성이 좋아진다.
- 재사용성이 좋아진다.
- 유지보수하기 좋다.
가독성의 경우,
복잡한 코드를 따로 component로 저장하고 실제 코드에선 component만 작성하면 되기 때문에 훨씬 좋다.
재사용성의 경우,
component를 한번 정의해두면 다른 사이트에서도 사용할 수 있기 때문에 좋다.
유지보수의 경우, 만약 component에 오류가 있어서 변경할 경우 그 component를 사용하는 모든 웹도 동시에 실시간으로 업데이트가 된다. 유지보수에 매우 좋음!
react 개발환경 구축하기
리액트 홈페이지를 살펴보면 리액트의 사용법에 대한 설명이 있다!
online Playgrounds : 온라인 상에서 리액트를 구현할 수 있음. 코드 샌드박스 등...
Add React to a Website : 처음부터 끝까지 리액트로 웹사이트를 만드는 게 아니라 부분적으로 필요할 때 사용. 처음에 시작할 땐 쉽지만 뒤로 갈수록 직접 개발 환경을 구축해야 해서 초급자에겐 까다롭다고 한다.
Create a New React App: "Tool Chain" 이라고 해서 리액트로 개발을 할 때 목표 달성을 위해 필요한 여러 가지 개발환경, 도구 등을 모아서 제공해주는 도구이다.
그래서 이번에 사용할 것은 Toolchains 중 Create React App이다.
홈페이지로 들어가면 소스코드가 모아져있는 깃헙이 나오고 사용하는 방법이 나와있다.
이번 리액트 강의에서는 Create React App을 컴퓨터에 직접 설치할 것이다. 이때 필요한 것이 npm 프로그램!
npm이란?
node.js를 기반으로 만들어진 여러 앱들을 명령어를 환경에서 설치할 수 있도록 하는 것
말하자면...node.js 계의 앱스토어, 구글 플레이
create React App을 설치하는 방법은 두 가지가 있는데 하나는 npx를 이용하는 것이고 하나는 npm으로 설치하는 것이다.
npm으로 설치하는 방법을 알아보자.
node.js를 설치한 후,
window키 + 알파벳 r을 눌러서 cdm을 입력하거나,
윈도우 검색창에 cdm을 입력해서 cdm을 연다.
npm -v
를 입력했을 때 숫자(버전)가 나온다면 성공적으로 설치된 것.
npm install -g create-react-app
을 입력하면 설치가 진행된다. 만약 권한이 없어서 EACCES 에러가 뜬다면
sudo npm install -g create-react-app
을 해보자.
설치가 완료된 후에 설치가 잘 되었는지 확인해보려면
create-react-app -V
를 입력했을 때 숫자가 나오면(버전) 성공적으로 설치된 것!
그렇다면 npx와 npm의 차이는 무엇일까?
npm이 프로그램을 설치하는 것이라면 ,
npx는 프로그램을 임시로 설치해서 딱 한 번만 실행시키고 지우는 것이다.
npx의 장점은 불필요한 공간을 낭비하지 않고, 실행할 때마다 다운로드를 새로 하기 때문에 최신 버전을 계속 사용할 수 있다는 것이다. 그래서 공식에서 권장하는 방법은 npx.
이제 create react app을 사용할 수 있는 환경을 마련할 것이다.
리액트 개발환경이 될 폴더를 하나 만들어주고 그 디렉토리가 create react app에 의해서 개발환경이 될 수 있도록 할 것이다.
다시 cdm을 열어서
cdm에서 cd(디렉토리를 바꾼다는 의미)를 입력하고 아까 만든 폴더를 드래그하면 그 폴더의 주소가 나온다.
ex) cd C:\Users\Happy\Desktop\react-app
엔터를 치고,
create-react-app . (. 은 현재 디렉토리라는 뜻)
을 입력하면 그 폴더가 리액트 개발환경으로 바뀐다.
설치가 완료되면 준비 끝!
VScode로 실습환경을 구축을 마무리해보자.
VScode를 실행한 후 만들어둔 react 개발환경 디렉토리를 연다.
그리고 터미널을 실행해서
npm run start
를 입력하면 하나의 새로운 브라우저가 뜬다.
이 브라우저는 리액트에서 제공하는 샘플 어플리케이션이다.
그리고 터미널에
이런 게 뜨는데 Local과 On your Network는 개발할 때 개발되는 모습을 확인할 수 있는 주소이다.
다시 종료하고 싶다면?
터미널 창에서 컨트롤 + 알파벳 C를 누르면 된다.
'개발 공부 > React' 카테고리의 다른 글
| React #6 [update, delete] (0) | 2022.08.09 |
|---|---|
| React #5 [props와 state, create, push와 concat] (0) | 2022.07.16 |
| React #4 [event 만들기, bind, setState] (0) | 2022.07.13 |
| React #3 [component 만들기,React Developer Tools, props, state, key] (0) | 2022.07.13 |
| react#2 [샘플 어플리케이션 수정해서 코딩하기, 배포하기] (0) | 2022.07.13 |
