A sentimental robot

React : render 본문

MERN stack

React : render

GOD03219 2018. 10. 22. 19:55

웹 서버 구축도 처음이고 리액트도 처음이라서 뭘 어디서부터 시작해야 할지 모르겠다.

 

하지만 내 식대로 잘 정리해보도록 하겠다.

 

피드백은 언제나 환영이다!

 

 

저번엔 우리가 리액트 프로젝트를 하나 만들어 보았다.

 

일단 나는 우리가 만든 프로젝트의 public 폴더의 index.html 부터 설명하고자 한다.

 

index.html 파일에서 보면 우리에게 익숙한 HTML 태그들이 있다. 너무 반갑당 ㅎ

 

<body>태그 안에 <div id="root" > 태그가 있는데 모든 것은 여기서부터 시작된다... 두둥!

 

 

root라는 id를 가지고 있는 div를 렌더링(Rendering)하는 것에서부터 리액트의 시작이라고 할 수 있겠다.

 

무슨 말이냐 하면,

 

index.html의 태그들에게 스타일과 동적기능을 주는 것을 이제부터 react.js가 한다는 것이다.

 

오! 그렇다면, index.js에 들어가 보자.

 

여기가 제일 중요하다!

 

자바에서 보던 import가 있고 처음보는 코드 몇줄이 띡 하니 있다.

 

import React from 'react';


이거는 뭐 리액트를 쓰겠다 뭐 이 말인것 같은데,

 

의미심장해 보이는 ReactDOM.render(<App />, document.getElementById('root')); 이거는 뭐지?

 

이거 너무너무 중요하다!

 

방금 index.html에서 봤던 <div id="root">기억 나는가? 여기에다가 <App/>컴포넌트를 렌더링 해주겠다는 뜻이

 

다.

 

import App from './App';  App.js 파일에서 리턴해주는 App 컴포넌트를 쓰겠다 이말이다.

 

App.js와 App.css 파일에 들어가보면 우당탕탕 뭔가 많은 코드들이 적혀있을텐데 그게 바로 우리가 처음 리액트 서

 

버를 시작할 때 보였던 화면을 구성하는 코드들이다.

 

그 말은 index.html에 있던 root에 App.js 파일에서 만든 App이라는 컴포넌트를 씌운 것(rendering)이다. 이해가 가

 

려나 ㅠㅠ

 

 

그럼 다음 편에는 App.js 파일 안을 좀 더 자세히 들여다 보도록 하자!

 

 

저작자표시

'MERN stack' 카테고리의 다른 글

React : props, state  (0) 2018.10.24
React : component  (0) 2018.10.22
React.js 환경 구축  (0) 2018.10.22
Node.js에 관한 고찰  (0) 2018.10.18
Web Server 구축을 위한 기초 지식  (0) 2018.10.18
'MERN stack' Related Articles more