📝 Effects(= Side Effects)란?

리액트 라이브러리의 주요한 임무는 UI를 렌더링 하는 것이다. 즉, 사용자 입력에 반응하여 필요할 때 UI를 다시 렌더링하는 것이 리액트의 일이다.
컴포넌트는 단지 함수이기 때문에 위에서 부터 아래로 실행되는데, 결국에는 화면에 무언가 가져오는 것이 함수가 하는 일의 전부이다.

• 예시
  • 버튼 클릭
  • 텍스트 입력
• 리액트는 JSX코드를 평가하고 렌더링한다.
• 또한 state와 props을 관리하고, 클릭-입력 등의 사용자 이벤트와 입력에 반응하여 state와 prop의 변경 여부에 따라 컴포넌트를 재평가하여 렌더링한다.
• 따라서 리액트의 주요 임무는 useState() 훅과 props를 사용하여 처리했다.

그렇다면 이펙트(=사이트 이펙트)란 무엇일까?
바로 화면에 무언가를 렌더링하는 일이 아닌 모든 일, 즉 앱에서 일어나는 다른 모든 것을 의미한다.

• 예시
  • 백엔드 서버로 http 리퀘스트 보내기
    (응답 받으면 화면에 뭔가 그릴 수도 있지만 리퀘스트 보내는 것 자체는 리액트를 필요로 하지 않는다)
  • 브라우저 저장소에 데이터 저장하기(예. 로컬 저장소)
  • 코드에 타이머나 간격 설정하고 관리하기
• 위 예시의 모든 것은 앱에서 고려해야 하는 작업이지 화면에 무언가 가져와 그리는 것과는 관련 없다.
• 이런 이펙트는 일반적인 컴포넌트 함수 밖에서 일어나야 하는 일이다.
• 사이드 이펙트는 컴포넌트 안에 들어가면 안된다. 버그나 무한 루프가 발생할 가능성이 높기 때문이다.
• 따라서 사이드 이펙트를 처리할 특별한 툴이 필요한데, 바로 useEffect() 훅이다.

✅ useEffect() 훅

useEffect() 훅은 리액트 내장 훅으로 컴포넌트 함수 내부에서 사용할 수 있는 특별한 일을 하는 함수이다. useEffect()훅을 사용하면 사이드 이펙트를 적절히 처리할 수 있다.

useEffect()의 2가지 인자

useEffect(() => {...}, [ dependencies ]);

• 첫 번째 인자: 함수
  지정된 의존성이 변경된 경우에만, 모든 컴포넌트 평가 후에 실행되는 하는 함수이다.
  따라서 함수 내부에 사이드 이펙트 코드를 작성하면 된다.
• 의존성 배열(디펜던시 배열)
  의존성 배열이 변경될 때에만 첫 번째 인자인 함수가 다시 실행되게 할 수 있으므로 디펜던시를 작성하면 된다.

useEffect()를 잘 활용하면 의존성이 변경된 경우에만 사이드 이펙트 코드가 실행되기 때문에 무한 루프에 빠지지 않을 수 있다.

1. 디펜던시가 없는 경우: (예시) 로컬스토리지 이용한 로그인 유지하기

아래 코드를 사용하여 로그인 후, 새로고침이 되어도 로그인을 유지할 수 있도록 로컬스토리지에 키-값 식별자를 저장하여 로컬스토리지에 식별자가 있는 경우 로그인이 유지되도록 코드를 작성해 보자.

import React, { useState } from 'react';

import Login from './components/Login/Login';
import Home from './components/Home/Home';
import MainHeader from './components/MainHeader/MainHeader';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const loginHandler = (email, password) => {
    // We should of course check email and password
    // But it's just a dummy/ demo anyways
    setIsLoggedIn(true);
  };

  const logoutHandler = () => {
    setIsLoggedIn(false);
  };

  return (
    <React.Fragment>
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </React.Fragment>
  );
}

export default App;

1. localStorage에 키-값 저장하기

