๐ ๏ธ ๊ตฌํํ ๊ธฐ๋ฅ
์ฑ์์ญ, ๊ฐ๋จ์ญ, ์๊ตฌ์ ์ญ ์ด ์ธ ๊ฐ์ ์ ๋ชฉ์ด ์๊ณ ํ์ฌ ๋์์ง๋ ๋ชจ๋ฌ์ฐฝ์๋ ์ ๋ชฉ์ด ์๊ตฌ์ ์ญ์ผ๋ก๋ง ๋ณด์ด๋๋ฐ, ๊ฐ ์ ๋ชฉ์ ํด๋ฆญํ๋ฉด ๊ทธ์ ๋ง๋ ๋ชจ๋ฌ์ฐฝ์ ๋์ฐ๊ณ ์ถ๋ค. ์๋ฅผ ๋ค์ด, ์ฑ์์ญ ์ ๋ชฉ์ ํด๋ฆญํ๋ฉด ์ฑ์์ญ ๋ง์ง์ ์๊ฐํ๋ ๋ชจ๋ฌ์ฐฝ์ด ๋์์ง๋๋ก ๋ง์ด๋ค.
As-Is: 3๊ฐ์ ์ ๋ชฉ์ด ์์ผ๋ ํ์ฌ๋ ๋ชจ๋ฌ์ฐฝ์ 1๊ฐ์ ์ ๋ชฉ์ผ๋ก๋ง ๋ธ
โก๏ธ To-be: ๊ฐ ์ ๋ชฉ์ ํด๋ฆญํ๋ฉด ํด๋น ์ ๋ชฉ์ ๊ฐ์ง ๋ชจ๋ฌ์ฐฝ์ ๋์ฐ๊ณ ์ถ์
๐ง ์ฒ์ ์์ฑํ ์ฝ๋
์ฒ์์๋ ์ ๋ชฉ๋น 1๊ฐ์ฉ ์ด 3๊ฐ์ state๋ฅผ ๋ง๋ค์ด ์ฃผ์ด์ผ ํ๋, ์๋๋ฉด ํ์ดํ ์ธ๋ฑ์ค์ ๋ง๊ฒ props๋ฅผ ๋ด๋ ค์ฃผ์ด์ผ ํ๋ ์๊ฐํ๋ค. ์ผ๋จ์ modalTitle์ด๋ผ๋ state๋ฅผ ์์ฑํด์ฃผ๊ณ , ์ผํญ์ฐ์ฐ์ ์์ ๋ฃ์ด์ฃผ์๋ค.
import './App.css';
import logo from './logo.svg';
import { useState } from 'react';
function App() {
let post = '๐ค ๋๋ง ์๋ ๋ง์ง ์ ๋ณดํ๊ธฐ';
let [title, setTitle] = useState(['์ฑ์์ญ', '๊ฐ๋จ์ญ', '์๊ตฌ์ ์ญ']);
let [thumb, setThumb] = useState([0,0,0]);
let [modal, setModal] = useState(false);
let [modalTitle] = useState(0); // ์ผ๋จ state๋ฅผ ๋ง๋ค์ด์ค
{
title.map(function(a, i){
return (
<div className="list" key={i}>
<h4 button onClick={() => { setModal(!modal) }}>{ title[i] })</h4>
</div>)
})
}
// ... ์๋ต
{modal === true ? <Modal
title={title}
setTitle={setTitle}
modalTitle={modalTitle} // ์ผํญ ์ฐ์ฐ์ ์์ state๋ฅผ ๋ฃ์ด์ค
/> : ''}
<h4>{ post }</h4>
</div>
);
}
function Modal(props) {
return(
<div className='modal'>
<h4>{props.title[modalTitle]}</h4> // state๋ฅผ ์์ฑํด์ค
</div>
)
}
export default App;
๐ก ํด๊ฒฐ ๊ณผ์
๋์ ์ธ UI ๊ตฌํํ๊ธฐ 3steps
1. html css๋ก ๋ฏธ๋ฆฌ ๋์์ธํ๋ค.
2. ํ์ฌ UI์ ์ํ๋ฅผ state๋ก ๋ง๋ค์ด ๋๋ค.
3. state ์ข ๋ฅ์ ๋ฐ๋ผ UI๊ฐ ์ด๋ป๊ฒ ๋ณด์ผ์ง ์์ฑํ๋ค.
1. html css๋ก ๋ฏธ๋ฆฌ ๋์์ธํ๋ค.
๋ง๋ค์ด์ ธ ์์. ํจ์ค.
2. ํ์ฌ UI์ ์ํ๋ฅผ state๋ก ๋ง๋ค์ด ๋๋ค.
์ฑ์, ๊ฐ๋จ, ์๊ตฌ์ ์ธ ๊ฐ์ง ์ํ๋ฅผ state์ ์ ์ฅํด ๋๊ธฐ. ์๋ฃํ์ผ๋ ํจ์ค.
// state ํ๋ ๋ ์ถ๊ฐ
// ์๋ฃ ํ์์ number๋ก ํํํ๊ฒ ์ (ex. 0์ด๋ฉด 0๋ฒ์งธ ์ ๋ชฉ์ด ๋ณด์ด๊ฒ๋)
// ๋ฌผ๋ก string๋ ๊ฐ๋ฅ
let [modalTitle] = useState(0);
3. state ์ข
๋ฅ์ ๋ฐ๋ผ UI๊ฐ ์ด๋ป๊ฒ ๋ณด์ผ์ง ์์ฑํ๋ค.
ModalTitle์ ์ธ๋ฑ์ค๊ฐ i๋ฒ์งธ๋ผ๋ฉด i๋ฒ์งธ ์ ๋ชฉ์ด ๋์ค๊ฒ ๋ง๋ค์ด์ผ ํ๋ค. ๋ฌผ๋ก ๊ฐ ์ ๋ชฉ์ ํด๋ฆญํ์ ๋ ํด๋น ์ ๋ชฉ์ด ๋์ค๋๋ก 3๊ฐ์ ์กฐ๊ฑด๋ฌธ์ ์จ๋ ๋์ง๋ง, ๊ทธ๋ผ ์ฝ๋๊ฐ ๋๋ฌด ๋ณต์กํด์ง๊ธฐ ๋๋ฌธ์ ๊ฐ๋ตํ๊ฒ ํํํด ๋ณด์.
๊ทธ๋ ๋ค๋ฉด ์ ๋ชฉ ๋ถ๋ถ์ modalTitle์ด๋ผ๋ state๋ฅผ ๋ฃ์ด์ฃผ๊ธฐ๋ง ํ๋ฉด ๋๋ ๊ฒ์ธ๊ฐ?
์๋๋ค.
์ฌ๊ธฐ์ ์ฃผ์ํ ์ ์ 'modalTitle'์ด๋ผ๋ state๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ธ function App์ ์ ์ธ๋์ด ์์ผ๋ฏ๋ก 'not defined' ์๋ฌ๊ฐ ๋ฌ๋ค.
function Modal(props) {
return(
<div className='modal'>
<h4>{props.title[modalTitle]}</h4>
.. // 'modalTitle' is not defined
๋ฐ๋ผ์ ์๋์ ๊ฐ์ด ์์ ์ปดํฌ๋ํธ์ธ function Modal ์์ state๋ฅผ props๋ก ์ ์กํด ์ฃผ์ด์ผ ํ๋ค.
function Modal(props) {
return(
<div className='modal'>
<h4>{ props.title[props.modalTitle] }</h4>
๋ค๋ง modalTitle์ด๋ผ๋ state๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ธ function App ์์ ์์ผ๋ฏ๋ก ๋ฑํ props๋ก ๋ด๋ ค ์ค ํ์๊ฐ ์๋ค. ์๋์ ๊ฐ์ด ๊ทธ๋๋ก state๋ฅผ ์ ์ด์ค๋ค.
{modal === true ? <Modal
title={title}
setTitle={setTitle}
modalTitle={modalTitle}
/> : ''}
๋ง์ง๋ง์ผ๋ก, ์ฐ๋ฆฌ์ ๋ณธ๋ ๋ชฉ์ ์ธ 'ModalTitle์ ์ธ๋ฑ์ค๊ฐ i๋ฒ์งธ๋ผ๋ฉด i๋ฒ์งธ ์ ๋ชฉ์ด ๋์ค๊ฒ ๋ง๋ค์ด์ผ ํ๋ค.'๋ฅผ ๊ตฌํํ๊ธฐ ์ํด state ๋ณ๊ฒฝ ํจ์๋ ์ถ๊ฐํ๋ค.
let [modalTitle, setModalTitle] = useState(0);
๊ทธ๋ฆฌ๊ณ i ๋ผ๋ ๋ณ์๋ฅผ ํ์ฉํด ๋ชจ๋ฌ ๋ฒํผ์ ํด๋ฆญํ์ ๋ ํด๋น ์ ๋ชฉ์ด ๋์ค๋๋ก ๋ง๋ ๋ค. map์ด๋ผ๋ ๋ฐ๋ณต๋ฌธ ์์์ ์ด i๋ ๋ฐ๋ณต๋ฌธ์ด ๋ ๋๋ง๋ค 0์ด ๋๊ณ 1์ด ๋๊ณ 2๊ฐ ๋๊ฒ๋ ๋ง๋๋ ๋ณ์๋ค.
{
title.map(function(a, i){
return (
<div className="list" key={i}>
<h4 button onClick={() => { setModal(!modal); setModalTitle(i) }}>{ title[i] })</h4>
</div>)
})
}
๋ฌผ๋ก , ๊ตณ์ด state๋ฅผ props๋ก ๋ด๋ ค ์ค ํ์ ์์ด ์๋์ ๊ฐ์ด function Modal์ state๋ฅผ ์์ฑํด ์ค ์๋ ์๊ฒ ์ง๋ง, ์ด modalTitle์ ์ฌ๋ฌ ๊ตฐ๋ฐ์์ ์ฐ์ธ๋ค๋ฉด ์ต์์ ์ปดํฌ๋ํธ์ธ function App์ ์์ฑํด ์ฃผ๋ ๊ฒ์ด ์ข๋ค. state๋ ์์์ ์๋๋ก๋ ์ ์กํด ์ค ์ ์์ง๋ง, ์๋์์ ์๋ก๋ ์ ์กํด ์ฃผ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ด๋ค.
function Modal(props) {
let [modalTitle, setModalTitle] = useState(0); // state๋ฅผ ์์ ์ปดํฌ๋ํธ์๋ ์์ฑ
return(
<div className='modal'>
<h4>{ props.title[props.modalTitle] }</h4>
๐คฉ ๊ฐ์ ํ ์ฝ๋
import './App.css';
import logo from './logo.svg';
import { useState } from 'react';
function App() {
let post = '๐ค ๋๋ง ์๋ ๋ง์ง ์ ๋ณดํ๊ธฐ';
let [title, setTitle] = useState(['์ฑ์์ญ', '๊ฐ๋จ์ญ', '์๊ตฌ์ ์ญ']);
let [thumb, setThumb] = useState([0,0,0]);
let [modal, setModal] = useState(false);
let [modalTitle, setModalTitle] = useState(0);
{
title.map(function(a, i){
return (
<div className="list" key={i}>
<h4 button onClick={() => { setModal(!modal); setModalTitle(i) }}>{ title[i] })</h4>
</div>)
})
}
// ... ์๋ต
{modal === true ? <Modal
title={title}
setTitle={setTitle}
modalTitle={modalTitle}
/> : ''}
<h4>{ post }</h4>
</div>
);
}
function Modal(props) {
return(
<div className='modal'>
<h4>{ props.title[props.modalTitle] }</h4>
</div>
)
}
export default App;
๐ฅณ ๊ธฐ๋ฅ ๊ตฌํ

'๐ Project > Solo' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[๐ ๋ง์ง ๊ณต์ ์ฌ์ดํธ] ๋ฆฌ์กํธ๋ก CRUD ๊ตฌํํ๊ธฐ (0) | 2023.05.16 |
---|
๋๊ธ