6. React Bootstrap Offcanvas 버튼 클릭 시 닫히게 하기

I'm trying to close the offcanvas menu in React Bootstrap when I click a link

 

stackoverflow에서 도움을 얻었다...!

React Bootstrap의 Offcanvas 컴포넌트를 사용하여 상단 Navbar를 만들었는데 다른 메뉴로 이동할 수 있게 Link를 클릭하면 페이지 이동은 하는데 Offcanvas가 닫히지 않았다. 그래서 방법을 찾아보니 각 메뉴의 열림 상태를 state로 저장해놓고 메뉴가 클릭될 때마다 state를 바꿔주면 되는 아주 간단한 작업이었다.

 

아래는 위의 내용을 참고하여 내 코드에 적용한 것이다.

function Nav_() {
  let navigate = useNavigate();

  const [menuOpen, setMenuOpen] = useState(false)
  const toggleMenu = () => {
    setMenuOpen(!menuOpen)
  }

  const handleClose = () => setMenuOpen(false)

  return (
    <div>
    /** 스타일 어쩌구 생략 ... */
      <style type="text/css">
       ...
      </style>
      /** Navbar */
      {["lg"].map((expand) => (
        <Navbar key={expand} variant='top' expand={expand} className="mb-3">
          <Container fluid>
            <Button
              variant="outline-light"
              onClick={() => {
                navigate(-1);
              }}
            >
              뒤로가기
            </Button>
            <Navbar.Brand href="/">TMI</Navbar.Brand>
            <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} 
            /** 여기 추가! */
            onClick={toggleMenu}
            />
            <Navbar.Offcanvas
              id={`offcanvasNavbar-expand-${expand}`}
              aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
              placement="end" 
              /** 여기 추가! */
              restoreFocus={false}
              show={menuOpen}
              onHide={handleClose}
            >
              <Offcanvas.Header closeButton>
                <Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
                  TMI
                </Offcanvas.Title>
              </Offcanvas.Header>
              <Offcanvas.Body>
                <Nav className="justify-content-end flex-grow-1 pe-3">
                  <Nav.Link>
                    <Link to="/" 
                    /** 여기 추가! */
                    onClick={toggleMenu}>
                    Home
                	</Link>
                  </Nav.Link>
                  /** 똑같으니까 생략 */
                </Nav>
              </Offcanvas.Body>
            </Navbar.Offcanvas>
          </Container>
        </Navbar>
      ))}
    </div>
  );
}

restoreFocus는 뭘까 했는데 stack overflow 답변을 보니 아래와 같이 써있었다.

"둘째로, 오프캔버스의 기본 동작은 오버레이가 닫히면 포커스가 오버레이를 열었을 때의 위치로 되돌아가는 것이다. 그래서 오버레이가 닫혔을 때 페이지가 올바른 위치로 스크롤되지 않습니다. 이를 변경하려면 restoreFocus={false} prop를 Offcanvas에 전달하면 됩니다. Offcanvas API 문서를 참조하십시오."

React-Bootstrap