앱이 시작할 때 마다 (로그인)데이터가 유지되는지 확인하는 작업을 하기 위해서 먼저 브라우저 저장소(로컬스토리지/쿠키)에 데이터를 저장해야 한다.

브라우저에 내장된 저장 매커니즘인 로컬 스토리지는 리액트와 아무 상관이 없기 때문에 컴포넌트 안에 있는 loginHandler 함수에서 불러와서 실행할 수 있다.

• localStorage.setItem("식별자", "식별자");
setItem()은 브라우저에서 사용할 수 있는 전역 객체이다.

 const loginHandler = (email, password) => {
    // We should of course check email and password
    // But it's just a dummy/ demo anyways

    //로그인 했으면 1, 로그인 안 했으면 0으로 식별
    localStorage.setItem("isLoggedIn", "1");
    setIsLoggedIn(true);
  };

• 그러면 이런식으로 데이터가 저장된다.
  

loginHandler 함수는 사용자가 로그인 버튼을 클릭할 때만 실행되기 때문에 자주 일어나는 일은 아니고, 뭔가 저장하고 싶을 때(로그인 버튼이 클릭될 때)만 실행된다. 따라서 이 경우에는 useEffect가 반드시 필요하지는 않다.

하지만 앱이 다시 시작되는 경우, 사용자가 페이지를 떠났다가 다시 돌아오는 경우, 페이지를 새로고침할 경우에는 어떨까?
로컬스토리지에는 키-값 쌍이 남아있더라도 새로고침하면, 즉 앱이 다시 시작하면 App 컴포넌트 함수는 다시 실행되기 때문에 로그인은 풀려 버린다.

2. 로컬스토리지에서 식별자 확인하여 로그인 유지하기

로그인 버튼을 클릭하지 않아도, 즉 loginHandler가 트리거 되지 않아도 로컬스토리지에 isLoggedIn의 값이 1인 경우에는 로그인이 유지되게 하기 위해, 조건함수를 걸어 state를 true로 변경해 주자.

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 로그인 버튼 클릭하지 않아도, 즉 loginHandler가 트리거 되지 않아도 로컬스토리지에 isLoggedIn의 값이 1인 경우에는 로그인 유지하기
  const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  
 //...

그런데 이렇게만 하면 무한 루프에 빠질 수가 있다.

• isLoggedIn이 1로 저장되어 있는지 로컬스토리지에 확인
• 저장되어 있으면 setState로 true로 설정
• 그리고 setState 함수 호출할 때마다 App컴포넌트 다시 실행
• 그러면 또 다시 실행되고 1이 나오면 또 setState
• 반복 반복 무한 반복 🌀😵🌀

이럴 때 useEffect()를 사용하면 언제 이 사이드이펙트를 실행할지 제어할 수 있다.

3. useEffect() 사용하여 무한루프 탈출하기

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 로그인 버튼 클릭하지 않아도-즉 loginHandler가 트리거 되지 않아도, 로컬스토리지에 isLoggedIn의 값이 1인 경우에는 로그인 유지하기
  //무한 루프 방지 위해 useEffect 사용
  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  }, []);
//...

• 앱이 처음 실행될 때 이펙트 함수가 실행되는데 setState함수로 인해 다시 App컴포넌트가 다시 실행된다.
• 그러면 JSX 코드가 평가되고, DOM은 그에 따라 업데이트한다.
• 그 후 이펙트가 재실행될 차례인데, 디펜던시가 바뀐게 없으면 실행되지 않는다.

즉, 디펜던시가 비어 있는 경우, 의존성이 없기 때문에 앱이 처음 시작되면 의존성이 변경된 것으로 간주되어 이펙트 코드는 앱이 시작될 때 딱 한 번만 실행된다.

이제 useEffect 함수 안에 이펙트 코드가 있기 때문에 리액트에 의해 실행되므로 의존성이 변경된 경우에만, 모든 컴포넌트 재평가 후에, useEffect 안에 든 이펙트 코드가 실행된다.

• 재평가 후에 실행된다는 것이 아주 중요한 포인트이다.
• 의존성이 변경 된 경우만 실행된다는 것도 아주 중요한 포인트이다.

