- 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다.
- Project 폴더 살펴보기.
공식홈에서는 React 가장 기본 코드로 아래와 같은 예제를 준다.
Javascript 에 대한 기본적인 지식이 있다면(공식 홈페이지에서도 기본적인 Javascript 지식을 선요구 하고 있다.) ReactDOM.render 와 같은 문법은 몰라도 대충 아래와 같이 예상할 것이다.
"<div> 이던 다른 태그이던 id="root" 로 되어있는 tag가 있고 여기에 <h1>Hello, world!</h1>을 그릴 것이다."
이전글에 설정했던 폴더를 살펴보자.
난 그냥 문법만 익히고 싶고, index.html 에서 소스만 바꾸면서 예제의 결과값만 보길 원했는데 이상한 폴더들이 많이 생겼다. 짜증이 나지만 폴더를 열어보자.
node_mobules 은 Project 수행환경에 필요한 파일들이 설치되어 있다. 파일이 굉장히 많다. 아마 front 쪽에 관심이 있다면 한번쯤 들어봤을 babel 폴더도 보인다.
왜 이런폴더들이 생겼는지 부터 시작해서 이런것까지 자세하게 다 알아보려면 우리의 본래 목적인 React 를 배우기까지 시간이 너무 오래걸린다. React 부터 배우고 이해하도록 하자. 그리고 필자도 npm 에 관련해서는 자세히 모른다.
그냥 maven에서 pom.xml 에 의존성을 설정하면 필요한 jar 파일이 다운받아져서 폴더에 모이는것처럼 생각하고 넘어가자. (항상 큰 목적은 일단 react를 익히는 것이라는걸 잊지 말자)
public 에는 반가운 index.html 이 들어있다.
index.html 코드를 살펴보자. 간단하게 살펴보려고 했는데 당황스럽다. <head> 부분을 무시하고 <body> 부터 살펴보자. <div id="root></div> 부분이 보이는가? 젤 윗줄에서 Hello world 가 <div id="root"> 태그안에 rendering 하지 않을까 라고 추측 할 수 있는 대목이다.
src/index.js 를 살펴보자. ReactDOM.render 부분을 보면 Hello world와 비슷한 코드가 있다. import App from './App' 부분에 정의된 파일에서 rendering 하는부분이 있을 것이고, 이 코드가 <App /> 에 치환된다고 예상할 수 있고, 실행하면 #1 에서 npm start로 수행했던 화면이 나올 것이라 예상할 수 있다.
src/App.js
- Hello world 찍어보기
project 폴더/src/index.js 파일을 예제 수행을 위해 아래와 같이 바꿔보자.
7번줄에 있는 기존코드를 주석처리 하고, 예제 코드를 넣으면 원하는 Hello world가 보인다.
'Language > React' 카테고리의 다른 글
| [React 공식 Doc 가이드 #6] State and Lifecycle (0) | 2021.02.11 |
|---|---|
| [React 공식 Doc 가이드 #5] Components and Props (0) | 2021.02.11 |
| [React 공식 Doc 가이드 #4] Rendering Elements (0) | 2021.02.11 |
| [React 공식 Doc 가이드 #3] Introducing JSX (0) | 2021.02.11 |
| [React 공식 Doc 가이드 #1] Installation (0) | 2021.02.11 |
댓글