<React> ๐ Hook - useState & useEffect
์ค๋์ useState๋ฅผ ์ข๋ ์์๋ณด๊ณ useEffect๋ ์๊ฐํด๋ณด๋ ค๊ณ ํฉ๋๋ค. useEffect๋ function Component์์๋ life cycle method๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋๋ค.
useEffect
useEffect๋ class Component์ componentDidMount์ componentDidUpdate๋ฅผ ํฉ์ณ๋์๋ค๊ณ ํ ์ ์์ต๋๋ค. ๊ทธ๋์ ์ฝ๋ฐฑํจ์๋ง ์ ๋ฌํ๊ฒ ๋๋ฉด mount๋ ๋, update๋ ๋ ๋ชจ๋ ์ฝ๋ฐฑํจ์๋ฅผ ํธ์ถํ๊ฒ ๋ฉ๋๋ค.
Q) ๊ทธ๋ ๋ค๋ฉด mount๋ ๋๋ง ์ฝ๋ฐฑํจ์๋ฅผ ํธ์ถํ๊ณ ์ถ๋ค๋ฉด ์ด๋ป๊ฒ ํ ๊น์?
A) ๋๋ฒ์งธ ์ธ์๋ก ๋น ๋ฐฐ์ด์ ์ ๋ฌํ๋ฉด ๋ฉ๋๋ค.
Q) ํน์ state๋ props๊ฐ ์
๋ฐ์ดํธ ๋ ๋๋ ์ฝ๋ฐฑํจ์๋ฅผ ํธ์ถํ๊ณ ์ถ๋ค๋ฉด ์ด๋ป๊ฒ ํ ๊น์?
A) ํน์ state๋ props๋ฅผ ํฌํจํ ๋ฐฐ์ด์ ๋๋ฒ์งธ ์ธ์๋ก ์ ๋ฌํ๋ฉด ๋ฉ๋๋ค.
๋ฐ๋ผ์ DOM์ ์ง์ ์ ๊ทผํ๋ค๋๊ฐ ๋น๋๊ธฐ ํต์ ์ ํ๋ค๋๊ฐ๋ฅผ ์ฌ๊ธฐ์ ํด์ฃผ๋ฉด ๋๊ฒ ์ต๋๋ค.
useState
useState๋ฅผ ํตํด function Component์์ state๋ฅผ ์ฌ์ฉํ๊ณ ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด๊ฒ ์ต๋๋ค.
- setName
setName์ ์ธ์๋ก name์ ํ ๋น๋ ๊ฐ์ ์ ๋ฌํ ๊ฒ์ ๋๋ค. ์ด๊ฒ ์คํ๋๊ณ ๋๋ฉด minseok์ ํ๋ฉด์์ ํ์ธํ ์ ์๊ฒ ๋ฉ๋๋ค.
import React, {useState} from 'react';
function App(){
const [name, setName] = useState("");
const onChange = e => {
setName(e.target.value);
}
return (
<>
<input
type="text"
value={name}
onChange={onChange}
/>
<b>name:</b> {name}
</>
);
}
export default App;
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(<React> ๐ Hook - useState & useEffect), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@since-1994/React-useState-useEffect์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค