React - Effect Hook -(1) 기본

 

useEffect는  리액트 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook입니다. 이 컴포넌트에서 실행하는 Side Effect는 브라우저 API를 이용해서 타이틀을 변경하는 것입니다.

 

다음 코드가 예시입니다. 클릭할 때마다 브라우저 탭이 변경됩니다.

 

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  //배열에 곡을 저장 
  const proverbs = [
    "bts - 다이너마이트 ",
    "비오 카운팅스타",
    "지코 아무노래 ",
    "리쌍 광대 ",
    "다듀 출첵"
  ];
  // idx 초기값과 setIdx 업데이트함수를 선언하고 useState의 디폴트 값은 0으로 시작
  const [idx, setIdx] = useState(0);

  const handleClick = () => {
    //인덱스가 4일경우 0으로 이동 아닐 경우 기존인덱스에서 +1 
    //반복순환되도록 코드 설정 
    setIdx(idx === proverbs.length - 1 ? 0 : idx + 1);
  };

  return (
    <div className="App">
      //버튼 클릭시 handleClick 호출 
      <button onClick={handleClick}>명곡 테스트</button>
      // Proverb 함수에 props로 saying전달 
      // saying에는 proverbs[인덱스] 전달함
      <Proverb saying={proverbs[idx]} />
    </div>
  );
}

function Proverb({ saying }) {
  useEffect(() => {
    document.title = saying;
  });
  return (
    <div>
      <h3>오늘의 명곡</h3>
      <div>{saying}</div>
    </div>
  );
}

 

 

 

useEffect(함수)

useEffect 함수의 첫번째 인자는 함수입니다. 해당 함수 내에서 구현하고자 하는 side effct를 실행하면 됩니다.

sideEffect의 예시로는 "데이터 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 Dom을 수정하는 것"이 있습니다. 

 

그렇다면 useEffect는 언제 실행되나요??

• 컴포넌트 생성 후 처음 화면에 렌더링 즉 표시될 때
• 컴포넌트에 새로운 props가 전달되며 렌더링 될 때 
• 컴포넌트의 상태(state)가 바뀌며 렌더링 될 떄

 

매법 컴포넌트가 새롭게 렌더링 될 때 Effect Hook이 실행됩니다.

 

Hook을 쓸 떄 주의할 점

 

• 최상위에서만 Hook을 호출하기
• React 함수내에서 Hook을 호출하기

 

본 컨텐츠는 코드스테이츠와 리액트 공식문서를 참조했습니다.

 

공식문서 :  https://ko.reactjs.org/docs/hooks-effect.html