React #16 (useState, useEffect 연습문제)

 

연습문제 리스트 

https://github.com/leejaehee1/leejaehee1/blob/main/lecture-material/React%20Hook%20useState%2C%20useEffect.md

leejaehee1/lecture-material/React Hook useState, useEffect.md at main · leejaehee1/leejaehee1

 

몇 개만 실습.

 

 

 

※ 본래의 hooks 폴더는 이런 식으로 쓰지 않지만, 편의를 위해... 여기서만 쓰는 걸로 하겠습니다.

 

 

 

1. 버튼 누를 때마다 1씩 증가하는 카운터

src/hooks/Counter.tsx

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="text-center mt-10">
      <p className="text-xl">현재 카운트: {count}</p>
      <button
        className="btn btn-primary mt-4"
        onClick={() => setCount(count + 1)}
      >
        +1 증가
      </button>
    </div>
  );
}

 

src/App.tsx

import Counter from "./hooks/Counter";

export default function App() {
  return (
    <main>
      <Counter />
    </main>
  );
}

 

 

 

 

 

2. input 박스에 텍스트를 넣으면 브라우저 window의 title이 실시간으로 바뀌는 기능

src/hooks/TitleUpdater.tsx

import { useState, useEffect } from "react";

export default function TitleUpdater() {
  const [name, setName] = useState("");

  useEffect(() => {
    document.title = name ? `${name}님 환영합니다!` : "React App";
  }, [name]);

  return (
    <div className="p-4">
      <input
        type="text"
        className="input input-bordered"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="이름을 입력하세요"
      />
    </div>
  );
}

 

src/App.tsx

import Counter from "./hooks/Counter";
import TitleUpdater from "./hooks/TitleUpdater";


export default function App() {
  return (
    <main>
      <Counter />
      <TitleUpdater />

    </main>
  );
}

 

 

 

 

3. 버튼을 누를 때마다 +1씩 카운트 & 콘솔 창에서도 값이 변한다고 출력

src/hooks/Detector.tsx

import { useEffect, useState } from "react";

export default function Detector() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    console.log("count 변경됨:", count);
  }, [count]);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </>
  );
}

 

src/App.tsx

import Counter from "./hooks/Counter";
import TitleUpdater from "./hooks/TitleUpdater";
import Detector from "./hooks/Detector";


export default function App() {
  return (
    <main>
      <Counter />
      <TitleUpdater />
      <Detector />

    </main>
  );
}

 

 

 

 

4. 웹페이지 방문 시 3초 뒤 alert로 환영 메시지 출력

src/hooks/Welcome.tsx

import { useEffect } from "react";

export default function Welcome() {
  useEffect(() => {
    const timer = setTimeout(() => {
      alert("환영합니다!");
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return <p>3초 후 알림이 표시됩니다.</p>;
}

 

src/App.tsx

import Counter from "./hooks/Counter";
import TitleUpdater from "./hooks/TitleUpdater";
import Detector from "./hooks/Detector";
import Welcome from "./hooks/Welcome";


export default function App() {
  return (
    <main>
      <Counter />
      <TitleUpdater />
      <Detector />
      <Welcome />

    </main>
  );
}

 

 

 

 

5. 현재 시각 페이지에 실시간으로 표시하기

src/hooks/Timer.tsx

import { useEffect, useState } from "react";

export default function Timer() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <p>현재 시각: {time}</p>;
}

 

src/App.tsx

import Counter from "./hooks/Counter";
import TitleUpdater from "./hooks/TitleUpdater";
import Detector from "./hooks/Detector";
import Welcome from "./hooks/Welcome";
import Timer from "./hooks/Timer";


export default function App() {
  return (
    <main>
      <Counter />
      <TitleUpdater />
      <Detector />
      <Welcome />
      <Timer />

    </main>
  );
}

 

 

 

6. 현재 보고 있는 브라우저 창의 너비를 페이지에 출력

src/hooks/Width.tsx

import { useEffect, useState } from "react";

export default function Width() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return <p>창 너비: {width}px</p>;
}

 

src/App.tsx

import Counter from "./hooks/Counter";
import TitleUpdater from "./hooks/TitleUpdater";
import Detector from "./hooks/Detector";
import Welcome from "./hooks/Welcome";
import Timer from "./hooks/Timer";
import Width from "./hooks/Width";

export default function App() {
  return (
    <main>
      <Counter />
      <TitleUpdater />
      <Detector />
      <Welcome />
      <Timer />
      <Width />
    </main>
  );
}

 

 

 

 

 

 

 

 

 

 

※ 실습한 것들은 여기 아래 링크에서 확인 가능.

https://codesandbox.io/p/sandbox/usestate-practice-1-forked-clywvy