이 처럼 데이터 가져오기와 같은 일은 리액트의 주된 임무인 화면 그리기가 아닌 사이드 이펙트이다. 물론 결과적으로 데이터를 가져온 후에는 UI가 바뀌긴 하지만 말이다.

✅ 전체 코드

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

import Login from "./components/Login/Login";
import Home from "./components/Home/Home";
import MainHeader from "./components/MainHeader/MainHeader";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 로그인 버튼 클릭하지 않아도 즉 loginHandler가 트리거 되지 않아도, 로컬스토리지에 isLoggedIn의 값이 1인 경우에는 로그인 유지하기
  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  }, []);
  //디펜던시가 비어 있는 경우, 의존성이 없기 때문에 앱이 처음 시작되면 의존성이 변경된 것으로 간주되어 앱이 시작될 때 이펙트 코드는 딱 한 번만 실행됨

  const loginHandler = (email, password) => {
    // We should of course check email and password
    // But it's just a dummy/ demo anyways
    
    //브라우저 저장소(로컬스토리지/쿠키)에 정보 저장해서, 앱 시작할 때 마다 데이터 유지되었는지 확인
    //로그인 했으면 1, 로그인 안 했으면 0으로 식별
    localStorage.setItem("isLoggedIn", "1");
    setIsLoggedIn(true);
  };

  const logoutHandler = () => {
    //로그아웃시 로컬스토리지에 isLoggedIn 없애기
    localStorage.removeItem("isLoggedIn");
    setIsLoggedIn(false);
  };

  return (
    <React.Fragment>
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </React.Fragment>
  );
}

export default App;

2. 디펜던시가 필요한 경우

가끔 디펜던시가 필요한 경우가 있다. 이펙트 함수를 앱이 시작될 때 한 번만 실행하지 않고 여러번 실행해야 할 경우 디펜던시를 설정하면 된다.

아래 코드를 사용하여 디펜던시가 있는 경우 useEffect가 어떻게 작동하는지 알아보자.

import React, { useState } from 'react';

import Card from '../UI/Card/Card';
import classes from './Login.module.css';
import Button from '../UI/Button/Button';

const Login = (props) => {
  const [enteredEmail, setEnteredEmail] = useState('');
  const [emailIsValid, setEmailIsValid] = useState();
  const [enteredPassword, setEnteredPassword] = useState('');
  const [passwordIsValid, setPasswordIsValid] = useState();
  const [formIsValid, setFormIsValid] = useState(false);

  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
    //🌀 같은 유효성 검사
    setFormIsValid(
      event.target.value.includes('@') && enteredPassword.trim().length > 6
    );
  };

  const passwordChangeHandler = (event) => {
    setEnteredPassword(event.target.value);
    //🌀 같은 유효성 검사
    setFormIsValid(
      event.target.value.trim().length > 6 && enteredEmail.includes('@')
    );
  };

  const validateEmailHandler = () => {
    setEmailIsValid(enteredEmail.includes('@'));
  };

  const validatePasswordHandler = () => {
    setPasswordIsValid(enteredPassword.trim().length > 6);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    props.onLogin(enteredEmail, enteredPassword);
  };

  return (
    <Card className={classes.login}>
      <form onSubmit={submitHandler}>
        <div
          className={`${classes.control} ${
            emailIsValid === false ? classes.invalid : ''
          }`}
        >
          <label htmlFor="email">E-Mail</label>
          <input
            type="email"
            id="email"
            value={enteredEmail}
            onChange={emailChangeHandler}
            onBlur={validateEmailHandler}
          />
        </div>
        <div
          className={`${classes.control} ${
            passwordIsValid === false ? classes.invalid : ''
          }`}
        >
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            value={enteredPassword}
            onChange={passwordChangeHandler}
            onBlur={validatePasswordHandler}
          />
        </div>
        <div className={classes.actions}>
          <Button type="submit" className={classes.btn} disabled={!formIsValid}>
            Login
          </Button>
        </div>
      </form>
    </Card>
  );
};

