리액트 - hook 함수

카테고리 없음

리액트 - hook 함수

주우우우우우우욱 2025. 4. 7. 21:45

728x90

SMALL

오늘은 배웠던 hook함수에 대해서 리뷰해보려고 한다.

hook함수는 좀 많이 사용되기도 하는거 같아서 적어놓고 까먹으면 다시 보러 와야겠다.

useState를 사용할 때는

import { useState } from "react";

위와 같이 임포트를 해준 뒤

const [state, setState] = useState('기본값');

위와 같이 선언을 해주면 된다.

첫번째 파라미터는 현재 상태값을 나타내고, 두번째 파라미터는 상태 값을 업데이트 시켜주는 함수이다.

import { useState } from "react";
import "./App.css";

function Counter() {
  let count = 0;
  const onClick = () => {
    count = count + 1;
  };
  return (
    <div>
      <h1>{count}</h1> <button onClick={onClick}>Click</button>
    </div>
  );
}
function App() {
  return (
    <div className={styles.App}>
      <Counter />
    </div>
  );
}

export default App;

여기서 Counter는 하나의 컴포넌트가 되는것이다.

여기서 Counter의 Click버튼을 클릭해도 count값은 증가되지 않는다.

이유는?

Click버튼으로 리랜더링 할때마다 count는 0으로 초기화 되기때문에 계속 0으로 나오는 것이다.

useState 훅 사용시

import { useState } from "react";
import "./App.css";

function Counter() {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount(count+1);
  };
  return (
    <div>
      <h1>{count}</h1> <button onClick={onClick}>Click</button>
    </div>
  );
}
function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

정말 간단하게

  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount(count+1);
  };

이부분만 수정해주면 setCount함수는 useState를 사용하기때문에

onClick이벤트가 실행될 때마다 컴포넌트는 리랜더링 되는데, 그럼 여기서 setCount함수가 호출되는데 호출될 때 새로운 상태값 count+1을 전달한다. 그래서 클릭 시 리랜더링 될 때 count+1의 값을 기억하고 업데이트한다.

useEffect 훅 사용 시

  console.log(
    `Counter 컴포넌트가 생성되거나 state가 변경되어 렌더링 될 때마다 실행`
  );
  useEffect(() => {
    console.log(`Counter 컴포넌트가 생성 될 때만 실행`);
  }, []);

useState코드에 이 코드만 추가하면된다.(비교를 위해 console.log를 두개 찍음)

그럼 한번 찍어보자

지금 8번을 찍었는데 useEffect()안에 있는 console.log는 리랜더링 되어도 한번만 찍히는 반면

useEffect()밖에 있는 console.log는 8번이나 계속 찍혀있다.

두번째 파라미터인 []배열이 비어있으면 초기 랜더링 시에 한번만 실행이 되는 것이고 여기서 count를 []에 넣어보자

count를 []에 넣었더니 count를 두번찍었는데 두개가 같이 나왔다.

이 뜻은 []는 count(state변수)가 상태가 변할때 리랜더링 될 때마다 실행되는것이다.

useMemo 사용시

import { useState, useEffect, useMemo } from "react";
import "./App.css";

function Counter() {
  const [count, setCount] = useState(0);
  const countplus = () =>{
    setCount(count+1);
  }
  const factorial = (n) => {
    if (n == 0) {
      return 0;
    } else if (n == 1) {
      return 1;
    } else {
      return factorial(n - 1) * n;
    }
  };
  const memo = useMemo(() => {
    console.log("factorial 연산");
    let result = factorial(count);
    return result;
  }, [count]);
  return(
    <div>
    <h1>{count}</h1>
    <h1>팩토리얼 연산 결과: {memo}</h1>
    <button onClick={countplus}>click</button>
    </div>
  );
}
function App() {
  return (
    <div className="App">
      <Counter></Counter>
    </div>
  );
}

export default App;

이 코드는 click이벤트시 팩토리얼 연산이 되는과정이다.

여기서 useMemo는 count값이 변경될때만 함수를 호출하고 다른 컴포넌트를 실행할때는 리랜더링 되지않는다.

useRef사용시

  let value = useRef(0);
  const countplus = () =>{
    setCount(count+1);
    value.current++;
    console.log(`value:${value.current}`);
  }

위 콘솔을 보면 이전값을 연결하고 랜더링과 무관하게 계속 값이 유지된다.

이렇게 보면 useState와 많이 닮은거같다.

728x90

LIST