[TIL] 2023-02-06

리액트 훅(hook)과 setInterval API로 시계 만드는 예제 연습하기

• useEffect 훅

  useEffect(콜백함수, 의존성목록);
  콜백함수 = () => {}
  
  //한 번만 실행하는 useEffect 훅
  useEffect(() => {}, []);
  
  //함수를 반환하는 useEffect
  useEffect(() => {
  	//컴포넌트가 생성될 때 실행
  	return () => {}  // 컴포넌트가 소멸할 때 한 번 실행
  }, [])

  
  

• setInterval API - 갱신 주기때마다 콜백 함수를 계속 호출해줌

  const id = setInterval(콜백함수, 갱신주기);
   콜백함수 = () => {}
  
  // setInterval 콜백 함수를 멈추게 하는 clearInterval()
  	clearInterval(id);

  
  

• useState 훅 - useState가 반환하는 세터setter는 현재 값이 변경되면 자동으로 해당 컴포넌트를 다시 렌더링함

  const [현재값, 세터] = useState(초깃값);
  세터 = (새로운 값) => void;

  
  

• 리액트 훅 함수의 특징

  1. 같은 리액트 훅을 여러 번 호출할 수 있음
  2. 최상위에서 호출 (함수 몸통이 아닌 몸통 안 복합 실행문의 {}안에서 호출할 수 없다)
  3. 비동기 함수를 콜백 함수로 사용할 수 없다

• 데이터를 캐시하는 useMemo 훅

• 콜백 함수를 캐시하는 useCallback 훅
  
  

• 리액트 훅의 사용 형태는 비슷하므로 useMemo와 useCallback 훅의 예시는 생략하고, 추가적으로 이 훅들을 이해하기 위해 필요한 개념인 캐시cache, 고차함수에 대해 알아봄 (둘다 효율성을 고려하는 훅)

  • 캐시 - 데이터나 값을 미리 복사해 놓는 임시 저장소
  • 고차함수 - 다른 함수를 반환하는 함수

  리액트 개발에서 고차 함수는 콜백 함수에 어떤 정보를 추가로 전달하려고 할 때 주로 사용