OKdevTV
React.js
- A JavaScript library for building user interfaces
- https://ko.reactjs.org
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);
Sample
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
React ํ๋ก์ ํธ ์์ฑ
- CRA: Create React App
- https://ko.reactjs.org/docs/create-a-new-react-app.html
npm create vite my-app -- --template react
cd my-app
npm install
npm run dev
์๋ก์ด ํ์ด์ง ์ถ๊ฐ
- React Router
- https://reactrouter.com/web/guides/quick-start
npm install react-router-dom --save
๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ
๋ณ์
const name = 'Kenu Heo';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
ํจ์
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ
์ปดํฌ๋ํธ ์ถ์ถํ๊ธฐ
์ปดํฌ๋ํธ ๊ฐ ๋ฐ์ดํฐ ์ ๋ฌํ๊ธฐ
props
state
๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ
import React, { useState, useEffect } from 'react';
export default function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('/data.json')
.then((response) => {
if (response.ok) {
return response.json();
}
throw response;
})
.then((data) => {
setData(data);
})
.catch((error) => {
console.error('Error fetching data: ', error);
setError(error);
})
.finally((data) => {
console.log('data', data);
setLoading(false);
});
}, []);
console.log(loading, error, data);
if (loading) return 'Loading...';
if (error) return 'Error!';
return (
<>
<pre>{JSON.stringify(data, null, 2)}</pre>
</>
);
}
render lifecycle
LIFECYCLE METHODS
componentWillMountโ ํ ๋ฒ ์คํ, ๋ ๋๋ง ์ ํด๋ผ์ด์ธํธ, ์๋ฒ ์์ชฝ์์componentDidMountโ ํ ๋ฒ ์คํ, ๋ ๋๋ง ํ, ํด๋ผ์ด์ธํธ์์๋งshouldComponentUpdateโ ๋ฆฌํด ๊ฐ์ด ์ปดํฌ๋ํธ ์ ๋ฐ์ดํธ ๊ฒฐ์ componentWillUnmountโ ์ปดํฌ๋ํธ ์ธ๋ง์ดํธ ์ด์ ์ ์คํ
SPECS
getInitialStateโ state์ฉ ๋ฆฌํด ๊ฐ์ ์ด๊ธฐ ๊ฐgetDefaultPropsโ props๊ฐ ์์ ๊ฒฝ์ฐ props ๊ธฐ๋ณธ๊ฐ ์ค์ mixinsโ ๊ฐ์ฒด ๋ฐฐ์ด, ํ์ฌ ์ปดํฌ๋ํธ ๊ธฐ๋ฅ ํ์ฅ์ ์ฌ์ฉ๋จ
stateful
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
ReactDOM.render(<Timer />, mountNode);
-50% ํ ์ธ์ฟ ํฐ: 15108-f2af1e086101
