Hooks๐Ÿ’ช

lillly02vยท2022๋…„ 5์›” 19์ผ
0
post-thumbnail

Hook์€ ํ•ญ์ƒ use๋ผ๋Š” ํ‚ค์›Œ๋“œ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.(use~๋ฅผ hook์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.(useState, useEffect))

Hook์ด๋ž€?

Hook์€ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์—์„œ React state์™€ ์ƒ๋ช…์ฃผ๊ธฐ ๊ธฐ๋Šฅ(lifecycle features)์„ โ€œ์—ฐ๋™(hook into)โ€œํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

Hook์€ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์—์„œ state๋ฅผ ๊ฐ–๊ฒŒ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.
ํ›…์€ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์— ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ํ›…์„ ์ด์šฉํ•˜๋ฉด ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์— ์ƒํƒฏ๊ฐ’์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ์ž์‹ ์š”์†Œ์— ์ ‘๊ทผํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

Hook์€ ์™œ ๋“ฑ์žฅํ–ˆ์„๊นŒ์š”?

๋ฆฌ์•กํŠธ ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ํ•จ์ˆ˜ํ˜• component์—์„œ๋Š” ์‚ฌ์šฉ์„ ๋ชปํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋” ๊ฐ„๊ฒฐํ•˜๊ณ  ๋น ๋ฅด๋”๋ผ๋„ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ๋ฅผ ์จ์™”์Šต๋‹ˆ๋‹ค.
React 16.8 Hooks ์—…๋ฐ์ดํŠธ๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
Hook ๋“ฑ์žฅ ์ด์œ  : Class componet์˜ ๋‹จ์  ๋ณด์™„(๊ธด ์ฝ”๋“œ, ๋ณต์žกํ•จ), ์žฌ์‚ฌ์šฉ์„ฑ ๊ฐ•ํ™”๋ฅผ ์œ„ํ•ด

<์ปดํฌ๋„ŒํŠธ์˜ Lifecycle>


(3๋‹จ๊ณ„)
์ปดํฌ๋„ŒํŠธ ํ™”๋ฉด์— ์ฒซ ๋ Œ๋”๋ง(mount)-state์กฐ์ž‘ ๋“ฑ ์—…๋ฐ์ดํŠธ(update)-ํ™”๋ฉด์—์„œ ์‚ฌ๋ผ์งˆ ๋•Œ(unmount)

  • ๋งˆ์šดํŠธ๋Š” DOM์ด ์ƒ์„ฑ๋˜๊ณ  ์›น ๋ธŒ๋ผ์šฐ์ € ์ƒ์—์„œ ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์„ ๋œปํ•˜๊ณ , ๋ฐ˜๋Œ€๋กœ ์–ธ๋งˆ์šดํŠธ๋Š” DOM์—์„œ ์ œ๊ฑฐ๋˜๋Š” ๊ฒƒ์„ ๋œปํ•œ๋‹ค.
  • ์ฃผ์˜ํ•˜์—ฌ ๋ณผ ๊ฒƒ์€ ์—…๋ฐ์ดํŠธ ๋ถ€๋ถ„์ธ๋ฐ, ์—…๋ฐ์ดํŠธ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ 4๊ฐ€์ง€ ์ƒํ™ฉ์—์„œ ๋ฐœ์ƒํ•œ๋‹ค.
    props๊ฐ€ ๋ฐ”๋€” ๋•Œ
    state๊ฐ€ ๋ฐ”๋€” ๋•Œ
    ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋  ๋•Œ
    this.forceUpdate๋กœ ๊ฐ•์ œ๋กœ ๋ Œ๋”๋ง์„ ํŠธ๋ฆฌ๊ฑฐํ•  ๋•Œ

useState

useState: ์ƒํƒœ๊ฐ’์„ ๊ด€๋ฆฌํ•˜๋Š” ํ›…. useState ํ›…์„ ์ด์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ์— ์ƒํƒฏ๊ฐ’์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
useState ํ›…์ด ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฐฐ์—ด์˜ ๋‘ ๋ฒˆ์งธ ์›์†Œ๋Š” ์Šคํ…Œ์ดํŠธ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