export default Login;

현재 위 코드에서는 이메일/비밀번호 키 값이 입력될 때마다 유효성 검사를 하고 있는데, 같은 유효성 검사 로직을 두 핸들러에 각각 작성해서 실행하고 있다.

이 로직을 합쳐보자. 로그인 컴포넌트 내에 useEffect()를 사용하여 하나의 로직으로 form이 유효한지 검사하는 로직을 이펙트 코드로 넣으면 된다.

useEffect(() => {
  setFormIsValid(
    enteredEmail.includes("@") && enteredPassword.trim().length > 6
  );
}, [enteredEmail, enteredPassword]);

이 사이드 이펙트는 이메일이나 비밀번호가 변경될 때마다 트리거 되어야 하기 때문에 디펜던시에 입력된 이메일과 비밀번호 state 값을 넣어야 한다.
디펜던시에 이 값을 넣어야, 이메일/비밀번호 변경 핸들러의 모든 키 입력에 대해서 계속해서 유효성 검사를 돌릴 수 있고 버튼이 유효하게 작동한다.

✅ 의존성 배열 자체를 삭제해버리면 어떻게 될까?

의존성이 없어지기 때문에 이펙트 코드를 그냥 쌩으로 Login 함수 안에 넣어버린 격이 되어버린다.
그러면 컴포넌트가 재렌더링 될 때마다 이펙트 코드가 실행되어 버리므로 계속 setFormIsValid가 실행되기 때문에 재렌더링 주기 자체를 계속 트리거해버리므로 무한루프 충돌이 일어난다. 😵

✅ 무엇을 디펜던시로 넣어야 할까?

간단한 규칙이 있다. 바로 사이드 이펙트 함수에서 사용하는 것을 의존성으로 추가하면 된다. 그 내용이 바뀔 때만 사이드 이펙트가 실행되도록 제어하면 된다.

• 여기서는 setFormIsValid, enteredEmail, enteredPassword를 디펜던시에 넣어주면 된다.
  => 모든 로그인 컴포넌트 함수 실행한 후, 이 useEffect 함수를 다시 실행시켜라. setFormIsValid 또는 enteredEmail 또는 enteredPassword가 변경된 경우에만!
  

• 🌟 그런데 setFormIsValid는 생략 가능하다. 왜냐하면 state 업데이트 함수는 기본적으로 리액트에 의해 절대 변경되지 않도록 보장되기 때문이다.
  따라서 이런 setState 함수들은 재렌더링 주기에 따라 변하지 않으므로, 디펜던시에 생략해도 된다.

• enteredEmail, enteredPassword는 바뀔 수 있는 값이다. 키를 누를 때 마다 변경되기 때문에 디펜던시에 넣어야 한다.

✅ 사이드 이펙트를 처리하기 위한 useEffect()

이렇게 일반적으로 특정 데이터(state나 prop)가 변경될 때 로직을 다시 실행하기 위해서 useEffect를 사용한다.

엥 근데 이게 사이드이펙트라고? http 리퀘스트 받거나 타이머 설정하거나 하는게 사이드 이펙트 아니야? 라고 생각할 수 있지만 기억하자! useEffect의 주요 임무는 사이드 이펙트를 처리하는 것이다.

• 보통 사이드 이펙트라고 하면 http 리퀘스트를 많이 떠올리지만
• 위의 예처럼 키 입력을 받아 입력된 데이터를 저장하는 것
• 그에 대한 응답으로 다른 액션을 실행하는 것 등도 사이드 이펙트이다.
• 즉, 이메일, 비밀번호 필드의 키 입력에 대한 응답으로 해당 폼의 유효성을 검사하고 업데이트하는 것도 사용자 입력 데이터의 사이드 이펙트이다.

useEffect는 무언가(로드되는 컴포넌트/업데이트 되는 이메일 주소 등)에 대한 응답으로 실행되는 코드를 다루는데 도움이 된다.

