cleanup 함수 동작을 테스트하기 위해 App 컴포넌트에 Info 컴포넌트 보이기/숨기기 기능을 추가

1 cleanup 함수 동작을 테스트하기 위해
2 App 컴포넌트에 Info 컴포넌트 "보이기"와"숨기기"
3 이 두가지 기능을 추가 하는 코드를 구현해 보세요.

App.js 코드

import React, { useState } from "react";
import Info from "./Info"; // Info 컴포넌트 import

function App() {
    const [visible, setVisible] = useState(true); // Info 컴포넌트 보이기/숨기기 상태 관리

    const toggleVisibility = () => {
        setVisible(!visible); // 상태 반전
    };

    return (
        <div>
            <button onClick={toggleVisibility}>
                {visible ? "숨기기" : "보이기"} {/* 버튼 텍스트 동적 변경 */}
            </button>
            {visible && <Info />} {/* visible이 true일 때만 Info 컴포넌트 렌더링 */}
        </div>
    );
}

export default App;

코드 설명

1. useState로 visible 상태 관리 : visible 상태가 true면 Info 컴포넌트를 렌더링/false면 Info 컴포넌트를 숨김.
2. 버튼 클릭으로 상태 변경 : toggleVisibility 함수는 visible 상태를 반전시켜 Info 컴포넌트의 표시 여부를 토글.
   3.Cleanup Function 테스트 : Info 컴포넌트가 숨겨질 때(언마운트 시) Cleanup Function이 실행됩니다.

Info.js 코드 (Cleanup Function 포함)

import { useState, useEffect } from "react";

function Info() {
    const [name, setName] = useState("");
    const [nickname, setNickname] = useState("");

    const changeName = (e) => setName(e.target.value);
    const changeNickname = (e) => setNickname(e.target.value);

    useEffect(() => {
        console.log("Info 컴포넌트가 마운트되었습니다.");

        return () => {
            console.log("Info 컴포넌트가 언마운트되었습니다."); // Cleanup Function
        };
    }, []);

    return (
        <>
            <div>
                <p>이름: {name}</p>
                <p>별명: {nickname}</p>
            </div>
            <div>
                <p>이름: <input type="text" value={name} onChange={changeName} /></p>
                <p>별명: <input type="text" value={nickname} onChange={changeNickname} /></p>
            </div>
        </>
    );
}

export default Info;

동작 테스트

-Info 컴포넌트 보이기 :버튼을 눌러 Info 컴포넌트를 표시하면 "마운트되었습니다." 메시지가 콘솔에 출력.
-Info 컴포넌트 숨기기:버튼을 눌러 Info 컴포넌트를 숨기면 "언마운트되었습니다." 메시지가 콘솔에 출력.