[React] useEffect 과제 풀기

💡 실습 포인트!

• 이번에는 useEffect() 와 setTimeout() 을 사용하여 2초동안만 보여지는 알림창을 만들어보았다.
• 이전에 부트캠프를 수강할 때에는 useEffect 니 Hook 이니 많이 들어는 봤는데 제대로 된 설명이 없어서, 이해도 하지 못한 상태에서 다음 진도로 넘어가느라 찝찝했었는데 이번 기회를 통해 개념을 알고 확실하게 어떤 때에 사용해야 하는지를 알게 되었다.

---

💜 알림창 타이머 기능 만들기

// 전체 코드 미리보기
// 전체 코드 내용이 길어서 불필요한 부분은 제외했다.

function Detail(props) {

  let [alert, setAlert] = useState(true);
  
  useEffect(()=>{
      let timer = setTimeout(()=>{setAlert(false)}, 2000);
      return ()=>{ clearTimeout(timer) };
  },[alert]);
  
  return (
    <div className="container">

      {
      alert == true 
      ? (<div className='my-alert-gold'>
         <p>
           재고가 얼마 남지 않았습니다. 구매를 서두르세요!
          </p>
        </div>) 
    : null
      }
      
    </div>
  )
}

• useEffect() 를 활용하여 알림창이 2초 후에 사라지는 기능을 만들어보았다.

🤍 알림창 UI 상태를 저장할 state 만들기

let [alert, setAlert] = useState(true);

• 먼저, alert 라는 state 를 만들어서 알림창 UI 가 보이거나 보이지 않는 상태를 state 에 true / false 로 저장해준다.
• 나는 보이는 상태를 true 로 정했다.

---

🤍 알림창 UI 상태에 따라 실행할 코드 작성하기

{
  alert == true 
  ? (<div className='my-alert-gold'>
     <p>
       재고가 얼마 남지 않았습니다. 구매를 서두르세요!
      </p>
    </div>) 
  : null
}

• state 를 만들고 난 후에는 삼항 연산자를 사용하여 alert 라는 state 가 true 일 때 my-alert-gold 라는 class 를 보여주고, false 일 때에는 null 상태가 되도록 해주었다.

---

🤍 알림창 UI 에 타이머 기능 추가하기

  useEffect(()=>{
      let timer = setTimeout(()=>{setAlert(false)}, 2000);
  });

• 이제 useEffect() 를 사용하여 Detail Component 가 생성되면, 생성되고 나서 2초 후에 alert 라는 state 가 setAlert() 함수에 의해 false 로 변경되어 화면에서 사라지도록 해주었다.
• 여기까지 코드를 작성하면 한 가지 문제가 있다.
• 원래 useEffect() 는 Component 가 생성될 때도 실행되지만, Component 가 update 될 때도 실행되기 때문에 원하지 않을 때 코드가 실행되는 경우가 생길 수 있다.

---

🤍 alert 라는 state 가 update 될 때에만 타이머 기능 작동하도록 만들기

  useEffect(()=>{
      let timer = setTimeout(()=>{setAlert(false)}, 2000);
  },[alert]);

• 따라서 위와 같이 alert 라는 state 외 다른 요소가 update 되는 경우 useEffect() 를 실행하지 않도록 코드를 수정해주었다.
• useEffect() 함수 맨 끝에 있는 대괄호에는 state 를 넣을 수 있는데, 여기에 들어간 state 가 변경될 때만 update 로 인식한다.
• 이는 일종의 실행조건이며, 대괄호에 아무 것도 작성하지 않으면 조건이 없는 것이므로 Component 가 update 될 대 절대 실행되지 않는다.

---

🤍 버그 방지를 위해 사용한 타이머의 타이머 기능 해제하기

  useEffect(()=>{
      let timer = setTimeout(()=>{setAlert(false)}, 2000);
      return ()=>{ clearTimeout(timer) };
  },[alert]);

• setTimeout() 함수로 타이머 기능을 사용했다면 원하지 않는 버그를 방지하기 위해 타이머 기능을 해제해주는 것이 좋다.
• useEffect() 안에 return 과 함수를 추가하면 Component 가 사라질 때 특정 코드를 실행하는 것이 가능하다.
• 따라서 return () => { clearTimeout(timer) } 라고 코드를 추가해주었다.
• cleartTimeout() 이 타이머 기능을 해제하는 함수이고 소괄호 안에는 타이머 이름을 적어주면 된다.