즉, 🌟 어떤 액션에 대한 응답으로 실행되는 액션은 사이드 이펙트이기 때문에 useEffect를 사용하면 적절히 코드를 처리할 수 있다.

3. 디펜던시에 추가해야 하는 것 vs 추가하지 않는 것

디펜던시에는 effect 함수에서 사용하는 "모든 것"(모든 상태 변수와 함수)을 추가해야 한다.

하지만 몇 가지 예외가 있다.

• 상태 업데이트 기능 setState는 디펜던시로 추가할 필요가 없다.
  React는 해당 함수가 절대 변경되지 않도록 보장한다.

• "내장" API 또는 함수를 디펜던시로 추가할 필요가 없다.
  fetch(), localStorage와 같이 브라우저에 내장된 함수 및 기능은 전역적으로 사용이 가능한데, 이러한 브라우저 API/전역 기능은 React 구성 요소 렌더링 주기와 관련이 없으며 변경되지 않는다.

• 컴포넌트 외부에서 정의된 변수나 함수(예: 별도의 파일에 새 헬퍼 함수를 만든 경우)는 디펜던시로 추가할 필요가 없다.
  함수 또는 변수가 컴포넌트 함수 내부에서 생성되지 않기 때문에 변경해도 컴포넌트에 영향을 주지 않는다. 해당 변수가 변경되는 경우, 또는 그 반대의 경우에도 컴포넌트는 재평가되지 않는다.

간단히 말해서 effect 함수에서 사용하는 모든 "것들"을 디펜던시로 추가해야 하지만, 컴포넌트(또는 일부 상위 컴포넌트)가 다시 렌더링 되어 이러한 "것들"이 변경될 수 있는 경우에만 디펜던시로 추가하면 된다.

즉, 컴포넌트 함수에 정의된 변수나 상태, 컴포넌트 함수에 정의된 props 또는 함수를 디펜던시로 추가하면 된다.

예시 코드

import { useEffect, useState } from 'react';
 
let myTimer;
 
const MyComponent = (props) => {
  const [timerIsActive, setTimerIsActive] = useState(false);
 
  const { timerDuration } = props; // using destructuring to pull out specific props values
 
  useEffect(() => {
    if (!timerIsActive) {
      setTimerIsActive(true);
      myTimer = setTimeout(() => {
        setTimerIsActive(false);
      }, timerDuration);
    }
  }, [timerIsActive, timerDuration]);
};

위 코드에서

• timerIsActive는 ✅ 종속성으로 추가되었다.
  왜냐하면 컴포넌트가 변경될 때 변경될 수 있는 컴포넌트의 state 값이기 때문이다(예: 상태가 업데이트되었기 때문에).

• timerDuration은 ✅ 종속성으로 추가되었다.
  왜냐하면 해당 컴포넌트의 prop 값이기 때문이다. 상위 컴포넌트가 해당 prop 값을 변경하면 하위 하위 컴포넌트는 변경될 수 있다. 그러면 MyComponent 컴포넌트는 다시 렌더링 된다.

• setTimerIsActive는 ❌ 종속성으로 추가되지 않는다.
  왜냐하면 예외 조건이기 때문이다. setState에 대해 React가 절대 변경되지 않음을 보장하므로 추가할 필요가 없다.

• myTimer는 ❌ 종속성으로 추가되지 않는다.
  왜냐하면 컴포넌트 외부 변수 이기 때문이다.
  myTimer는 컴포넌트 외부에서 let으로 정의되었고 어디에서든 변경할 수 있기 때문에, 컴포넌트 내부 변수(상태나 prop)처럼 MyComponent 컴포넌트가 다시 평가되도록 하는 요소는 아니다.

• setTimeout은 ❌ 종속성으로 추가되지 않는다.
  왜냐하면 브라우저 내장 API이므로 React 및 컴포넌트와 독립적이기 때문에 변경되지 않는다.

4. CleanUp Fn

가끔 클린업 작업이 필요한 이펙트도 있다.

클린업 펑션 사용 예시

