React Hook:<useState, useEffect>

Hook 

리액트 함수형 컴포넌트에서 사용할 수 있는 기능의 모음

문법체계가 "use-"로 시작

 

✔️useState

✅ 함수형 컴포넌트 / 상태관리 함수 / Hook

 

<기본형태>

const [state, setState] = useState<타입>(초기값);

 

[state, setState] : [상태변수, 상태업데이트 함수]

const 상태변수 = 초기값;

const 상태업데이트 함수 = () => { 반한값(익명함수)}

 

✅구조분에 할당을 꼭 기억하자

const [a, b] = [1, 2]; 

 => const a = 1; + const b = 2;

밑에 두 함수를 더한 것과 같다.

 

<예제함수>

export default function UseState(){
const [count, setCount] = useState<number>(0);

const handleCountClickBtn = () => {
	setCount(prevCount => prevCount + 1);
}

return(
	<div>
    
    <h2>Count: {count}</h2>
    
    <button onClick={handleCountClickBtn}>카운트</button>
    
    </div>
)

}

 

✔️ useEffect

✅함수형 컴포넌트 / 렌더링 될 때와 특정 상태가 변경될 때 실행되는 부수효과 처리 / Hook

 

✅사용방법 

데이터 가져오기(fetching Data), 타이머 설정, 이벤트리스너 등록에 사용됨

참고) 컴포넌트가 생성될 때 (마운트), 컴포넌트가 제거될 때 (언마운트) 특정 상태나 prop가 변경될 때 호출

 

✅사용방법

첫 번째 인자 : 부수효과

두 번째 인자 : 의존성 배열(deps -dependecies)

useEffect(() => {
-부수효과 코드를 작성

return () => {
  - 정리(clean-up) 코드
  - 언마운트 시 실행
}
},[의존성 배열을 작성]);

참고) 의존성 배열

빈 배열 - 컴포넌트가 마운트될 때 한번만 실행

값이 있는 배열 - 해당 값이 변경될 때마다 실행(여러 개 가능)

 

<예제함수>

export default function UseEffect() {
  const [count, setCount] = useState<number>(0);
  const [isRunning, setIsRunning] = useState<boolean>(false);

  useEffect(() => {
    // 타이머 효과를 구현
    let interval: NodeJS.Timeout | undefined;
    if(isRunning) {
      interval = setInterval(() => {
        setCount(prevSetCount => prevSetCount + 1);
      }, 1000) // 1000 = 1sc : 
      // 1초에 count에 1씩 더 한다는 의미
    }
    return () => clearInterval(interval);
  }, [isRunning]);
  // isRunning이 true인 동안

  const handleButtonClick = () => {
    setIsRunning(prevState => !prevState);
  	// isRunning의 상태를 현태 상태에서 역전을 한다는 의미
    // true => false / flase => true로 역전된다.
  }
  
  return (
    <div>
      <p>Timer: {count} seconds</p>   
      <button onClick={handleButtonClick}>
        {/* 실행 중이면 'Stop'버튼으로, 실행 중이 안면 'Start'버튼*/}
        {isRunning ? 'Stop' : 'Start'} 
        {/*isRunning이 true면 Stop, false면 Start를 번튼에 출력한다.*/}
      </button> 
    </div>
  )
}