index에 있는 setInterval은 어떻게 분리시킬까?

나 혼자 머리써서 해결한 게 첨이라 기분 넘 좋다. 이 맛에 코딩하나🕺🕺🕺

import React from "react";

import Clock from './exampleCode/clock';
import CommentList from "./exampleCode/commentList";
import NotificationList from './exampleCode/notificationList';
import Accommodate from './exampleCode/accommodate';
import ConfirmButton from "./exampleCode/confirmButton";
import LandingPage from './exampleCode/LandingPage';

function App() {
  return (
    <React.StrictMode>
      <LandingPage />
      <Accommodate />
      <CommentList />
      <NotificationList />
      <ConfirmButton />
    </React.StrictMode>
  );
}

// setInterval(() => {
//   root.render(
//     <React.StrictMode>
//       <Clock />
//     </React.StrictMode>
//   );
// })

export default App;

시계 컴포넌트를 다른 컴포넌트들이랑 같이 두고 싶었는데 setInterval 때문에 넣지도 못하고 어떻게 해야되나 했었다.

계속 구글링하고 있다가 트위터에 별 생각 없이 어떻게 해야될까요 하고 올렸는데 Ssul님 등장

사실 Hook 이해도 잘 못했고 use어쩌구 쓰기 무서워서 계속 외면 했었는데 저 답글 보자마자 '아 답이 없구나'하고 어떻게든 해야지 싶었다. > 덕분에 개운하게 해결함!!!

원래 강의 코드는

import React from "react";

function Clock(props) {
    return (
        <div>
            <h1>안녕, 리액트</h1>
            <h2>현재시간 : {new Date().toLocaleTimeString()}</h2>
        </div>
    )
}

export default Clock;

이랬는데 대충 setInterval를 안에 넣으려면 흐름이

clock 컴포넌트 안에서 useState랑 useEffect 써서 useEffect 안에 const 선언하고 setInterval 넣음 되겠다 싶었다.

(혼자 코드 짜보는 걸 무서워하지 말자!!!!)

import React , { useState , useEffect } from "react";

function Clock(props) {

    const [clock, setClock] = useState(0);

    useEffect(() => {
        const showClock = setInterval(() => {
           setClock(new Date().toLocaleTimeString())
        },1000);
        return () => clearInterval(showClock);
    }, []);

    return (
        <div>
            <h1>안녕, 리액트</h1>
            <h2>현재시간 : {clock}</h2>
        </div>
    )
}

export default Clock;

이렇게 만들고 App에 넣으니까 잘 작동한다!

useState에서 초기 state를 설정해주고 setState(set어쩌구)로 state의 재설정을 관리하는 개념!

useEffect로 컴포넌트가 렌더링된 후에 어떻게 돌아갈건지 설정해주면 된다.

clearInterval은 페이지가 unmount될때 리턴될 값으로 사용하다고 생각하면 되나? 스터디할 때 말해봐야겠다 ㅎㅎ