App.js
원본 코드
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;우선 리액트를 설치한 후, App.js의 상단부터 살펴보자.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';import한다는 것은 무엇을 불러온다는 것이다. 첫번째 코드는 리액트와 그 내부의 Component를 불러온다. JSX를 사용하려면 필수적이다.
컴포넌트를 만드는 방법에는 두가지가 있는데 하나는 클래스를 이용한다.
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>
);
}클래스형태로 만들어진 컴포넌트는 render 함수가 있어야 하며 내부에서는 JSX를 리턴해주어야 한다. 위의 HTML같은 코드가 JSX.
그리고 마지막줄에는
export default App;작성한 컴포넌트를 다른 곳에 불러와서 사용할 수 있도록 내보내기 해준다.
index.js
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();컴포넌트를 불러올 때는 import를 사용한다.
import App from './App';브라우저 상에 리액트 컴포넌트를 보여주기 위해서는 ReactDOM.render 함수를 사용한다. 첫번째 파라미터는 렌더링 할 결과물, 두번째 파라미터는 컴포넌트를 어떤 DOM에 그릴지 정해준다.
예를 들어 id가 root인 DOM을 찾아서 그려준다면?
<div id="root"></div>이런식으로 해당 파일안에 있는 항목을 찾아 렌더링 해준다.
JSX
htmp과 비슷해보이지만 자바스크립트이다.
React.createElement를 사용하는 자바스크립트 형태로 변환시켜줘야 하는데 몇가지 규칙을 준수해주어야 한다.
// src/App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
</div>
);
}
}
export default App;두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div> // 하나의 엘리먼트로 감싸기
<div>
Hello
</div>
<div>
Bye
</div>
</div>
);
}
}
<div>
Hello
</div>
<div> // 이러면 오류가 난다.
Bye
</div>
export default App;하지만 Fragment를 통해 이 문제를 해결할 수도 있다.
<Fragment>
<div>
Hello
</div>
<div> // Fragment를 사용하면 해결 가능
Bye
</div>
</Fragment>JSX 내부에서 자바스크립트 값을 사용할 땐 {}를 사용해야 한다.
import React, { Component } from 'react';
class App extends Component {
render() {
const name = 'react';
return (
<div>
hello {name}! // 자바스크립트 값 사용
</div>
);
}
}
export default App;또한 JSX 내부에서 조건부 렌더링을 할때는 if를 사용할 수 없고 삼항연산자, AND 연산자를 사용한다.
<div> {
1+1 === 2 ? (<div>true</div>) : (<div>false</div>)
} </div>< 삼항연산자 >
AND 연산자는 단순히 조건이 true일때만 보여주고 false의 경우 아무것도 보여주지 않는다
<div>
{
1 + 1 === 2 && (<div>true</div>)
}
</div>if문을 사용한다면 JSX 밖에서 로직을 작성하는것이 좋지만 꼭 내부에서 작성해야 한다면 IIFE를 사용한다.
import React, { Component } from 'react';
class App extends Component {
render() {
const value = 1;
return (
<div>
{
(function() {
if (value === 1) return (<div>하나</div>);
if (value === 2) return (<div>둘</div>);
if (value === 3) return (<div>셋</div>);
})()
}
</div>
);
}
}
export default App;switch 문을 사용해도 된다
(() => {
if (value === 1) return (<div>하나</div>);
if (value === 2) return (<div>둘</div>);
if (value === 3) return (<div>셋</div>);
})()JSX에서 style, CSS 클래스 설정
import React, { Component } from 'react';
class App extends Component {
render() {
const style = {
backgroundColor: 'black',
padding: '16px',
color: 'white',
fontSize: '12px'
};
return (
<div style={style}>
hi there
</div>
);
}
}
export default App;html에서는 ="backgroundColor: black; padding: 16px; ..." 으로 작성했지만 리액트에서는 객체 형태로 작성해야한다.
클래스를 설정하게 될때는 class 대신에 className를 사용해야한다.
<div class="hello"> //html<div className="hellp"> //리액트주석
주석은 {/ ... /} 또는 태그 사이에 // 를 사용한다
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
{/* 주석은 이렇게 */}
<h1>
// 태그 사이에
리액트
</h1>
</div>
);
}
}
export default App;