찾아보니 몇개는 나오는데.. 메뉴용은 아닌 것 같습니다.

https://js.coach/react-native/react-native-pixfactory-accordion?search=collapsible 

그래서 React.js용으로 되어 있는 것을 먼저 보고..

http://www.davidmeents.com/creating-a-collapsible-navigation-menu-in-react-js/ 

오늘 우리는 이벤트 핸들러, 컴포넌트 상태 및 다양한 React lifecycle 메소드를 사용하여 React.js를 사용하여 축소 가능한 탐색 메뉴 솔루션을 만들 계획입니다. 이 똑같은 것을 달성하는 훨씬 더 간단하고 우아한 해결책이 있습니다. 아래 의견에 그의 예를 들려 주신 Mike에게 감사드립니다. 그러나 실습과 교육을 위해서, 앞으로 나가겠습니다.. 

우리는 대부분 여기의 React 부분을 고집 할 것입니다. 그러나 네비게이션을보기 좋게하기 위해 수행 한 SCSS 작업이 있었지만 대부분의 작업을 수행 할 것입니다. 

Getting Set Up

실제로 우리가 필요로하는 진정한 의존성은 React 자체 뿐이지 만 반응 아이콘 물질 디자인 아이콘 글꼴을 사용하여 탐색 아이콘에 액세스하고 라우터를 연결하는 반응 라우터를 사용할 것을 권장합니다. 따라서 다음과 같은 종속성을 설치하십시오. 

$ npm install react-router

다음으로이 파일들을 우리의 앱의 components 디렉토리 안에 navigation.js라는 새로운 파일로 가져와 보겠습니다. 

import React, { Component } from 'react';
import { Link } from 'react-router';  

내비게이션 구성 요소를 만들면 재미있는 부분을 시작할 수 있습니다. 아래에 설명 할 모든 내용은이 구성 요소 내부와 render () 함수 위로 이동합니다.

export default class NavContainer extends Component {

  //our other functions, and state will go here soon

  render() {
    <div className="nav_container">
      <div className="site_title"><Link to="/">WEBSITE TITLE</Link></div>
      //navigation will go here
    </div>
  }
}

Set our initial state and get window width

조금만 더 살펴보고 이것이 작동하기 위해 우리가 필요로하는 것을 보겠습니다.

1.      우리는 모바일 네비게이션 메뉴 또는 데스크톱을 렌더링 할 시간인지 알기 위해 if-then 구문이 필요할 것입니다.
2.      모바일 내비게이션이 열려 있는지 여부를 알 수있는 방법이 필요합니다.
   

이제 우리 구성 요소의 상태를 다음과 같이 선언하도록합시다.

  constructor(props) {
    super(props);
    this.state = {
      windowWidth: window.innerWidth,
      mobileNavVisible: false
    };
  }

초기 창 너비를 설정하고 모바일 탐색이 현재 표시되지 않는다고 구성 요소에 알린 후 사용자가 화면 크기를 변경하면 Google 상태가 자체적으로 업데이트되도록 허용합시다. 

  handleResize() {
    this.setState({windowWidth: window.innerWidth});
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize.bind(this));
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize.bind(this));
  }

이 세 가지 함수는 구성 요소가 마운트되면 이벤트 리스너를 설정하고 변경된 경우 새 윈도우 너비로 상태를 업데이트하기 위해 핸들러를 처리합니다. 이것은 우리가 모바일 네비게이션이나 전체 네비게이션을 그릴 때가되는지 테스트 할 수있게 해줄 것입니다.

Full navigation menu

다음으로 탐색 메뉴 만 반환하는 함수를 만듭니다. 메뉴에 대한 링크를 처리하는 단일 함수를 작성하면 전체 메뉴와 모바일 메뉴에 같은 링크가 있기 때문에 반복적으로 변경하지 않아도됩니다.

  navigationLinks() {
    return [
      <ul>
        <li key={1}><Link to="about">ABOUT</Link></li>
        <li key={2}><Link to="blog">BLOG</Link></li>
        <li key={3}><Link to="portfolio">PORTFOLIO</Link></li>
      </ul>
    ];
  }

Mobile navigation menu

모바일 메뉴가 표시되는지 여부를 묻는 또 다른 기능을 만들고 답변을 기반으로 이러한 링크를 표시 한 다음 모바일 메뉴 버튼을 클릭하거나 터치 할 때의 클릭 핸들러를 만듭니다. 

  renderMobileNav() {
    if(this.state.mobileNavVisible) {
      return this.navigationLinks();
    }
  }

  handleNavClick() {
    if(!this.state.mobileNavVisible) {
      this.setState({mobileNavVisible: true});
    } else {
      this.setState({mobileNavVisible: false});
    }
  }

Tying the collapsible menu together

마지막으로 모바일 탐색 또는 전체 탐색을 렌더링하는이 함수를 모두 함께 사용합니다. 

  renderNavigation() {
    if(this.state.windowWidth <= 1080) {
      return [
        <div className="mobile_nav">
          <p onClick={this.handleNavClick.bind(this)}><i class="material-icons">view_headline</i></p>
          {this.renderMobileNav()}
        </div>
      ];
    } else {
      return [
        <div key={7} className="nav_menu">
          {this.navigationLinks()}
        </div>
      ];
    }
  }

우리는 단순히 우리가 정의한 너비를 초과하는지 확인하고 if 핸들러에 클릭 이벤트를 전달할 재료 아이콘이있는 모바일 탐색을 포함하는 div 또는 전체 탐색을 반환하는 if then 문을 실행하고 있습니다.

이 메뉴들 각각은 이름이있는 div 안에 중첩되어 있습니다. SCSS 덕분에 우리는 모바일 및 데스크탑 탐색의 필요에 맞게 완전히 다른 두 가지 모양의 동일한 항목을 스타일링 할 수 있습니다.

이제 이 구성 요소의 render() 함수 내에서이 함수를 호출하면됩니다.

  render() {
    return(
      <div className="nav_container">
        <div className="site_title"><Link to="/">WEBSITE TITLE</Link></div>
        {this.renderNavigation()}
      </div>
    )
  }

바라건대 이 연습을 통해 이벤트 리스너와 반응 라이프 사이클 메소드에 대해 배울 수 있기를 바랍니다. 앞에서 설명한 것처럼 접을 수있는 탐색 메뉴를 수행하는 가장 효율적인 방법은 아니지만 경우에 따라 참조 지점으로 유용 할 수 있습니다. 5 월에 이 튜토리얼을 마치기 전에 체크 아웃해야 할 많은 멋진 솔루션을 보았습니다. 아래의 주석가중 하나가 훌륭한 제품을 남겼습니다. 응용 프로그램 탐색에 필요한 생산 준비 솔루션을 찾고 있다면이 제품을 확인하는 것이 좋습니다.

읽고 공유해 주셔서 감사 드리며 아래 질문이나 의견을 남겨주세요. 다음 번엔 행복한 코딩까지!

이 프로젝트의 전체 소스 코드를 여기서 볼 수 있습니다.