<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;

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