Cleanup Function

Cleanup Function

Setup Challenge

• 상태 값 생성
• JSX 상태 값을 토글(toggle) 하도록 설정하는 버튼을 생성
• 조건에 따라 두 번째 컴포넌트를 반환
• 두 번째 컴포넌트 내에서 useEffect를 생성하고, 초기 렌더링 시에만 실행되도록 설정!
  

풀이

import { useEffect, useState } from "react";

const CleanupFunction = () => {
  const [toggle, setToggle] = useState(false);

  return (
    <div>
      <button type="button" className="btn" onClick={() => setToggle(!toggle)}>토글 컴포넌트</button>
      {toggle && <RandomComponent/>}
    </div>
  );
};

export default CleanupFunction;

const RandomComponent = () => {
  useEffect(() => {
    console.log('두 번째 컴포넌트 실행')
  }, [])

  return (
    <h1>두 번째 컴포넌트</h1>
  )
}

• toggle 상태 값(boolean)으로 설정
• 버튼 클릭시 toggle의 값이 현재 값의 반대 값으로 변경되는 클릭 이벤트 추가
• 두 번째 컴포넌트(RandomComponent) 추가하여 toggle의 값이 true일 경우 컴포넌트 렌더링
• 두 번째 컴포넌트에 useEffect를 초기 렌더링 시에만 콘솔이 찍히도록 설정