만들면서 배우는 리액트 튜토리얼 - 2.JSX
1. JSX
JSX는 리액트 컴포넌트를 만들 때 사용하는 언어이다.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
JSX의 예시
위의 사진이 기본적인 JSX의 예시이다.
1.1. render()
render(): 이 컴포넌트가 나에게 보여주는 것
리액트에서 모든 컴포넌트는 render function을 갖고 있어야 하고 이를 return해주어야 한다.
1.2. JSX의 실행과정
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Movie App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
All your components here
</div>
</body>
</html>
Index.html
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
Hello!
</div>
);
}
}
export default App;
app.js
리액트의 실행과정을 알아보면
터미널에서 yarn start를 하면 리액트는 JS의 모든 코드를 가져와서 html 파일에 담는다.
그 파일이 실제로 실행되는 파일이고 이 파일이 바로 public 폴더에 있는 index.html 파일이다.
index.html파일은 index.js파일을 변경함으로써 수정할 수 있는데
ReactDOM.render(<App />, document.getElementById('root'));
위 코드에서 index.js의 ReactDom은 App이라는 1개의 컴포넌트를
document(index.html) 안에 있는 id가 root인 element를 찾아서 에 출력한다.
이 element는 index.html파일에 <div id=”root”>라는 형태로 숨어있다.
<div id="root">
All your components here
</div>
App.js는 위에서 출력하는 1개의 컴포넌트이다.<App />).
정리하자면 index.js내의 ReactDOM이 DOM과 JSX를 연결하는
중개자 역할을 한다고 보면 된다.
1.3. React vs ReactDOM
React: UI Library
React DOM(Document Object Model): 리액트를 웹사이트에 출력(render)하는 걸 도와주는 모델
1.4. JAX 샘플 프로젝트 작성
import React, { Component } from 'react';
import './Movie.css'; // 선택사항
class Movie extends Component {
render() {
return (
<div>
<MoviePoster/>
<h1>hello this is a movie</h1>
</div>
)
}
}
class MoviePoster extends Component {
render() {
return (
<img src="https://m.media-amazon.com/images/M/MV5BMTM0NjQ4OTgyNV5BMl5BanBnXkFtZTcwOTU2MzQ4Nw@@._V1_.jpg"/>
)
}
}
export default Movie
Movie.js
import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
class App extends Component {
render() {
return (
<div className="App">
<Movie />
<Movie />
</div>
);
}
}
export default App;
App.js
1.5. JAX 정리
기본적으로 리액트는 큰 컴포넌트 안에 작은 컴포넌트를 집어 넣는 방식이다.
위의 샘플 프로젝트에서는 App 컴포넌트가 최상위 컴포넌트이고
그 안에 Movie라는 작은 컴포넌트가 들어 있고
그 작은 컴포넌트 안에 MoviePoster라는 더 작은 컴포넌트가 들어가 있는 형식이다.
즉, 리액트의 모든 것은 컴포넌트로 되어있고
모든 컴포넌트는 무조건 Render하고 return해야 한다는 것을 기억하자.
0 comments