useState, useEffect

useState

용법

const [count, setCount] = useState(0)

 

count -> 현재 상태값
setCount -> 상태값 변경
useState(0) -> 초기 상태값 0

 

Count 예제

const Count = (props) => {
  return<div>{props.count}</div>
}

const App = () => {
  const [count, setCount] = useState(0)

  const handleIncrease = () => {
    setCount(count + 1);
    // setCount(prevState => prevState + 1) 이렇게도 사용가능
  }

  const handleDecrease = () => {
    setCount(count - 1);
  }

  return (
    <div>
      <Count count={count} />
      <button onClick={handleIncrease}>+</button>
      <button onClick={handleDecrease}>-</button>
    </div>
  )
}

 

결과

 

useEffect

- 컴포넌트가 리렌더링 될때 실행되는 함수

useEffect(() => {/* 컴포넌트가 렌더링될때마다 실행 */})

useEffect(() => {/* 첫 렌더링시에만 실행 */}, []) // -> [] dependency array 을 추가 

useEffect(() => {/* count의 상태값이 변경될때마다 실행 */}, [count])

useEffect(() => {
	return () => {/* 컴포넌트가 unmount 될때 실행 */} 
}, [])