사용자가 이메일을 입력하기 위해 타이핑을 하고 있다면, event.target.value가 계속 입력되어 state가 변경되고 있는데 이는 필요 이상으로 트래픽을 발생시킨다. 이런 경우, 사용자가 타이핑을 멈출 때를 기다린 후, 입력이 끝나면 유효한지 확인하여 불필요한 트래픽을 제거할 수 있다.

사용자가 이메일/비밀번호 키를 입력 한 후, 예를 들면 500밀리초 이상 멈추면 유효성 검사를 실행해보자. 이런 기술을 디바운싱이라고 한다. 사용자 입력을 디바운스(그룹화)하는 것이다. 사용자가 타이핑을 일시 중지했을 때 디바운싱하는 것인데 이는 브라우저 내장함수인 setTimeout을 useEffect 내부에 사용하여 구현할 수 있다.

const Login = (props) => {
  //...
  
  useEffect(() => {
    //500밀리초 후 유효성 검사하기
    setTimeout(() => {
      console.log("유효성 검사 ㅇㅇ");
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);
  }, [enteredEmail, enteredPassword]);
  
//...

현재 모든 키 입력에 대해 5ms 후 유효성 검사를 하고 있다. 키 입력이 끝난 후 유효성 검사가 한 번만 실행될 수 있도록, 사용자가 계속 키를 입력중인 경우 즉, 다음 키가 입력되면 setTimeout이 실행되지 않도록 지워야 한다. 즉, 사용자가 키를 계속 입력 중인 경우 setTimeout 타이머는 계속 지워져야 한다. 이럴 때 Clean Up 펑션을 사용하면 된다.

useEffect()는 첫 번째 인자에서 return 값을 가질 수 있는데, 익명의 함수를 반환하는 것을 클린업 함수라고 한다.

useEffect(() => {
  //500밀리초 후 유효성 검사하기
  //타이머를 identifier 상수에 할당
  const identifier = setTimeout(() => {
    console.log("유효성 검사 ㅇㅇ");
    setFormIsValid(
      enteredEmail.includes("@") && enteredPassword.trim().length > 6
    );
  }, 500);

  //🔥 클린업 펑션 반환
  return () => {
    console.log("클린업");
    //타이머 지우기
    //clearTimeout 내장함수로 identifier 타이머 삭제
    clearTimeout(identifier);
  };
}, [enteredEmail, enteredPassword]);

• 이렇게 하면 아래처럼 사용자가 타이핑 중일 때는 클린업 함수가 작동(키를 입력할 때 마다 이펙트가 함수가 실행되는데, 클린업 펑션이 먼저 실행되기 때문에 타이머가 삭제되고 삭제되고 삭제되고)하므로 유효성 검사를 지연시킬 수 있다.
  

클린업 함수가 실행되는 시기

1. useEffect함수가 실행될 때마다 실행된다.
   처음 실행되는 경우 제외하고 실행될 때 마다 클린업 함수가 먼저 실행된다.

2. 이펙트로 특정된 컴포넌트가 DOM에서 마운트 해제될 때마다 실행된다.
   즉, 컴포넌트가 재사용될 때마다 실행된다.

클린업 펑션은 모든 새로운 사이드이펙트 함수가 실행되기 전에, 그리고 컴포넌트가 제거되기 전에 실행된다.

• 첫 번째 사이드 이펙트가 실행되기 전에는 클린업 펑션은 실행되지 않는다.
• 클린업 펑션은 새로운 사이드 이펙트 함수가 실행되기 전에 실행된다.

즉, 클린업 펑션이 실행되는 순서는

• 처음 앱 실행시 "유효성 검사"
  (첫 번째 사이드 이펙트 실행 전에는 클린업 펑션 실행 X)
• 키 입력하면 "클린업" > "유효성 검사"
  (새로운 사이드 이펙트 함수 실행되기 전 클린업 펑션 실행 O)
• 또 키 입력하면 "클린업" > "유효성 검사"
  (새로운 사이드 이펙트 함수 실행되기 전 클린업 펑션 실행 O)
  

이런식으로 작동한다.