[컴][자바스크립트] React js 로 single page nav 만들기

fixed / scroll navigation / scroll navi / smooth scroll / smooth scroll navi / stack navi / fixed navigation with scrolling / section navigatior / single page navigation / bootstrap like navigation /
scroll nav / one page nav

single page nav

보통 한페이지에서 navigation 을 둬서 메뉴항목을 누르면, 그곳으로 scroll 이 되는 navigation 을 React js 를 이용해서 만들어 보자. 이것에 대한 정확한 명칭이 없어서 여러곳에서 다른 이름을 쓰는 듯 하다. 여기서는 single page nav 라고 부르기로 하자.

react-scroll

여기서는 react-scroll library 를 사용할 것이다. 이 녀석의 사용은 간단하다.

npm install react-scroll

로 install 을 하고 아래처럼 사용하면 된다. 자세한 것은 react-scroll page 를 참고하면 된다.

참고로, test 를 할 때는 scroll 을 할만한 height 를 가지고 test 를 해야 한다. 이녀석을 scroll 을 해주는 것이기 때문에 화면이 scroll 이 필요없는 height 라면, 아무런 반응도 하지 않게 된다.

사실 이것으로 주요 기능은 전부 다 됐다. 이제 오른쪽에 고정하는 것만 하면 된다. 나머지 꾸미는 작업은 각자 알아서 하면 된다.

import {Link, Element} from 'react-scroll'

class ScrollTest extends React.Component{
    constructor(props) {
        super(props)
        this.state = {}

    }

    render() {
        return (
            <div className='scrollTest'}>
                <Link activeClass="active" to="test1" spy={true} smooth={true} 
                    offset={50} duration={500} onSetActive={this.handleSetActive}>
                    Test 1
                </Link>
                <Link activeClass="active" to="test2" spy={true} smooth={true} 
                    offset={50} duration={500} delay={1000}>
                    Test 2 (delay)
                </Link>
                <Link className='myclass' to="test3" spy={true} smooth={true} duration={500}>
                    Test 3 (anchor)
                </Link>

                {/* contents */}
                <Element name='test1' className='element'>
                    <div className='scrollTestSector'>
                        Element 1
                    </div>
                </Element>
                <Element name='test2' className='element'>
                    <div className='scrollTestSector'>
                        Element 2
                    </div>
                </Element>
                <div id='test3' className='element'>
                    <div className='scrollTestSector'>
                        Element 3
                    </div>
                </div>
                

            </div>
        );
    };
}
ScrollTest.defaultProps = {}

fixed menu

이제 오른쪽에 고정시켜 보자. 이것은 ref. 5 의 화면을 보면 어떤 모습인지 알 수 있다. 아래처럼 css 를 설정해주면 된다.

/* css file */
.singleNav {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

import {Link, Element} from 'react-scroll'

class ScrollTest extends React.Component{
    constructor(props) {
        super(props)
        this.state = {}

    }

    render() {
        return (
            <div className='scrollTest'}>
                <ul className='singleNav'>
                    <li>
                        <Link activeClass="active" to="test1" spy={true} smooth={true} 
                            offset={50} duration={500} onSetActive={this.handleSetActive}>
                            Test 1
                    </li>
                    </Link>
                    <li>
                        <Link activeClass="active" to="test2" spy={true} smooth={true} 
                            offset={50} duration={500} delay={1000}>
                            Test 2 (delay)
                    </li>
                    </Link>
                    <li>
                        <Link className='myclass' to="test3" spy={true} smooth={true} duration={500}>
                            Test 3 (anchor)
                        </Link>
                    </li>
                </ul>

                {/* contents */}
                <Element name='test1' className='element'>
                    <div className='scrollTestSector'>
                        Element 1
                    </div>
                </Element>
                <Element name='test2' className='element'>
                    <div className='scrollTestSector'>
                        Element 2
                    </div>
                </Element>
                <div id='test3' className='element'>
                    <div className='scrollTestSector'>
                        Element 3
                    </div>
                </div>
                

            </div>
        );
    };
}
ScrollTest.defaultProps = {}

References

1. Single Page Site with Smooth Scrolling, Highlighted Link, and Fixed Navigation - Call Me Nick
2. react-scroll-nav
3. Creating a Single-Page App in React using React Router | kirupa.com
4. fisshy/react-scroll: React scroll component
5. CSS: fixed menus