<React>리액트 Hooks( useState, useEffect )

Hisu(히수)·2023년 3월 15일
0

useState

useState는 상태값을 관리하게 해주는 hook이다.
기본값(initialState)을 파라미터로 받고, 상태값인 state와 상태값을 변경할 수 있는
setState 함수를 반환한다.

const [state, setState] = useState(initialState)

위에 코드에 있는 state 라는 이름은 임의로 지정한 것일 뿐,
사용에 맞게 바꿀 수 있다. (예. const = [number, setNumber] 등)

function Click() {
  const [isClicked, setIsClicked] = useState(false) // false는 기본값
  const toggleClick = ()=>{
    console.log(isClicked)
    setIsClicked(!isClicked)
  }
  return (
    <div>
		<button onClick={toggleClick}>클릭</button>
    </div>
	// 클릭할 때마다 콘솔에 true와 false가 toggle되며 뜨는 것을 확인할 수 있다.
	// 즉, isClicked(state)의 값이 바뀐다.
  )
}

setIsClicked(setState)로 isClicked(state)의 상태를 변경하면 렌더링이 다시 일어난다.

useEffect

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.
즉, setState로 인해 state의 값이 변하여 새로 렌더링 될 때 실행한다는 뜻이다.

side-Effect

import React, { useState, useEffect } from 'react';

function Menu() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("click!!", count)
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Menu()

0개의 댓글