๋ชฉ์ฐจ
์ด์ ๊ธ โผ
0. 2023.05.05 - [๐ | WEB DEV/React] - [React] 0. React๋ฅผ ์ฌ์ฉํ๋ ์ด์ & ์ด๊ธฐ ์ธํ
1. 2023.05.07 - [๐ | WEB DEV/React] - [React] 1. JSX
2. 2023.05.26 - [๐ | WEB DEV/React] - [React] 2. state (๋ณ์, array, object)
2-1. 2023.05.27 - [๐ | WEB DEV/React] - [React] 2-1. array state ์ ๋ ฌํ๊ธฐ ( .sort()ํ์ฉ)
3. 2023.05.28 - [๐ | WEB DEV/React] - [React] 3. ์ปดํฌ๋ํธ (Component)
์ ํฌ์คํ ์์ ๋ค๋ฃจ์๋ ์ปดํฌ๋ํธ์ ์์๋ก ๋ชจ๋ฌ(Modal)์ฐฝ์ ์ ์ํ์๋ค.
์ด๋ฅผ ์์ฑํ๋ฉฐ ๋์ ์ธ UI๋ฅผ ์ ์ํด๋ณด์!
1. ๋์ ์ธ UI ๋ง๋ค๊ธฐ
์ ์ ์ ์กฐ์์ ๋ฐ๋ผ ํํ๊ฐ ๋ฐ๋๋ UI๋ฅผ ๋ง๋ค๊ธฐ ์ํด์๋ ์๋์ ๋จ๊ณ๋ฅผ ๋ฐ๋ผ์ ๋ง๋ค๋ฉด ๋๋ค!
1) html ๋ธ๋ก ๋ง๋ค๊ธฐ
2) UI์ ์ํ๋ฅผ state๋ก ๋ง๋ค๊ธฐ
3) state์ ๋ฐ๋ฅธ UI์ ํํ๋ฅผ ์กฐ๊ฑด๋ฌธ ๋ฑ์ผ๋ก ์์ฑ
4) state ์กฐ์ํ๊ธฐ
1) html ๋ธ๋ก ๋ง๋ค๊ธฐ
function Modal(){
return(
<>
<div className="modal-container">
<div className="modal">
<div className="bar"></div>
<div className="modal-title-container modal-inner-container">
<span>์ ๋ชฉ</span>
<div className="modal-title">Title</div>
</div>
<div className="modal-singer-container modal-inner-container">
<span>๊ฐ์</span>
<div className="modal-singer">Singer</div>
</div>
<div className="modal-detail-container modal-inner-container">
<span>์ธ๋ถ์ฌํญ</span>
<div className="modal-detail">Detail</div>
</div>
</div>
</div>
</>
);
}
์กฐ์ํ UI์ html๊ณผ css๋ฅผ ์์ฑํ๋ค. (์ปดํฌ๋ํธ๊ฐ ์๋์ด๋ ๊ด๊ณ ์์)
2) UI์ ์ํ๋ฅผ state๋ก ๋ง๋ค๊ธฐ
UI์ ์ํ์ ๋ณด๋ฅผ state๋ก ์ ์ฅํ๋ค.
์ฆ, ๋ณ์์ ์ ์ฅ๋ ๊ฐ์ ์ฐธ์กฐํ์ฌ ์กฐ์์ ํ ๊ฒ์ด๋ฏ๋ก ํ ์ํ๋ฅผ ์๋ณํ ๋ณ์๋ฅผ ๋ง๋ค๊ฒ ๋ค๋ ์๋ฏธ์ด๋ค.
const [modal, setModal] = useState('closed');
์ด์ฒ๋ผ ์์๋ก ์ํ ์ ๋ณด๋ฅผ ์ ์ฅํ๋ค.
๋ฌผ๋ก state ์ ์ ์์๋ ํ ์ํ๋ฅผ ์ ์ฅํด์ผํ๋ค.
3) state์ ๋ฐ๋ฅธ UI์ ํํ๋ฅผ ์กฐ๊ฑด๋ฌธ ๋ฑ์ผ๋ก ์์ฑ
state์ ๋ด๊ธด ๊ฐ์ ์ฐธ์กฐํ์ฌ UI์ ํํ๋ฅผ ์กฐ๊ฑด๋ฌธ์ผ๋ก ์กฐ์ํ๋ค.
์ด๋ ์ค๊ดํธ{ }๋ฅผ ํ์ฉํ์ฌ ๋ธ๋ก์ ๋ง๋ค๊ณ ๊ทธ ์์ ์กฐ๊ฑด๋ฌธ์ ๋ฃ์ด์ค๋ค.
function App(){
return(
...
{
์กฐ๊ฑด๋ฌธ
}
...
)
}
์ด๋ ์ฃผ์ํ ์ ์ ํ์ฌ html ๋ฌธ์๋ฅผ ์์ฑ์ค์ด๋ฏ๋ก
if ๋ฌธ์ ์ฌ์ฉํ ์ ์๊ณ ์ผํญ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํด์ผํ๋ค.
{
modal === 'closed' ? null : <Modal></Modal>
}
4) state ์กฐ์ํ๊ธฐ
์ด์ state๋ฅผ ์กฐ์ํ ์ ์๋๋ก ๋ง๋ค์ด์ฃผ๋ฉด ๋๋ค.
...
<div className="music-list"
onClick={()=>{modal === 'closed' ? setModal('open'):setModal('closed')}}>
...
์ ์์์์๋ onClick ์์ฑ์์ ์กฐ์ํ ์ ์๋๋ก ํ์๋ค.
// ๋ง์ฝ ์กฐ์ํ state๊ฐ boolean์ผ ๊ฒฝ์ฐ
<button onClick={ ()=>{ setModal(!modal) } }> CHANGE </button>
'๐ | WEB DEV > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] 6. props (0) | 2023.05.29 |
---|---|
[React] 5. ๋ฐ๋ณต๋๋ ๋ถ๋ถ ์ถ์ฝํ๊ธฐ (map) (0) | 2023.05.28 |
[React] 3. ์ปดํฌ๋ํธ (Component) (0) | 2023.05.28 |
[React] 2-1. array state ์ ๋ ฌํ๊ธฐ ( .sort()ํ์ฉ) (0) | 2023.05.27 |
[React] 2. state (๋ณ์, array, object) (0) | 2023.05.26 |
๋๊ธ