[React.js] 리액트 라우트: SPA (싱글 페이지 어플리케이션)

🤷‍♀️ SPA 란?

뷰 렌더링을 사용자 브라우저가 담당 + 사용자와의 인터랙션 발생 시 필요한 부분만 자바스크립트로 업데이트
사용자에게 제공하는 페이지는 한 종류지만 주소 상태에 따라 다양한 화면 보여줌(라우팅)

---

📌 React.js 에서 라우트를 통한 SPA

• Route

규칙을 가진 경로에 어떤 컴포넌트 보여줄지 정의

<Route path="주소규칙" component={보여줄 컴포넌트} />

• 여러 Route 주소 지정 : path props를 배열로 설정

<Route path="{['주소규칙1','주소규칙2',...]}" component={보여줄 컴포넌트} />

• Link

페이지를 새로 불러오지 않고 애플리케이션을 유지한 상태에서, HTML5 History API 사용해서 페이지 주소만 변경

<Link to="주소">내용</Link>

• URL 파라미터 (ex. /aaa/bbb) //아이디 혹은 이름 조회
  • 값을 props로 받아와서 조회
  • 라우트로 사용되는 컴포넌트에서 받아오는 match라는 객체 안에 params 값 참조
  • match 객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보여지는지에 대한 정보

    <li><Link to="/profile/user1">user1</Link></li>
    <li><Link to="/profile/user2">user2</Link></li>
    
    <Route path="/profile/:username" component={Profile}/>

  • const data={
    	user1: {
            name: '홍길동',
            depart: '',
            company: ''
        }
    }
    
    const Profile =({match})=> {
        const {username}=match.params;
        const profile=data[username];
    
        if (!profile) {
            return <div>NaN</div>
        }
        return(
            <div>
                <h5>{username}({profile.name})</h5>
                <p>{profile.company}/{profile.depart}</p>
            </div>
        )
    }

  • <li><Link to="/profile/user1">user1</Link></li>
    <li><Link to="/profile/user2">user2</Link></li>
    
    <Route path="/profile/:username" component={Profile}/>
• URL 쿼리 (ex. aaa?details=true) //키워드 검색 및 페이지 옵션 전달
  • location 객체에 있는 search 값에서 조회
  • location 객체는 라우트로 사용된 컴포넌트에게 props 전달, 현재 주소에 대한 정보
  • qs 라이브러리 사용 

  • const Question=({location})=>{ const query =qs.parse(location.search,{ ignoreQueryPrefix: true }); const showDetail = query.detail === 'true'; return ( <div> <h2></h2> <p></p> {showDetail && <p>상세 내용</p>} </div> ); }
    npm add qs

• 서브 라우트

라우트 내부에 라우트 정의

• NavLink

현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 css 클래스를 적용

• 활성화 시킬 스타일 activeStyle 값 props
• 활성화 시킬 css 클래스 activeClassName 값 props