23.08.17 TIL

 const handleIncrement = () => {
    setCount(count + 10);
    console.log("핸들러", count);
  };
  const [isShow, setIsShow] = useState(true);

  useEffect(() => {
    console.log("유즈이펙트", isShow);
    return () => {
      //⭐ 클린업 함수 (이 함수는 이전 렌더링의 isShow 상태 값을 출력하는 역할) 
      /* 
      클린업 함수는 주로 컴포넌트가 언마운트되거나
      특정 의존성 상태가 변경되었을 때 어떤 작업을 해제하거나 정리하는 데 사용됩니다. 
      이전 렌더링에서 설정한 상태나 이펙트를 정리하거나, 
      구독한 리소스를 해제하는 등의 작업을 수행할 수 있습니다.
      */
      console.log("클린업", isShow); //next state snapshot
    };
  }, [isShow]); // [isShow]는 의존성 배열이며, 여기에 포함된 값이 변경될 때마다 useEffect 콜백 함수가 실행

  const handleToggle = () => {
    setIsShow(!isShow);
    console.log("current state", isShow); // current state snapshot
    alert("이펙트 실행전?");
  };

---

클린업의 중요성

클린업을 하지 않아서 생기는 문제
그래서 다음과 같이 cleanup 함수를 추가하여 수정했다

function CountButton({ onIncrement }) {
  const [timer, setTimer] = useState(0);
  /* 3단계: 클린업이 중요한 이유 */
  // 컴포넌트 조건부에 따라 - 돔에 추가 / 돔에서 제거
  useEffect(() => {
    console.log("컴포넌트 마운트 될 때");

    // 타이머
    // 1초 마다 내부 함수 실행 (카운트 버튼 상태 업데이트)
    // 주기 마다 실행되는 것을 멈출 수 있는 고유 키가 반환
    const cleanupKey = setInterval(() => {
      setTimer((timer) => timer + 10);
      console.log("try");
    }, 1000);

    // 클린업 (정리)
    return function cleanup() {
      // 저지른 일 (주기마다 함수실행)을 수습 (실행되지 않도록 정리)
      clearInterval(cleanupKey);
    };
  }, []);

문제가 해결되었다.

---

포켓 베이스 설치

다운로드 링크
❗다운받을 때 위험한 파일?이라고 경고가 뜨는데 무시하고 받으면 된다.

설치 후 적용할 프로젝트에 압축파일을 풀어 루트폴더에 넣어준다.

포켓베이스 파일은 용량이 크기 때문에 깃에 저장하면 안된다.
그래서 .gitignore 파일에 추가해준다.그리고 실행 명령어를 추가한다.
package.json을 찾아서 scripts에 추가해주면 되는데

"pocketbase": "./pocketbase/pocketbase serve"

맥에서는 문제가 없이 실행되지만 윈도우에서 이렇게 추가했을 때, 다음과 같은 에러가 발생한다.
그래서 윈도우 사용자는 다음과 같이 수정하여 넣어주면 잘 작동한다.

"pocketbase": ".\\pocketbase\\pocketbase serve"

맥, 윈도우 잘 설정했지만 실행이 안 될 때는 보안 어플이나 권한설정을 잘 확인해보자!