설치와 개발 환경 세팅
React를 사용하려면 일단 Node.js가 설치되어있어야 한다.
Node.js가 설치되었다면 npm install create-react-app <앱 이름>, cd <앱 이름>, npm start을 해서 개발 환경을 셋팅해준다.
JSX 문법
React에는 JSX(JavaScript XML)라는 JavaScript를 확장한 문법을 사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<script src="../src/index.js" type="text/jsx"></script>
<div id="root"></div>
</body>
</html>React를 사용할 때는 우선 위와 같이 HTML파일의 script에 jsx type을 명시해주고 id="root"인 div를 생성해주고, js 파일에는 import React from "react"; 를 써줘야한다.
import React from 'react';
import ReactDOM from 'react-dom/client';
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root")); // JavaScript와 HTML을 합쳐놓은 것 같아 보이는 위의 문법이 JSX이다.
JSX 중괄호 안에는 JavaScript의 표현식을 넣을 수 있다.
예를 들자면,
import React from 'react';
import ReactDOM from 'react-dom/client';
const fruit = "apple";
ReactDOM.render(<h1>I like {fruit}</h1>, document.getElementById("root")); // I like apple이런 식으로 사용 가능하다.
이처럼 JSX 문법을 사용하면 손쉽게 HTML 요소를 생성할 수 있다.
return 안에는 한개의 태그만 존재해야 하고 그 안에 태그를 작성해야 한다.
function App() {
return (
<div className="App">
</div> // return() 안에는 한개의 태그만 존재해야한다.
);
}
export default App;
-----------------------------------------------------
function App() {
return (
<div className="App">
</div>
<div></div>// 오류가 발생한다.
);
}
export default App;변수와 state
중요한 자료를 잠깐 저장하고 싶을 때엔 변수를 사용하면 된다.
function App() {
let name = "John";
return (
<div className="App">
{ name } // John, jsx 안에서 JavaScript를 사용하려면 중괄호 사이에 입력해주면 된다.
</div>
);
}
export default App;혹은 state를 사용하여도 된다.
import { useState } from 'react';
function App() {
//let name = "John";
let [name, setName] = useState('John');
return (
<div className="App">
{ name } // John
</div>
);
}
export default App;useState는 배열을 반환한다.
따라서 위처럼 간단히 구조 분해 할당을 하여 사용해도 되고 혹은 아래처럼 사용해도 된다.
import { useState } from 'react';
function App() {
//let name = "John";
let result = useState('John');
let name = result[0];
let setName = result[1];
return (
<div className="App">
{ name } // John
</div>
);
}
export default App;변수 대신 state를 사용하는 이유
변수는 바뀌어도 html이 자동으로 재렌더링을 해주지 않는다. 하지만 state는 바뀌면 html이 자동으로 재렌더링 해준다.
아래의 경우 John을 클릭해도 James로 변경 되지 않는다.
import { useState } from 'react';
function App() {
let name = "John";
function handleClick() {
name = "James";
}
return (
<div className="App" onClick={handleClick}>
{ name }
</div>
);
}
export default App;state를 사용했을 때엔 John이 James로 바뀌는 모습을 볼 수 있다.
import { useState } from 'react';
function App() {
//let name = "John";
let [name, setName] = useState('John');
function handleClick() {
setName('James');
}
return (
<div className="App" onClick={handleClick}>
{ name } // John -> James
</div>
);
}
export default App;
state를 여러 개 사용하고 싶다면 아래와 같이 배열로 사용할 수 있다.
import { useState } from 'react';
function App() {
//let name = "John";
let [name, setName] = useState(['John', 'Jane', 'Amy']);
return (
<div className="App">
{ name[0] } // John
{ name[1] } // Jane
{ name[2] } // Amy
</div>
);
}