const App = () => {
  const [count, setCount] = useState(0); //์ดˆ๊ธฐ์ƒํƒœ
  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
};

class ์ปดํฌ๋„ŒํŠธ

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

https://ko.reactjs.org/docs/hooks-state.html


useEffect

useEffect: ๋ฆฌ์•กํŠธ์—๊ฒŒ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง ์ดํ›„์— ์–ด๋–ค ์ผ์„ ์ˆ˜ํ–‰ํ•ด์•ผํ•˜๋Š” ์ง€๋ฅผ ๋งํ•œ๋‹ค. ๋ฆฌ์•กํŠธ๋Š” ์šฐ๋ฆฌ๊ฐ€ ๋„˜๊ธด ํ•จ์ˆ˜๋ฅผ ๊ธฐ์–ตํ–ˆ๋‹ค๊ฐ€( ์ด ํ•จ์ˆ˜๋ฅผ 'effect') DOM ์—…๋ฐ์ดํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•œ ์ดํ›„์— ๋ถˆ๋Ÿฌ๋‚ธ ๊ฒƒ์ž…๋‹ˆ๋‹ค. useEffect ์•ˆ์— ์žˆ๋Š” ์ฝ”๋“œ๋Š” html ๋ Œ๋”๋ง ํ›„์— ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.(for๋ฌธ i<1000000์ผ๋•Œ ์œ ์šฉ, ์–ด๋ ค์šด ์—ฐ์‚ฐ, ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๊ฐ€์ ธ์˜ค๋Š” ์ž‘์—…, ํƒ€์ด๋จธ ์žฅ์ฐฉ)

(1) ๋ Œ๋”๋ง ๋ ๋•Œ ๋งˆ๋‹ค ์‹คํ–‰

useEffect ( () => {
  console.log("hi");//์ž‘์—…   mount,update์‹œ ์ฝ”๋“œ ์‹คํ–‰
});

(2) ๋ Œ๋”๋ง ๋ ๋•Œ ๋งˆ๋‹ค ์‹คํ–‰

useEffect ( () => {
  console.log("hi");//์ž‘์—…   mount์‹œ ์ฝ”๋“œ 1ํšŒ๋งŒ ์‹คํ–‰
},[]);

(3) ํ™”๋ฉด์— ์ฒซ ๋ Œ๋”๋ง ๋ ๋•Œ ์‹คํ–‰(์ƒˆ๋กœ๊ณ ์นจ), value๊ฐ’์ด ๋ฐ”๋€” ๋•Œ ์‹คํ–‰

useEffect ( () => {
  console.log("hi");//์ž‘์—…
},[value]); //๋‘๋ฒˆ์งธ ์ธ์ž์ธ ๋ฐฐ์—ด์„ dependency array๋ผ๊ณ  ํ•จ. state๊ฐ’์„ ๋„ฃ์–ด์คŒ, state๊ฐ€ ๋ณ€ํ™”๋  ๋•Œ ๋งˆ๋‹ค ์ž‘์—…์ด ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.

(4)

cont Timer = (props) => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('ํƒ€์ด๋จธ ๋Œ์•„๊ฐ€๋Š”์ค‘...');
    }, 1000);
    
    return () => {   //๋ณ„๋ช…: clean up function. unmount์‹œ ์‹คํ–‰๋จ(์ปดํฌ๋„ŒํŠธ ์‚ญ์ œ๋์„์‹œ)
      clearInterval(timer);
      console.log('ํƒ€์ด๋จธ๊ฐ€ ์ข…๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.');
    };
  }, []);
  
  return (
  	<div>
      <span>ํƒ€์ด๋จธ๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์ฝ˜์†”์„ ๋ณด์„ธ์š”!</span>
    </div>
  );
};

์ปค์Šคํ…€ ํ›…

์ปค์Šคํ…€ ํ›… ๋งŒ๋“ค๊ธฐ(ํ›…๋“ค์ด ๋ฐ˜๋ณตํ•  ๊ฒฝ์šฐ)
use{Name}

https://ko.reactjs.org/docs/hooks-custom.html

0๊ฐœ์˜ ๋Œ“๊ธ€