๋ชฉ์ฐจ
์ด์ ๊ธ โผ
1. state
React์ JSX๋ฅผ ์ด์ฉํ์ฌ ํ ํ๋ฆฟ์ ์์ฑํ ๋ ์ค์ํ ์๋ฃ๋ค์ ์ ์ ์ ์ฅํด์ผํ ๋๊ฐ ์๋ค.
์๋ฃ ์ ์ฅ ๋ฐฉ๋ฒ_1) ๋ณ์๋ฅผ ์ด์ฉํ๋ค.
let, const ๋ฑ์ ํ์ฉํ๋ค.
functoin App(){
let name = "Kassid"
return (
<div className="App">
...
</div>
);
}
์๋ฃ ์ ์ฅ ๋ฐฉ๋ฒ_2) state๋ฅผ ์ด์ฉํ๋ค.
๋ณ์ ์ธ์๋ state๋ฅผ ํ์ฉํ์ฌ ์๋ฃ๋ฅผ ์ ์ฅํ ์ ์๋ค.
๋จผ์ useState๋ฅผ importํ๋ค.
import { useState } from 'react';
App( ) ๋ด์์ state๋ฅผ ์ ์ํ๋ค.
let [state๋ช
, state ๋ณ๊ฒฝํจ์๋ช
] = useState(์ด๊ธฐ๊ฐ);
useState(๊ฐ)์ [๊ฐ, ๊ฐ๋ณ๊ฒฝ์ ๋์์ฃผ๋ ํจ์]์ ํํ๋ก ๋ฐํํ๋ค.
์ด๋ฅผ destructuring ๋ฌธ๋ฒ์ผ๋ก ์ง์ ํ ๋ณ์๋ช ๊ณผ ํจ์๋ช ์ ๊ฐ๊ฐ ํ ๋นํ๋ ๊ฒ์ด๋ค.
functoin App(){
let [name, setName] = "Kassid"
return (
<div className="App">
...
</div>
);
}
์ฌ๊ธฐ๊น์ง๋ ๋ ๋ฐฉ๋ฒ์ ๋ณ ์ฐจ์ด๊ฐ ์์ด ๋ณด์ธ๋ค.
๊ทธ๋ ๋ค๋ฉด ๊ตณ์ด ์ state๋ฅผ ์จ์ผํ ๊น?
state์ ๋ณ์์ ์ฐจ์ด์
์ผ๋ฐ ๋ณ์๋ ๊ฐ์ ๋ณ๊ฒฝํ๋ค๋ฉด html์ ์๋ ๋ฐ์์ด ์ ๋๋ค.
ํ์ง๋ง state๋ ๋ณ๊ฒฝ ์ html์ด ์๋ ๋ ๋๋ง์ด ๋๋ค.
๋ฐ๋ผ์ ๊ฐ ๋ณ๋ ์ ์๋์ผ๋ก html์ ๋ฐ์์ด ๋๋๋ก ๋ง๋ค๊ณ ์ถ์ ๊ฒฝ์ฐ state๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
(์ ๋ณ๊ฒฝ๋๋ ๊ฑด ๊ตณ์ด ํ ํ์ ์๊ณ , ๋ฐ๋ ๊ฒ๋ค์ ์ง์ ํด๋ณด์!)
App.js
const author = "KASSID";
function App() {
let [music, setMusic] = useState(
[{"type": "Rock", "title": "Summer", "singer": "The Volunteers"},
{"type": "HipHop", "title": "๊ทธ ํด ์ฌ๋ฆ", "singer": "์ ํ "},
{"type": "Dance", "title": "Hype Boy", "singer": "New Jeans"}]
)
function setTypeImg(v){
switch (v) {
case "Rock":
return guitar;
break;
case "HipHop":
return hiphop;
break;
case "Dance":
return dance;
break;
default:
break;
}};
return (
<div className="App">
<div className="wrap">
<div className="nav-container">
<div className="nav">
<div className="logo-container">
<img className="logo" src={logo} alt="logo" />
</div>
<h1>{author} MUSIC</h1>
</div>
</div>
<div className="music-list-container">
{/* 1 */}
<div className="music-list">
<div className="music-type">
<img className="music-type-img" src={setTypeImg(music[0].type)} alt="" />
<span className="music-type-desc">
{music[0].type}
</span>
</div>
<div className="music-info-container">
<div className="music-info">
<h3 className="music-title">{music[0].title}</h3>
<span className="music-singer">{music[0].singer}</span>
</div>
<div className="music-stream-container">
<a href="."><img src={youtube} alt="" /></a>
<a href="."><img src={spotify} alt="" /></a>
<a href="."><img src={apple} alt="" /></a>
</div>
</div>
</div>
{/* 2 */}
<div className="music-list">
<div className="music-type">
<img className="music-type-img" src={setTypeImg(music[1].type)} alt="" />
<span className="music-type-desc">
HipHop
</span>
</div>
<div className="music-info-container">
<div className="music-info">
<h3 className="music-title">{music[1].title}</h3>
<span className="music-singer">{music[1].singer}</span>
</div>
<div className="music-stream-container">
<a href="."><img src={youtube} alt="" /></a>
<a href="."><img src={spotify} alt="" /></a>
<a href="."><img src={apple} alt="" /></a>
</div>
</div>
</div>
{/* 3 */}
<div className="music-list">
<div className="music-type">
<img className="music-type-img" src={setTypeImg(music[2].type)} alt="" />
<span className="music-type-desc">
Dance
</span>
</div>
<div className="music-info-container">
<div className="music-info">
<h3 className="music-title">{music[2].title}</h3>
<span className="music-singer">{music[2].singer}</span>
</div>
<div className="music-stream-container">
<a href="."><img src={youtube} alt="" /></a>
<a href="."><img src={spotify} alt="" /></a>
<a href="."><img src={apple} alt="" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
2. state ๋ณ๊ฒฝ ํจ์
state๋ฅผ ๋ณ๊ฒฝํ ๋๋ ๊ผญ state๋ณ๊ฒฝํจ์๋ฅผ ์จ์ผํ๋ค.
useState()์์ ๋ ๋ฒ์งธ ๋ฐํ๊ฐ์ด ๋ฐ๋ก ์ด๊ฒ์ด๋ค.
let [a, setA] = useState(0);
๋ฐ๋ผ์ ์ ์์์ ๊ฐ์ ํํ๋ก ๊ฐ์ ํ ๋นํ ๊ฒฝ์ฐ setA๋ useState()๋ก ๋ถํฐํจ์๋ช ์ ๋ฐ์๊ธฐ ๋๋ฌธ์ setA()๋ก ํ์ฉํ ์ ์๋ค.
์ด ํจ์๋ setA( ๋ณ๊ฒฝํ state )์ ํํ๋ก
state ๋ณ๊ฒฝ์ ์์๋ก ์ข์์ ๋ฒํผ์ ๋ง๋ค์ด ๋ณด์!
JSX์์ ํ๊ทธ์ ํด๋ฆญ ์ด๋ฒคํธ๋ onClick={ ํจ์ }๋ก ์ง์ ํ ์ ์๋ค.
let [thumbs, setThumbs] = useState(0);
...
<div className="music-thumbs-container">
<span onClick={()=>{ setThumbs(thumbs+1) }}>๐ ์ข์์</span>
<span>{thumbs}</span>
</div>
์์ ๊ฐ์ ๋ฐฉ๋ฒ์ผ๋ก state๋ฅผ ์ ๋ฐ์ดํธํ ์ ์๋ค.
๋ํ state๋ฅผ ๋ณ๊ฒฝํ๋ฉด ์ฌ๋ ๋๋ง์ด ๋๊ธฐ ๋๋ฌธ์ ํ๋ฉด์๋ ํด๋น ์ ๋ณด๊ฐ ๋ฐ์์ด ๋๋ค.
๊ฒฐ๊ณผํ๋ฉด
array, object state๋ฅผ ๋ณ๊ฒฝํ ๋
๊ฐ๋จํ ๋ณ์๋ฅผ ๋ณ๊ฒฝํ๋ ๊ฒ์ด ์๋ array, object๋ฅผ ๋ณ๊ฒฝํด์ผํ๋ ๊ฒฝ์ฐ์๋ ์ด๋ป๊ฒ ํด์ผํ ๊น?
1) ์ง์ ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ
...
let [music, setMusic] = useState(
[{"type": "Rock", "title": "Summer", "singer": "The Volunteers"},
{"type": "HipHop", "title": "๊ทธ ํด ์ฌ๋ฆ", "singer": "์ ํ "},
{"type": "Dance", "title": "Hype Boy", "singer": "New Jeans"}]
)
return(
<button onClick={()=>{setMusic(
[{"type": "Dance", "title": "Hype Boy", "singer": "New Jeans"},
{"type": "Rock", "title": "Summer", "singer": "The Volunteers"},
{"type": "HipHop", "title": "๊ทธ ํด ์ฌ๋ฆ", "singer": "์ ํ "}]
)}}>
)
...
๊ธฐ์กด state๋ด ์ฝํ ์ธ ๋ฅผ ๋ณ๊ฒฝํด๋ณด๋ ์์์ด๋ค.
์ ๋ฐฉ๋ฒ์ ์ง์ ๊ทธ ์์๋ฅผ ๋ณ๊ฒฝํ ๊ฒ์ state๋ณ๊ฒฝ ํจ์์ ์ ๋ฌํ์ฌ ๊ตฌํํ๋ค.
๋น์ฐํ ์ ์์ ์ผ๋ก ์๋ํ์ง๋ง ๋ง์ฝ ๊ทธ ์์ด ๋ฐฉ๋ํ๋ค๋ฉด ์ด๊ฒ๋ค์ ํ๋ํ๋ ๋ค ์ ์ ์๋ ์๋ ๋ ธ๋ฆ์ด๋ค.
2) ๋ฉ์๋ ํ์ฉ
...
let [music, setMusic] = useState(
[{"type": "Rock", "title": "Summer", "singer": "The Volunteers"},
{"type": "HipHop", "title": "๊ทธ ํด ์ฌ๋ฆ", "singer": "์ ํ "},
{"type": "Dance", "title": "Hype Boy", "singer": "New Jeans"}]
)
return(
<button onClick={()=>{
let copy = [...music];
copy.unshift(copy.pop());
setMusic(copy);
}}>UPDATE</button>
)
...
์ด์ฒ๋ผ ๋ฉ์๋๋ฅผ ํ์ฉํ๋ฉด ๊ฐํธํ๊ฒ array๋ object state๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ค.
๊ฒฐ๊ณผํ๋ฉด
state ๋ณ๊ฒฝ ๋์์๋ฆฌ
์ง์ ์ฝ๋ ์์๋ฅผ ์ดํด๋ณด๋ฉด copy๋ผ๋ ๋ณ์์ ๊ธฐ์กด state๋ฅผ ํ ๋นํ๋๋ฐ,
์ด๋ [...state] ํํ๋ก ํ ๋นํ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
์ด๊ฒ์ ๋ํด์ ์กฐ๊ธ ์์๋ณด์.
...
let [music, setMusic] = useState(
[{"type": "Rock", "title": "Summer", "singer": "The Volunteers"},
{"type": "HipHop", "title": "๊ทธ ํด ์ฌ๋ฆ", "singer": "์ ํ "},
{"type": "Dance", "title": "Hype Boy", "singer": "New Jeans"}]
)
return(
<button onClick={()=>{
let copy = music; // ๋จ์ ํ ๋น
copy.unshift(copy.pop());
setMusic(copy);
}}>UPDATE</button>
)
...
๋จ์ํ ํ ๋นํ ๊ฒฝ์ฐ ์์ ๋ณต์ฌ๊ฐ ์ผ์ด๋๋ค.
์ด ๊ฒฝ์ฐ ๋ ๋ณ์๊ฐ ์ค์ ๊ฐ์ด ๋ค์ด์๋ Ram์ ์ฃผ์๋ฅผ ํจ๊ป ๊ฐ๋ฆฌํค๋ ํํ๋ฅผ ๊ฐ์ง๋ค.
๋ฐ๋ผ์ copy์ ๊ธฐ์กด state๊ฐ ๊ฐ์ ๊ฒ์ผ๋ก ์ธ์ํ๊ธฐ ๋๋ฌธ์ state ๋ณ๊ฒฝ์ด ์ผ์ด๋์ง ์๋๋ค.
let arr1 = ['a', 'b'];
let arr2 = arr1; // ์์ ๋ณต์ฌ
arr2[0] = 'c';
console.log(arr1, arr2);
console.log(arr1 === arr2);
>>> ['c', 'b'] ['c', 'b']
>>> true // ๊ฐ์ ๊ฒ์ผ๋ก ์ธ์
=== ์ฐ์ฐ์๋ก๋ ํ์ธํ ์ ์๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ๊ฒ์
spread operator[...~] ์ด๋ค.
โป spread operator[...~]
array ํน์ object ์๋ฃํ์ ์ผ์ชฝ์ ์ 3๊ฐ๋ฅผ ๋ถ์ด๋ ๊ฒ์ด๊ณ ,
๊ดํธ๋ฅผ ๋ฒ๊ฒจ๋ด๋ ๊ธฐ๋ฅ์ ํ๋ค.
ex) ...['a', 'b'] === 'a', 'b'
์ด ๋ฌธ๋ฒ์ ๋ณต์ฌ์ ํ์ฉํ๋ฉด ์์์์ ์ฝ๋์ ๊ฐ์ด
[...๋ณต์ฌ๋์] ์ ํํ๋ก ์ฌ์ฉํ๋ค.
์ด๋ ๋ณต์ฌํ ์๋ฃ์ ๊ดํธ๋ฅผ ๋ฒ๊ธฐ๊ณ ๋ค์ ์์๋ฌ๋ผ๋ ์๋ฏธ๋ฅผ ๊ฐ์ง๋ค.
์ฆ, ์๋ก์ด ๊ฐ์ฒด๋ก ์ธ์์ ์ํค๋ ๊ฒ์ด๋ค.
๋ฐ๋ผ์ ์ด๋ฅผ ์ด์ฉํ์ฌ ๊ฐ๋ง์ ๋ณต์ฌํ๋ ๊น์ ๋ณต์ฌ๋ฅผ ๊ตฌํํ ์ ์๋ค.
'๐ | WEB DEV > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] 4. ๋์ ์ธ UI ์ ์ํ๊ธฐ (0) | 2023.05.28 |
---|---|
[React] 3. ์ปดํฌ๋ํธ (Component) (0) | 2023.05.28 |
[React] 2-1. array state ์ ๋ ฌํ๊ธฐ ( .sort()ํ์ฉ) (0) | 2023.05.27 |
[React] 1. JSX (0) | 2023.05.07 |
[React] 0. React๋ฅผ ์ฌ์ฉํ๋ ์ด์ & ์ด๊ธฐ ์ธํ (0) | 2023.05.05 |
๋๊ธ