[React] 일정시간 뒤 사라지는 컴포넌트

useEffect와 setTimeout을 이용해 내가 원하는 시간에 사라지는 컴포넌트를 만들었다.
컴포넌트 구현 방식으로는 useEffect를 사용하면 페이지 전체가 렌더가 되고 useEffect에 실행하고 싶은 코드가 실행되기 때문에 보여주고 싶은 컴포넌트를 먼저 보여주고 setTimeout을 실행시켜 원하는 시간에 state를 바꿔주면 된다 라고 생각을 하였다.

  const [time, setTime] = useState(true); // 값을 true로 갖는 state를 만들어 주었다.

  useEffect(() => {
    setTimeout(() => {
      setTime(false); // 2초뒤에 time의 값이 false로 변하게 해주었다.
    }, 2000);
  });

그 후 삼항연산자를 이용해 사라지게 하고 싶은 컴포넌트를 time의 값에 따라 달라지게 해주었다.

return (
    <div className="container">
      {time === true ? (
        <div className="alert alert-warning">2뒤 사라질 컴포넌트</div>
      ) : null}
// true이면 컴포넌트를 보여주고 false로 변하면 컴포넌트의 자리를 null로 바꿔 주었다.
	</div>
)

useEffect는 보통 외부에서 데이터를 받아올때 사용한다고 알고 있었지만 이렇게 사용해도 되는지는 잘 모르겠다.

useEffect의 2번째 인자를 아무것도 넣지 않으면 페이지가 리렌더링 됬을때 마다 실행이 된다. 하지만 페이지가 리렌더링 된다고해서 이미 false로 바뀐 time의 값이 변화하지는 않는다. useEffect를 한번만 사용하고 싶다면 2번째 인자로 []를 넣어줘서 페이지가 렌더 됬을때 1번만 실행 해주게 하면 될것이다.