반응 - 몇 초 후에 요소를 표시하고 숨기는 방법

React에서 몇 초 후에 요소를 숨기는 방법에 대해 궁금한 적이 있습니까?

문제 설명: 요소를 표시하고 React에서 몇 초 후에 사라지게 만들고 싶습니다.

해결 방법: JavaScript의 setTimeout 메서드를 사용하고 React에서 후크합니다.

React에서 이 동작을 달성하는 것은 Vanilla JavaScript에서 setTimeout 를 사용하여 수행하는 방법과 유사합니다. 유일한 차이점은 React 후크를 사용하여 가시성 상태를 저장하고 나타나거나 사라지도록 설정한다는 것입니다.

이 React 예제를 고려하십시오.

import React from 'react';

function App() {
  return (
    <div className="App">
        <button>Show alert</button>
    </div>
  );
}

export default App;

지금은 버튼만 있습니다. 그러나 우리는 버튼을 클릭한 후 경고가 표시되기를 원합니다. 이에 대한 마크업과 필요한 후크를 추가해 보겠습니다.

import React from 'react';

function App() {
+    const [ isAlertVisible, setIsAlertVisible ] = React.useState(false);

+    const handleButtonClick = () => {
+        setIsAlertVisible(true);
+    }

    return (
        <div className="App">
-           <button>Show alert</button>
+           <button onClick={handleButtonClick}>Show alert</button>
+           {isAlertVisible && <div className='alert-container'>
+               <div className='alert-inner'>Alert! Alert!</div>
+           </div>}
        </div>
  );
}

export default App;

우리가 한 일:

은 useState 후크를 사용하여 isAlertVisible 및 setIsAlertVisible를 생성했습니다.

은 버튼을 클릭했을 때를 위한 handleButtonClick 함수를 생성하여 버튼의 onClick 속성에 할당했습니다.

에 경고 마크업이 추가되었으며 isAlertVisible가 true인 경우에만 표시됩니다.

또한 경고 섹션에 스타일을 추가하여 경고처럼 보일 것입니다.

.alert-container {
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
}

.alert-inner {
  display: inline-block;
  padding: 8px 16px;
  z-index: 1;
  background-color: #ffffff;
  box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
  -webkit-box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
  -moz-box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
}

이제 중요한 부분입니다. 몇 초 후에 경고가 사라지기를 원합니다. 3초 후에 경고를 숨기고 싶다고 가정하고 useTimeout 함수를 사용하고 두 번째 매개변수로 3000밀리초를 전달합니다.

import React from 'react';

function App() {
    const [ isAlertVisible, setIsAlertVisible ] = React.useState(false);

    const handleButtonClick = () => {
        setIsAlertVisible(true);

+        setTimeout(() => {
+            setIsAlertVisible(false);
+        }, 3000);
    }

    return (
        <div className="App">
           <button onClick={handleButtonClick}>Show alert</button>
           {isAlertVisible && <div className='alert-container'>
               <div className='alert-inner'>Alert! Alert!</div>
           </div>   
        </div>}
  );
}

export default App;

그리고 당신은 그것을 가지고 있습니다! 더 많은 콘텐츠를 표시하고, 기간을 변경하고, 스타일을 변경하고, 미치도록 알림을 사용자 지정하세요 😉

좋은 다음 단계는 이 동작을 추출하여 별도의 구성 요소Alert로 바꾸는 것입니다. 지속 시간, 콘텐츠, 위치 등과 같은 부모와 다른 소품을 허용하도록 합니다. 그런 다음 메시지를 알려야 할 때마다 이 구성 요소Alert를 다시 사용할 수 있습니다.

즐거운 코딩하세요!