1. 어떤 설치를 진행할지 선택하기(저는 컴퓨터에 다운받는 방식)
reactjs.org/docs/getting-started.html
해당 리액트 홈페이지의 문서를 보면, 리액트를 시작할 수 있는 다양한 방식을 소개하고 있다.
온라인으로 구현해볼 수 있는 방식도 있고, 깃허브에서 다운 받는 방식도 있는등 여러 선택이 존재하지만
제가 해볼 첫번째 방식은 "내 컴퓨터에서 다운받아 쓰는 방식"이다.
그리고 그렇게 쓰기 위해서는 'npm'이라는 프로그램이 필요하다고 한다.
npm이란 쉽게 말해 node.js로 만들어진, 명령어로 여기 저기에서 유용하게 쓸 수 있는 소프트웨어~
그리고 두번째로 이 "npm을 통해 create react app을 설치하는 방법"을 사용할 것이다.
(공식적으로 npx를 권장하나, npm이 프로그램을 설치하는 거라면,
npx는 임시로 설치해서 한번만 설치하고 지우는 경우)
2. npm 및 create-react-app 설치방법
nodejs.org/ko/
왼쪽은 안정적인 버전, 오른쪽은 현재 버전
취향에 따라 선택이 가능한 부분이므로 원하는 것을 선택하면 된다.(나는 안정적인 버전으로)
- 다운로드해서 설치부터 진행
- 윈도우+R 로 cmd를 입력해서 npm -v를 썼을때 숫자가 나오면 우선 제대로 설치한 것
- npm install -g create-react-app을 입력해서 npm에게 react를 설치하라고 명령
(만약 이 단계에서 에러날 경우, 검색하면 대부분 해결이 가능)
- crate-react-app -V를 입력해서 버전이 뜨면 설치가 된 것
3. 개발 환경 세팅
- 바탕화면에 react-app이라는 폴더를 생성해준다.(react라고만 하면 에러)
- 그 폴더에 개발 환경을 세팅할 것이므로
윈도우+R 로 cmd에 들어가서 cd 를 입력, 폴더를 cmd에 가져오면 디렉토리가 붙음. 그리고 엔터
- create-react-app . 이렇게 입력하면 폴더에 개발 환경이 완전히 세팅
4. Visual Studio Code 설치
- vs code의 설치방법은 쉬우므로 생략.. 검색해서 다운로드 받으면 된다.
- vs code를 통해 앞서 세팅된 폴더를 열고 실행시켜야하므로 open folder..에서 해당 폴더를 선택
- 그리고 view - terminal을 열고 terminal안에 npm run start 라고 입력후 엔터를 치면
localhost:3000이 열리면서 새로운 로컬페이지가 열리고, 그러면 react를 사용할 준비가 거의 끝..
앞으로도 컴퓨터를 끄고 다시 시작할 때도 같은 방식으로 하면 열린다.
(참고로 편리하게 파일을 수정할때마다 웹브라우저도 실시간 수정이 가능)
5. 디렉토리 설명 및 코딩 방법
public > index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
</div>
<body>
index.html에서 id="root"인 곳 안쪽이 로컬페이지의 결과라고 할 수 있다.
그리고 빈것으로 보아 id가 root인 어떤 페이지덕에 화면이 동작하고 있다고 추측할 수 있는데
바로 src의 안에 있는 코드들을 살펴보면 알 수 있는 부분이다.
src > index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root');
);바로 document.getElementById('root');를 기반으로 해서 index.html이 실행
그러므로 root라는 id를 바꾸고 싶으면 index.html, index.js를 바꾸면 된다.
그리고 가장 중요한 부분이 <App/>인데, 사용자 정의 태그인 컴퍼넌트라고 할 수 있으며
실제 구현은 import App from './App'; 를 임포트하여 온 것인데, 이 파일은 ./App.js를 뜻한다.
결국 index.html - index.js - App.js의 구성으로 최종보스는 App.js라고 볼 수 있음...
App.js는 함수 방식을 이용하여 코딩되어 있는데, 쉬운 이해를 위해 class방식으로 진행
// function type
import React from 'react';
import './App.css';
function App() {
return (
<div className="APP">
</div>
)
}
export default App;
// class type
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="APP">
</div>
)
}
}
export default App;
즉, 앞으로 개발할 부분은 App.js이고,
<div className="APP"> </div> 이 안쪽의 내용을 개발하면 된다.
여기까지 실제적인 세팅과 디렉토리 구성까지 끝.
'프로그래밍 > React' 카테고리의 다른 글
| [React] state 사용하기 (다중속성) (0) | 2021.01.22 |
|---|---|
| [React] state 사용하기 (단일속성) (0) | 2021.01.22 |
| [React] 컴포넌트별로 파일 분리하기 (0) | 2021.01.22 |
| [React] props 사용하기 (0) | 2021.01.22 |
| [React] 기본적인 컴포넌트 만들기 (0) | 2021.01.22 |
