입사 전에 잠깐 배우다가 영원히 멈춰버린 줄 알았던 리액트.. 다시 시작한다. with 노마드 코더
우선 리액트 전에 환경 설정하기
1. node설치/버전 확인: node -v
2. npm 설치/버전 확인: npm -v
3. npx 설치/버전 확인: npm install npx -g (g는 글로벌로 설치함)
4. git 설치/버전 확인: git --version
- 리액트 시작하기: npx를 이용
원하는 폴더에 npx를 설치한다. 혹은 npx로 폴더를 생성할 수 있다.
npx create-react-app {프로젝트명}
원래 이것저것 해야할게 많지만 페이스북에서 만든 마법의 명령어 'create-react-app' 하나로 세팅이 끝난다.
npx는 프로젝트를 만드는 패키지이다.
설치가 되면 해당 프로젝트명으로 만들어진 폴더 구조는 아래와 같다.
- node_modules (각종 필요한 모듈들이 들어있음)
- public (렌더링될 index.html이 여기에 있음)
- src (App.js, index.js가 여기에 있음, 앞으로 자주 쓰게될 폴더)
package.json
package-lock.json
READEME.md
대충 리액트의 작동 원리는 이러하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
index.html 파일의 기본은 이렇게 생겼는데 자세히 보면 #root라는 div가 있다.
그리고 App.js를 들어가보면
import React from 'react';
function App() {
return <div>Hello!!!</div>
}
export default App;
- 리액트로부터 리액트를 들여옴(임포트)
- App이라는 함수가 무언가를 리턴하는데 이 함수는 나중에 컴포넌트가 될 것이다(무슨 말인지는 계속 읽어보면 알게 됨)
- 그리고 App을 디폴트로 내보낸다(몰라도 그냥 넘어가자)
주목할 것은 컴포넌트에서 뭘 리턴하냐인데
예시에서는 div "Hello"라는 엘리먼트를 리턴한다.
그리고 이것을 index.html의 어느 부분에 리턴하는가? 바로 index.js를 보면 알 수 있다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));- 리액트와 리액트돔, app을 임포트
- 여기에서 <App />이라는 낯선 태그가 존재하는데 이건 html이 아니다. 바로 이게 컴포넌트라는 것! 컴포넌트는 html을 리턴하는 함수이다. 그리고 컴포넌트는 무조건 < />의 태그 안에 들어가야 하는데 이게 바로 리액트에만 있는 유일한 개념인 jsx이다.
- app에서 돔을 렌더링하여 index의 #root에 넣는다!!
오 그러니까
id를 바꿔서 위치를 조절할 수 있고
컴포넌트의 내용을 바꿔서 필요한 콘텐츠를 만들고
원하는 곳에 렌더링하기만 하면 끝이라는 소리네?
이제 실행을 해보자. 그냥 npm을 시작하면 된다.
- 브라우저에 띄우기: npm start
그리고 브라우저에서 소스보기를 하면 컴포넌트의 코드는 나오지 않고 index.html에 있는 코드만 나온다.
그 이유는 리액트는 html파일에 있는 코드만 먼저 보여주고
즉시 컴포넌트에서 요청한 노드를 생성하여 바로 넣기 때문이라고 한다.
그래서 빠르다는 것..!
컴포넌트를 수정해서 ctrl+s만 눌러주면 그때그때 바로 빌드가 되어 브라우저에 바로 반영된다.
물론 버그가 나면 해당 에러도 바로바로 보여준다.
꽤 편한 것 같고 뷰와 비슷하면서도 다른 것 같다.
좀 더 배워봐야징
'리액트' 카테고리의 다른 글
| useSWR, 그리고 stale-while-revalidate (0) | 2022.04.13 |
|---|---|
| [ReactJS] 메모제이션으로 리액트 성능을 올려보자 (0) | 2021.07.18 |
| [리액트 with 노마드코더] axios 세팅 (0) | 2020.04.30 |
| [리액트 with 노마드코더] 컴포넌트 만들기 (0) | 2020.02.09 |