1. React 란
<html>
<body>
<Top></TOP>
<SideBar></SideBar>
<Bottom></Bottom>
</body>
</html>위와 같은 html 코드를 보면 실제로 저런 태그는 존재하지 않는다. 따라서 <Top> 태그에는 내용중 Top에 해당하는 내용이, SideBar, Bottom에는 그에 맞는 내용들에 해당하는 엄청 긴 html 코드를 직접 작성해야한다.
그렇게 된다면 코드의 가독성의 가독성이 떨어짐은 물론이고 내용을 수정하고 관리하는 유지보수 작업이 매우 힘들어진다. 만약 위와 같은 태그들이 실제로 존재하고 그 태그 안에 엄청나게 긴 내용들을 packing 하여 나타낼 수만 있다면
유지보수관리 측면에서 코드의 재활용과 효율성이 좋아질 것이다. 이것을 가능하게 해주는 것이 React이다.
사용자 정의 태그를 만들어주는 여러 가지 기술이 있는데 리액트는 그 여러 가지 기술 중 하나이다.
그리고 React에서는 사용자가 정의한 태그를 만든는 것을 Component라고 부른다.
2. create React App으로 개발환경 구축
1) nodejs 설치
npm install -g create-react-appcreate React App을 설치하는 방법은 우선 nodejs를 설치해준다. 그리고 npm 패키지 매니저를 통해
위 명령어를 사용해 설치가 가능하다.
npm에 대해 간단히 설명하면, nodejs에서의 앱스토어와 같은 것이다. 노드 js라는 기술로 만들어진 여러 앱들이 있는데 이런 앱들을 손쉽게 설치할 수 있도록 해주는 도구가 npm 패키지 매니저이다.
2) npm과 npx의 차이점
npm install -g create-react-app
npx install -g create-react-app
npm과 npx의 차이는 npx는 create-react-app을 임시로 설치해서 딱 한번만 실행하고 지우게 된다. 이것의 장점은 컴터 공간을 차지하지 않고 항사 최신 상태의 react를 다운하기 좋다는 장점이 있다.
npm은 -g옵션으로 설치시 내 컴퓨터 어디서든 사용 가능하도록 global 환경으로 create reate app을 설치해준다.
3) 리액트 환경 만들기
create-react-app <디렉토리>nodejs의 create-react-app설치가 끝났다면 이제 리액트를 사용할 준비가 끝났다.
리액트 라이브러를 사용할 프로젝트의 디렉토리 경로로 이동한 한 뒤 위 명령어를 입력하면 create-react-app은 자동으로 해당 프로젝트(디렉토리 파일)을 리액트 라이브러리를 사용하는데 필요한 파일들을 자동으로 설치해주며 그 환경에서 리액트 라이브러리를 사용하면 된다.
우선 위 명령어를 주게 되면 public/index.html 파일이 하나 생성되는데 이 파일은 리액트로 만들어진 하나의 홈페이지로 이 파일을 수정하여 리액트를 사용한 자바스크립트롤 적용해도 좋다. 이 pubilc/index.html 파일을 기반으로 프로젝트를 만들면,
npm run start 명령어(global 명령어)를 사용하면 localhost:3000으로 포트가 개방되고 이 경로로 public/index.html의 내용을 확인해볼 수 있다.
'React 라이브러리' 카테고리의 다른 글
| 7. 랜더링 최적화: shoulComponentUpdate, PureComponent,React.memo (0) | 2021.11.13 |
|---|---|
| 6. 리액트 반복문: map, 조건문: 삼항 연산자 (0) | 2021.11.13 |
| 2. 리액트 환경 직접 만들기 (webpack 사용하기) (0) | 2021.11.13 |
| 5. import, require 정리 (0) | 2021.11.13 |
| 4. Js 동기, 비동기 처리 : setState 의 문제점 및 해결 (0) | 2021.10.31 |