[React] 03. ์ปดํฌ๋ํธ
- -
๐. ์ปดํฌ๋ํธ
์์ ํฌ์คํธ์์ ์ปดํฌ๋ํธ(component)๋ ๋ฆฌ์กํธ ํ๋ก์ ํธ์์ ํน์ ๋ถ๋ถ์ด ์ด๋ป๊ฒ ์๊ธธ์ง๋ฅผ ๊ฒฐ์ ํ๋ ์ ์ธ์ฒด๋ผ๊ณ ๋ฐฐ์ ์ต๋๋ค. ๋ฆฌ์กํธ์ ์ปดํฌ๋ํธ๋ ํจ์ํ ์ปดํฌ๋ํธ์ ํด๋์คํ ์ปดํฌ๋ํธ๋ก ๋ ๊ฐ์ง๋ก ์ ์ธ๋ ์ ์์ต๋๋ค.
ํด๋์คํ ์ปดํฌ๋ํธ์ ํจ์ํ ์ปดํฌ๋ํธ๋ฅผ ๋น๊ตํ๋ฉฐ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํด๋ณด๊ฒ ์ต๋๋ค. ๋ํ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ๊ฑฐ๋ ๋ ๋๋ง ํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ด๋ props์ state์ ์ฐจ์ด์ ๊ณผ ์ ์ธ ๋ฐฉ์์ ๋ฐฐ์ฐ๊ฒ ์ต๋๋ค.
๐ I. ํด๋์คํ ์ปดํฌ๋ํธ
๐ 1. ํด๋์คํ ์ปดํฌ๋ํธ
์ปดํฌ๋ํธ๋ฅผ ์ ์ธํ๋ ๋ฐฉ์์ ํด๋์ค ์ปดํฌ๋ํธ์ ํจ์ ์ปดํฌ๋ํธ๋ก ๋๋ฉ๋๋ค. ํด๋์คํ ์ปดํฌ๋ํธ์ ํจ์ ์ปดํฌ๋ํธ๋ state ๊ธฐ๋ฅ ๋ฐ ๋ผ์ดํ ์ฌ์ดํด ๊ธฐ๋ฅ, ์์ ๋ฉ์๋ ์ ์ ๋ฑ์์ ์ฐจ์ด๊ฐ ๋ฉ๋๋ค.
๊ฐ ๋ฐฉ๋ฒ์ผ๋ก ์์ฑ๋ ์ฝ๋๋ฅผ ๋ณด๋ฉด์ ์ฐจ์ด์ ์ ๋น๊ตํด๋ณด์.
(1) ํด๋์ค ์ปดํฌ๋ํธ
import {Component} from "react";
class App extends Component {
render() {
const name = 'react';
return <div className='react'> {name} </div>;
}
}
export default App;
(2) ํจ์ ์ปดํฌ๋ํธ
import './App.css';
function App() {
const name = "๋ฆฌ์กํธ";
return <div className='react'> {name} </div>;
}
export default App;
ํจ์ ์ปดํฌ๋ํธ์ ํน์ง์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ํด๋์ค ์ปดํฌ๋ํธ๋ณด๋ค ์ ์ธํ๊ธฐ ํธ๋ฆฌ
- ํด๋์ค ์ปดํฌ๋ํธ๋ณด๋ค ๋ฉ๋ชจ๋ฆฌ ์์์ ๋ ์ฌ์ฉํ๊ณ , ์ค์ ๋ฐฐํฌํ ๋๋ ๊ฒฐ๊ณผ๋ฌผ์ ํ์ผ ํฌ๊ธฐ๊ฐ ๋ ์์ต๋๋ค.
- ๋ฆฌ์กํธ v16.8 ์ ๋ฐ์ดํธ๋ก state์ ๋ผ์ดํ์ฌ์ดํด API๋ ์ฌ์ฉ์ด ๊ฐ๋ฅํด์ก์ต๋๋ค.
๋ฆฌ์กํธ v16.8 ์ ๋ฐ์ดํธ๋ก Hooks๊ฐ ๋์ ๋์๊ณ ํจ์ ์ปดํฌ๋ํธ๋ ํด๋์ค ์ปดํฌ๋ํธ์ ๊ฐ์ด ์์ ์ ํ ์ ์๊ฒ ๋์์ต๋๋ค. ๋ฆฌ์กํธ ๊ณต์ ๋งค๋ด์ผ์์๋ ํจ์ ์ปดํฌ๋ํธ์ Hooks๋ฅผ ์ฌ์ฉํ๋๋ก ๊ถ์ฅํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ด์ ์ ์์ฑ๋ ์ฝ๋๋ค์ ์ ์ง ๋ฐ ๋ณด์๋ฅผ ์ํ์ฌ ํด๋์ค ์ปดํฌ๋ํธ๋ ๋ฐ๋์ ์์๋์ด์ผํฉ๋๋ค.
๐ II. ์ฒซ ์ปดํฌ๋ํธ ์์ฑ
๐ 1. ํจ์ ์ปดํฌ๋ํธ ์์ฑํ๊ธฐ
์ปดํฌ๋ํธ๋ ๋ค์์ ์ธ ๋จ๊ณ๋ฅผ ๊ฑฐ์ณ์ ๋ง๋ค ์ ์์ต๋๋ค.
- ํ์ผ ๋ง๋ค๊ธฐ
- ์ฝ๋ ์์ฑํ๊ธฐ
- ๋ชจ๋ ๋ด๋ณด๋ด๊ธฐ ๋ฐ ๋ถ๋ฌ์ค๊ธฐ
VS ์ฝ๋์์ ํ์ผ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ src ๋๋ ํฐ๋ฆฌ - [์ฐํด๋ฆญ] - <ํ์ผ์ด๋ฆ>.js ์์ฑํ๋ฉด ๋ฉ๋๋ค.
๐ 2. ์ฝ๋ ์์ฑํ๊ธฐ
์์ผ๋ก๋ NewComponent.js ํ์ผ์ ์๋ก ๋ง๋ค์ด ์ฝ๋ ์์ ์ ์งํํ๋๋ก ํ๊ฒ ์ต๋๋ค.
// NewComponent.js
const NewComponent = () => {
return <div> ํ์ดํ ํจ์๋ฅผ ์ด์ฉํ ์ปดํฌ๋ํธ </div>
};
export default NewComponent;
์ ์ฝ๋๋ ํ์ดํ ํจ์๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ ํจ์ ์ปดํฌ๋ํธ์ ๋๋ค. JavaScript ES6 ๋ฌธ๋ฒ์์ function ํค์๋ ์ธ์๋ ํ์ดํ ํจ์๋ก ํจ์๋ฅผ ์ ์ธํ์ฌ ์ฌ์ฉํ ์ ์์ต๋๋ค. ํ์ดํ ํจ์๋ ๊ฐ์ ์ฐ์ฐํ์ฌ ๋ฐ๋ก ๋ฐํํด์ผํ ๋ ์ฌ์ฉํ๋ฉด ๊ฐ๋ ์ฑ์ ๋์ผ ์ ์์ต๋๋ค.
๐ 3. ๋ชจ๋ ๋ด๋ณด๋ด๊ธฐ ๋ฐ ๋ถ๋ฌ์ค๊ธฐ
(1) ๋ชจ๋ ๋ด๋ณด๋ด๊ธฐ
export default NewComponent;
์ด ์ฝ๋๋ ๋ค๋ฅธ ํ์ผ์์ ์ด ํ์ผ์ import ํ ๋, ์ ํด๋์ค๋ฅผ ๋ถ๋ฌ์ค๋๋ก ํฉ๋๋ค
(2) ๋ชจ๋ ๋ถ๋ฌ์ค๊ธฐ
// App.js
import NewComponent from "./NewComponent";
const App = () => {
return <NewComponent />
}
export default App;
import ํค์๋๋ฅผ ํตํด NewComponent ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ ์๋ก ๋ ๋๋งํ ์ ์์ต๋๋ค.
๐ III. props
๐ 1. props ๊ฐ ์ฌ์ฉ
props๋ properties์ ์ค์๋ง๋ก ์ปดํฌ๋ํธ์ ์์ฑ์ ์ค์ ํ ์ ์์ต๋๋ค. ์ด props ๊ฐ์ ํด๋น ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์ ์ฌ์ฉํ๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์ค์ ํ ์ ์์ต๋๋ค.
(1) JSX ๋ด๋ถ์์ props ๋ ๋๋ง
NewComponent.js์ ๋ค์์ ๋ด์ฉ์ ์์ฑํฉ๋๋ค.
// NewComponent.js
const NewComponent = props => {
return <div> {props.prog}์์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ญ๋๋ค. </div>
};
export default NewComponent;
- ํด๋น ์ปดํฌ๋ํธ์์ program์ด๋ผ๋ props๋ฅผ ๋ ๋๋งํ๋๋ก ํ๋ ์ฝ๋
- props ๊ฐ์ ๋งค๊ฐ๋ณ์(ํ๋ผ๋ฏธํฐ)๋ก ์ฌ์ฉ
(2) ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ๋ props ๊ฐ ์ง์ ํ๊ธฐ
NewComponent๋ฅผ ๋ถ๋ฌ์ค๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ(App.js)์ ๋ค์์ ๋ด์ฉ์ ์์ฑํฉ๋๋ค.
// App.js
import NewComponent from "./NewComponent";
const App = () => {
return <NewComponent prog="๋ฆฌ์กํธ" />;
};
export default App;
- ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ props์ ๊ฐ์ ์ง์
๐ 2. props ๊ธฐ๋ณธ๊ฐ ์ค์ : defaultProps
์์ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ prog ๊ฐ์ ์ง์ฐ๋ฉด prog ์๋ฆฌ์ ์๋ฌด ๋ด์ฉ๋ ์ถ๋ ฅ๋์ง ์์ต๋๋ค. props ๊ฐ์ ๋ฐ๋ก ์ง์ ํ์ง ์์์ ๋ ๋ณด์ฌ์ค ๊ธฐ๋ณธ๊ฐ์ defaultProps๋ก ์ค์ ํ ์ ์์ต๋๋ค. .
// NewComponent.js
const NewComponent = props => {
return <div> {props.prog}์์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ญ๋๋ค. </div>;
};
NewComponent.defaultProps = {
prog : "REACT"
}
export default NewComponent;
NewComponent.js ํ์ผ์ defaultProps์ ์ด์ฉํด ๊ธฐ๋ณธ ๊ฐ์ ์ค์ ํด์ค ์ ์์ต๋๋ค.
๐ 3. ํ๊ทธ ์ฌ์ด์ ๋ด์ฉ์ ๋ณด์ฌ์ฃผ๋ children
๋ฆฌ์กํธ์์๋ ์ปดํฌ๋ํธ ํ๊ทธ ์ฌ์ด์ ๋ด์ฉ์ ๋ณด์ฌ์ฃผ๋ props๋ ์์ต๋๋ค. children์ด๋ผ๋ ๊ฐ์ ํตํด ํ๊ทธ ์ฌ์ด์ ์์ฑํ ๋ด์ฉ์ ์์ ์ปดํฌ๋ํธ ๋ด๋ถ์์ ๋ณด์ฌ์ค ์ ์์ต๋๋ค. ์์ ๋ ธ๋์์๋ props.children์ ํตํด ์ ๊ทผํ ์ ์์ต๋๋ค.
(์ฝ๋ ๋ด์ (...) ์ ์๋ก ์์ฑ๋ ๋ถ๋ถ ์ธ์ ์ฝ๋๋ ์ด์ ์ ์์ฑํ ์ฝ๋์ ๋์ผํจ์ ์๋ฏธํฉ๋๋ค.)
// NewComponent.js
const NewComponent = props => {
return (
<div>
{props.prog}์์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ญ๋๋ค. <br/>
children์ ๊ฐ์ {props.children}์
๋๋ค.
</div>
);
};
(...)
export default NewComponent;
// App.js
import NewComponent from "./NewComponent";
const App = () => {
return <NewComponent> ~ํ๊ทธ ์ฌ์ด~ </NewComponent>
}
export default App;
๐ 4. ๋น๊ตฌ์กฐํ ํ ๋น ๋ฌธ๋ฒ์ ํตํด props ๋ด๋ถ ๊ฐ ์ถ์ถํ๊ธฐ
props ๊ฐ์ ์กฐํํ ๋๋ง๋ค props.prog, props.children ๊ฐ์ด prog. ์ด๋ผ๋ ํค์๋๊ฐ ํ์ํฉ๋๋ค. ES6์ ๋น๊ตฌ์กฐํ ํ ๋น ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ ๋ด๋ถ ๊ฐ์ ๋ ํธํ ์ถ์ถํ ์ ์์ต๋๋ค.
// NewComponent.js
const NewComponent = props => {
const {prog, children} = props;
return (
<div>
{prog}์์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ญ๋๋ค. <br/>
children์ ๊ฐ์ {children}์
๋๋ค.
</div>
);
};
(...)
export default NewComponent;
- ๊ฐ์ฒด์์ ๊ฐ์ ์ถ์ถํ๋ ๋ฌธ๋ฒ์ ๋น๊ตฌ์กฐํ ํ ๋น(destructing assignment)๋ผ๊ณ ๋ถ๋ฆ
- ๊ตฌ์กฐ ๋ถํด ๋ฌธ๋ฒ์ด๋ผ๊ณ ๋ ๋ถ๋ฆผ
ํจ์์ ํ๋ผ๋ฏธํฐ ๋ถ๋ถ์์๋ ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค. ํจ์์ ํ๋ผ๋ฏธํฐ๊ฐ ๊ฐ์ฒด๋ผ๋ฉด ๊ฐ์ ๋ฐ๋ก ๋น๊ตฌ์กฐํํ์ฌ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.
// NewComponent.js
const NewComponent = ({prog, children}) => {
return (
<div>
{prog}์์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ญ๋๋ค. <br/>
children์ ๊ฐ์ {children}์
๋๋ค.
</div>
);
};
(...)
export default NewComponent;
๐ 5. propTypes๋ฅผ ํตํ props ๊ฒ์ฆ
์ปดํฌ๋ํธ์ ํ์ props๋ฅผ ์ง์ ํ๊ฑฐ๋ ํ์ ์ ์ง์ ํ ๋๋ propTypes๋ฅผ ์ฌ์ฉํฉ๋๋ค. propTypes๋ฅผ ์ง์ ํ๋ ๋ฐฉ๋ฒ์ defaultProp์ ์ค์ ํ๋ ๊ฒ๊ณผ ๋น์ทํฉ๋๋ค. propTypes์ ์ฌ์ฉํ๊ธฐ ์ํด ์ฝ๋ ์๋จ์ import๋ฅผ ํด์ผํฉ๋๋ค.
import PropTypes from 'prop-types';
(1) ํ์ ์ค์ ํ๊ธฐ
// NewComponent.js
import PropTypes from 'prop-types';
(...)
NewComponent.propTypes = {
prog: PropTypes.string
};
export default NewComponent;
- prog์ ๋ด์ฉ์ ๋ฐ๋์ String์ผ๋ก ์ง์ ๋์ด์ผ ํจ
- ์๋ชป๋ ํ์ ์ผ๋ก ๊ฐ์ ์ง์ ํ ๋ค ๊ฐ๋ฐ์ ๋๊ตฌ์ Console ํญ์ ์ด๋ฉด ์ค๋ฅ ์ฐฝ์ด ๋ธ
(2) isRequired๋ฅผ ์ฌ์ฉํ์ฌ ํ์ propTypes ์ค์
propTypes์ ์ง์ ํ ๋ ๊ฒฝ๊ณ ๋ฉ์ธ์ง๋ฅผ ๋ฐ์์ํฌ ์ ์์ต๋๋ค.
// NewComponent.js
import { PropTypes } from "prop-types";
const NewComponent = ({prog, children, age}) => {
return (
<div>
{prog}์์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ญ๋๋ค. <br/>
children์ ๊ฐ์ {children}์
๋๋ค. <br/>
์ ์ ๋์ด๋ {age}์ธ ์
๋๋ค.
</div>
);
};
NewComponent.defaultProps = {
prog : "๋ฆฌ์กํธ"
}
NewComponent.propTypes = {
prog: PropTypes.string,
age: PropTypes.number.isRequired
};
export default NewComponent;
๋ถ๋ชจ ์ปดํฌ๋ํธ์ธ App.js์์ age์ ๊ฐ์ด ์ค์ ๋์ง ์๋ ๋ค๋ฉด ์ฝ์์ฐฝ์์ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ๋ณด์ฌ์ค ๊ฒ ์ ๋๋ค.
// App.js
import NewComponent from "./NewComponent";
const App = () => {
return(
<NewComponent prog = "React" age = {100} >
~ children ๊ฐ ~
</NewComponent>
)
}
export default App;
(3) PropTypes์ ์ข ๋ฅ
https://github.com/facebook/prop-types ์์ PropTypes์ ๋ํ ๋ด์ฉ์ ๋ณผ ์ ์์ต๋๋ค.
๐ 6. ํด๋์คํ ์ปดํฌ๋ํธ์์ props ์ฌ์ฉํ๊ธฐ
ํด๋์คํ ์ปดํฌ๋ํธ์์ props๋ฅผ ์ฌ์ฉํ ๋๋ render ํจ์์์ this.props๋ฅผ ์กฐํํ๋ฉด ๋ฉ๋๋ค. defaultProps์ propTypes๋ ๋๊ฐ์ ๋ฐฉ์์ผ๋ก ์ค์ ํ ์ ์์ต๋๋ค. ํด๋์คํ ์ปดํฌ๋ํธ์์ props ๊ฐ์ ์กฐํํ๋ ์ฝ๋์ ๋๋ค.
// NewComponent.js
import { Component } from "react";
import PropTypes from "prop-types";
class NewComponent extends Component {
render() {
const {prog, children, age} = this.props; //๋น๊ตฌ์กฐํ ํ ๋น
return (
<div>
{prog}์์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ญ๋๋ค. <br/>
children์ ๊ฐ์ {children}์
๋๋ค. <br/>
์ ์ ๋์ด๋ {age}์ธ ์
๋๋ค.
</div>
)
}
}
NewComponent.defaultProps = {
prog : "๋ฆฌ์กํธ"
}
NewComponent.propTypes = {
prog: PropTypes.string,
age: PropTypes.number.isRequired
};
export default NewComponent;
defaultProps์ propTypes๋ class ๋ด๋ถ์์๋ ์ง์ ๊ฐ๋ฅํฉ๋๋ค.
// NewComponent.js
import { Component } from "react";
import PropTypes from "prop-types";
class NewComponent extends Component {
static defaultProps = {
prog : "๋ฆฌ์กํธ"
};
static propTypes = {
prog: PropTypes.string,
age: PropTypes.number.isRequired
}
render() {
( ... )
}
}
export default NewComponent;
๐ IV. state
๐ 1. state
- state๋ ์ปดํฌ๋ํธ ๋ด๋ถ์์ ๋ฐ๋ ์ ์๋ ๊ฐ์ ์๋ฏธ
- props๋ ์ปดํฌ๋ํธ๊ฐ ์ฌ์ฉ๋๋ ๊ณผ์ ์์ ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์ค์ ํ๋ฉฐ ์์ ์ ํด๋น props๋ฅผ ์ฝ๊ธฐ ์ ์ฉ์ผ๋ก๋ง ์ฌ์ฉ
- state๋ ์ปดํฌ๋ํธ ์์ฒด์ ์ผ๋ก ์ง๋ ๊ฐ์ผ๋ก ์ปดํฌ๋ํธ ๋ด๋ถ์์ ๊ฐ์ ์ ๋ฐ์ดํธ ํ ์ ์์
- ์ผ๋ฐ ๋ณ์๋ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๋ html์ ์๋ ๋ณ๊ฒฝ๋์ง ์์ง๋ง, state๋ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ฉด html์ ์ฌ๋๋๋ง ํด์ค
=> ๊ฐ์ ๋ณํ๊ฐ ์์ฃผ ์์ ๋ state๋ฅผ ์ฌ์ฉ - ํด๋์คํ ์ปดํฌ๋ํธ๋ state, ํจ์ ์ปดํฌ๋ํธ์์๋ useState๋ฅผ ์ฌ์ฉ
๐ 2. ํด๋์คํ ์ปดํฌ๋ํธ์ state
ํด๋ฆญ์ผ๋ก ์ซ์๋ฅผ ๋์ด๋ Counter.js๋ฅผ ๋ง๋ค์ด ๋ด ์๋ค.
// Counter.js
import { Component } from "react";
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
number: 0 // state ์ด๊น๊ฐ ์ค์ ํ๊ธฐ
};
}
render() {
const {number} = this.state; // state ์กฐํ์ this.state๋ฅผ ์กฐํ
return (
<div>
<h1> {number} </h1>
<button
/* onClick ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ํด๋ฆญ ์ ์ซ์๋ฅผ ๋๋ ค์ฃผ๋ ๋ฒํผ ๋ง๋ค๊ธฐ */
onClick = {() => {
/* this.setState๋ฅผ ์ฌ์ฉํ์ฌ state์ ์๋ก์ด ๊ฐ์ ์ง์ */
this.setState( {number: number +1 } );
}}
>
+1
</button>
</div>
);
}
}
export default Counter;
๐ 3. ํจ์ ์ปดํฌ๋ํธ์์ useState ์ฌ์ฉํ๊ธฐ
(1) ๋ฐฐ์ด ๋น๊ตฌ์กฐํ ํ ๋น
- ๋ฐฐ์ด ๋น๊ตฌ์กฐํ ํ ๋น์ ๊ฐ์ฒด ๋น๊ตฌ์กฐํ ํ ๋น๊ณผ ๋น์ทํจ
- ๋ฐฐ์ด ์์ ๋ค์ด์๋ ๊ฐ์ ์ฝ๊ฒ ์ถ์ถํ๋๋ก ํ๋ ๋ฌธ๋ฒ
- Destructing ๋ฌธ๋ฒ์ ํตํด ํํ๋ฅผ ๋ง์ถ์ด ๊ฐ์ ์ฝ๊ฒ ํ ๋น
const array = [1, 2];
const one = array[0];
const two = array[1];
์ ์ฝ๋๋ ๋ฐฐ์ด ๋น๊ตฌ์กฐํ ํ ๋น์ ํตํด ๋ ๊ฐ๋จํ ํํ๋ ์ ์์ต๋๋ค.
const array = [1, 2];
const [one, two] = array;
(2) useState ์ฌ์ฉํ๊ธฐ
๋ฆฌ์กํธ 16.8 ์ด์ ๋ฒ์ ์์๋ ํจ์ ์ปดํฌ๋ํธ์์ state๋ฅผ ์ฌ์ฉํ ์ ์์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ ๋ฐ์ดํธ ์ดํ, Hooks๊ฐ ์๊ธฐ๋ฉด์ useState ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ํจ์ ์ปดํฌ๋ํธ์์๋ state๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. Hooks์ ์ข ๋ฅ ์ค ํ๋์ธ useState๋ฅผ ๋จผ์ ๋ฐฐ์ฐ๊ฒ ์ต๋๋ค.
useState๋ ๋ฐฐ์ด ๋น๊ตฌ์กฐํ ํ ๋น ๋ฌธ๋ฒ๊ณผ ๊ฐ์ต๋๋ค. useState๋ฅผ ํ์ฉํ ์ฝ๋๋ฅผ Say.js์ ์์ฑํด๋ด ์๋ค.
// Say.js
import { useState } from "react";
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage("์๋
ํ์ธ์!");
const onClickLeave = () => setMessage("์๋
ํ๊ฐ์ธ์!");
return (
<div>
<button onClick={onClickEnter}>์
์ฅ</button>
<button onClick={onClickLeave}>ํด์ฅ</button>
<h1> {message} </h1>
</div>
);
};
export default Say;
- useState ํจ์ ์ธ์์๋ ์ํ์ ์ด๊น๊ฐ์ ์ง์ , ๊ฐ์ฒด๊ฐ ์๋์ด๋ ๊ด์ฐฎ์
- ํจ์๋ฅผ ํธ์ถํ๋ฉด ๋ฐฐ์ด์ด ๋ฐํ
* ๋ฐฐ์ด์ ์ฒซ ๋ฒ์งธ ์์๋ ํ์ฌ ์ํ
* ๋ฐฐ์ด์ ๋ ๋ฒ์งธ ์์๋ ์ํ๋ฅผ ๋ฐ๊พธ์ด์ฃผ๋ ํจ์, setter ํจ์
// App.js
import Say from "./Say";
const App = () => {
return <Say />
}
export default App;
๐ 4. ํ ์ปดํฌ๋ํธ์์ useState ์ฌ๋ฌ ๋ฒ ์ฌ์ฉํ๊ธฐ
// Say.js
import { useState } from "react";
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage("์๋
ํ์ธ์!");
const onClickLeave = () => setMessage("์๋
ํ๊ฐ์ธ์!");
const [color, setColor] = useState('black');
return (
<div>
<button onClick={onClickEnter}>์
์ฅ</button>
<button onClick={onClickLeave}>ํด์ฅ</button>
<h1 style = {{ color }}> {message} </h1>
<button style={{ color: 'red'}} onClick={() => setColor('red')}>
๋นจ๊ฐ์
</button>
<button style={{ color: 'green'}} onClick={() => setColor('green')}>
์ด๋ก์
</button>
<button style={{ color: 'blue'}} onClick={() => setColor('blue')}>
ํ๋์
</button>
</div>
);
};
export default Say;
๐ 5. state ์ฌ์ฉ ์ ์ฃผ์ ์ฌํญ
- state ๊ฐ์ ๋ฐ๊ฟ๋๋ setState ํน์ useState๋ฅผ ํตํด ์ ๋ฌ๋ฐ์ ์ธํฐ(setter) ํจ์๋ฅผ ์ฌ์ฉ
- ๋ฐฐ์ด์ด๋ ๊ฐ์ฒด๋ฅผ ์ ๋ฐ์ดํธ ํ ๋๋ ์ฌ๋ณธ์ ๊ฐ์ ์ ๋ฐ์ดํธํ๊ณ ๊ทธ ์ฌ๋ณธ์ ์ํ๋ฅผ setState๋ ์ธํฐ ํจ์๋ก ์ ๋ฐ์ดํธ
- ์ฌ๋ณธ์ spread ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ๊ณ ๋ฐฐ์ด์ ์ฌ๋ณธ์ ๋ด์ฅ ํจ์๋ฅผ ํ์ฉ
'React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] 04. ์ด๋ฒคํธ ํธ๋ค๋ง (0) | 2022.10.10 |
---|---|
[React] # ํด๋์คํ ์ปดํฌ๋ํธ VS ํจ์ํ ์ปดํฌ๋ํธ (0) | 2022.10.09 |
[React] 02. JSX (0) | 2022.09.26 |
[React] # ๋ฆฌ์กํธ ํ๋ก์ ํธ ๋ง๋ค๊ธฐ (0) | 2022.09.25 |
[React] 01. ๋ฆฌ์กํธ ์์ (1) | 2022.09.24 |
์์คํ ๊ณต๊ฐ ๊ฐ์ฌํฉ๋๋ค