[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 19일차 - 리액트(2)

 

🤔 리액트 훅(Hook)이란?

👉 리액트 훅은 함수형 컴포넌트에서 상태관리와 생명주기 기능을 사용할 수 있게 해주는 도구이다. 

👉 이전에는 이러한 기능을 사용하기 위해서 클래스형 컴포넌트를 사용해야 했다.

 

🤔 왜 생명주기가 필요할까?

👉 생명주기 메서드는 컴포넌트가 페이지에 처음 렌더링될 때, 컴포넌트의 상태나 속성이 변경될 때, 컴포넌트가 페이지에서 제거될 때에 실행된다.

👉 다양한 활용사례가 있다.

1️⃣ 메서드에서 API를 호출해서 초기 데이터를 가져오는 작업을 수행한다. 

2️⃣ 이벤트 리스너, 타이머, 등록된 구동 등을 설정한 후에 컴포넌트가 사라질 때 이들을 정리해야 한다. 이는 메모리 누수를 방지하고, 성능을 유지한다.

3️⃣ 컴포넌트의 상태나 속성이 변경되면 특정 작업을 수행할 때 사용한다. 

1️⃣ useState

👉 함수형 컴포넌트에서 동적으로 바뀌는 값을 관리할 때 사용하며 상태 유지 값과 그 값을 갱신하는 함수를 반환한다. 

👉 함수 컴포넌트 내부에서 상태 업데이트를 관리한다.

👉 useState의 기본구조

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

2️⃣ useEffect

👉 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있게 하는 hook

👉 첫 번째 인자는 실행할 함수, 두 번째 인자는 의존성 배열을 받는다. 

 

1️⃣ 의존성 배열이 없는 경우

👉 페이지가 렌더링 될 때마다 함수가 실행된다.

import React from "react";

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));

});

2️⃣ 의존성 배열이 비어있을 경우

👉 첫 렌더링 시에만 함수(dispatch)가 실행된다.

import React from "react";

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));

}, []);

3️⃣ 의존성 배열에 값이 있을 경우

👉 해당값(page) 값이 변할 때마다 함수(dispatch)가 실행

import React from "react";

const [page, setPage] = React.useState(1)

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));

}, [page]);

 

4️⃣ 실습 예시

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((count) => count + 1)
    }, 1000);
    return () => {
      clearInterval(timer);
      console.log("clearup function works")
    };
  }, [])

👉 clearInterval() 함수를 사용하면 위에 timer가 1초에 1씩 증가한다. 그러나 반면에 clearInterval()함수가 없으면 timer가 한 번씩 2씩 증가한다. 

👉 clearInterval 함수는 Timer 반복 호출을 막아주는 함수이다. 반복호출을 막아주니까 이중으로 타이머가 호출되지 않고 딱 한 개의 Timer가 작동한다. 

👉 useState()함수에서 값이 바뀔때마다 리렌더링 되면서 => useEffect()가 실행되고 => 그리고 clearInterval()함수 때문에 한 번만 동작하고 종료된다.  

 

 

 

 

 

 본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.