[react]条件付きレンダリング時にオフにした場合のアニメーション効果

条件付きレンダリングがオフの場合のアニメーション効果

モデルウィンドウを開くとアニメーション効果が得られますが、モデルウィンドウを閉じる場合は、いくつかのテクニックが必要です.

// ModalContainer.js
const [modalState, setModalState] = useState(false);

<Modal
  modalState={modalState}
  onClose={onClose}
/>

// Modal.js
const Modal = ({ modalState, onClose, children}) => {


  if (!modalState) return null;

  return (
    <div css={modalBackground}>
      <div css={modalContainer({ modalState })}>
        <a onClick={onClose} css={closeBtn}>
          &#10094;
        </a>
        {children}
      </div>
    </div>
  );
};

export default Modal;

上記のコードモードの状態値に従って条件付きレンダリングを行う場合、modalState값이 false시에 해당 컴포넌트는 렌더링이 되지않아 애니메이션 효과를 줄 수 없다.この問題を解決するために、자체적으로 state값을 가져 modalState props가 변경했을 때 반응하는 hook을 이용하여 해당 state 값을 변경하는 방식に変えるべきだ.

// Modal.js
const Modal = ({ modalState, onClose, children}) => {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    let timer;
    if (modalState) {
      setIsOpen(true);
    } else {
      timer = setTimeout(() => setIsOpen(false), 500);
    }

    return () => {
      clearTimeout(timer);
    };
  }, [modalState]);

  if (!isOpen) return null;

  return (
    <div css={modalBackground}>
      <div css={modalContainer({ modalState })}>
        <a onClick={onClose} css={closeBtn}>
          &#10094;
        </a>
        {children}
      </div>
    </div>
  );
};

export default Modal;

親から得られたモードState propsを使用して、isOpen propsを使用して条件付きレンダリングを行うのではなく、条件付きレンダリングを行います.
モードウィンドウが開いているとします(modelState=true).
クローズボタンを押してモード状態値をfalseに変更すると、モード状態propsの変更時に応答するuseEffect内部でsetTimeout함수を使用してアニメーションの動作を一時的に遅らせることができ、モードウィンドウのクローズ時にも自然にアニメーションを実現することができる.