[react] 네비게이션바 F5 누르면 상태가 초기화 되는 현상 해결

사이트를 만들고 한동안 고민이었던게 네비게이션바의 메뉴를 누르고 상태가 활성화 된 상태에서 F5를 누르면 다시 초기화가 되는 현상을 어떻게 하면 해결할 수 있나 하는 거였는데, 

 

state 를 사용하면 된다는데 일단 여러가지로 알아본 결과 젤 간단한 방법을 찾아서 적용했고 결과는 Ok

 

웹쪽 개발은 전무하기 때문에... 일단 닥치는 대로 만들고.. 만들고 하다보면서 기반 기술을 조금씩 익혀가는..

어쨓든 실전이라 생각하고 결과물을 만들어 내고 부딪히고 깨지면서 하나씩 알아가는 즐거움도 있는 것 같다.

 

sessionStorage 를 사용하는 것인데, localStorage 라는 것도 있다. 이 둘의 차이는 구글링을 해서 알아보면 되고.

sessionStorage 는 키, 벨류로 사용한다.

 

sessionStorage.setItem('key', value);

sessionStorage.getItem('key');

 

아래는 실제로 사용했던 코드 일부로 설명

 

메뉴의 섹션 정보를 만들고

const sections = [

    { key:'1', title: 'Home', url: '/' },

    { key:'2', title: '재무분석', url: '/jaemuratio' },

]

 

메뉴버튼을 클릭하면 'menu'라는 키에 값을 저장해둠

    menuClick(title) {

        sessionStorage.setItem('menu', title);

    };

 

메뉴 구성은 아래와 같다. 메뉴클릭 함수에 해당 메뉴의 키를 전달한다

<Menu.Item key="1">

     <Link to={sections[0].url} onClick={() => this.menuClick(sections[0].key)} />

     <span>{sections[0].title}</span>

 </Menu.Item>

 

컴포넌트의 컨스트럭터에 최초에는 메뉴가 선택이 안되어 있기 때문에 강제로 1번(home) 을 보여주고 값이 설정되어 있으면 마지막에 저장되어 있는 값을 꺼내온다.

constructor(props) {

        super(props);

        let item = sessionStorage.getItem('menu');

        if(item === null)

        {

          sessionStorage.setItem('menu', '1');

        }

    };