gusdnr814Β·2021λ…„ 6μ›” 18일

πŸ“š Reference

μ΄λŸ¬μΏ΅μ €λŸ¬μΏ΅,
React Router,

μ°Έκ³  μ‚¬μ΄νŠΈμ— λ‚΄μš©μ„ 개인적으둜 λ³΅μŠ΅ν•˜κΈ° νŽΈν•˜λ„λ‘ μž¬κ΅¬μ„±ν•œ κΈ€μž…λ‹ˆλ‹€.
μžμ„Έν•œ μ„€λͺ…은 μ°Έκ³  μ‚¬μ΄νŠΈλ₯Ό μ‚΄νŽ΄λ³΄μ‹œκΈ° λ°”λžλ‹ˆλ‹€.


ReactλŠ” SPA(Single Page Applicatoin)μž…λ‹ˆλ‹€. νŽ˜μ΄μ§€κ°€ ν•˜λ‚˜μ΄κΈ° λ•Œλ¬Έμ— νŽ˜μ΄μ§€ 이동이 λΆˆκ°€λŠ₯ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ νŽ˜μ΄μ§€κ°€ ν•˜λ‚˜μΈ κ²½μš°μ—λ„ 일반 μ›Ή μ‚¬μ΄νŠΈμ²˜λŸΌ URL에 λ”°λ₯Έ νŽ˜μ΄μ§€ 이동을 ν•  수 있게 ν•΄μ£ΌλŠ” κΈ°λŠ₯이 React Routerμž…λ‹ˆλ‹€.

React Router API


  • HTML5의 history APIλ₯Ό ν™œμš©ν•΄μ„œ UIλ₯Ό μ—…λ°μ΄νŠΈν•©λ‹ˆλ‹€.

  • 동적인 νŽ˜μ΄μ§€(μ„œλ²„μ— μžˆλŠ” 데이터듀을 μŠ€ν¬λ¦½νŠΈμ— μ˜ν•΄ 가곡 처리 ν•œ ν›„ μƒμ„±λ˜μ–΄ μ „λ‹¬λ˜λŠ” μ›ΉνŽ˜μ΄μ§€)에 μ ν•©ν•©λ‹ˆλ‹€.

  • μƒˆλ‘œκ³ μΉ¨ν•˜λ©΄ 경둜λ₯Ό 찾지 λͺ»ν•΄μ„œ μ—λŸ¬κ°€ λ°œμƒν•©λ‹ˆλ‹€.

  • 이λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ μ„œλ²„μ— 좔가적인 μ„ΈνŒ…μ΄ ν•„μš”ν•©λ‹ˆλ‹€. νŽ˜μ΄μ§€μ˜ 유무λ₯Ό μ„œλ²„μ— μ•Œλ €μ€˜μ•Όν•˜κ³  μ„œλ²„ μ„ΈνŒ… μ‹œ 검색엔진에 μ‹ κ²½μ¨μ•Όν•©λ‹ˆλ‹€.

  • κΉƒν—™ 배포가 μ–΄λ ΅μŠ΅λ‹ˆλ‹€.


  • URL의 hashλ₯Ό ν™œμš©ν•œ λΌμš°ν„°μž…λ‹ˆλ‹€.

  • μ£Όμ†Œμ— #이 λΆ™μŠ΅λ‹ˆλ‹€.

  • 정적인 νŽ˜μ΄μ§€(미리 μ €μž₯된 νŽ˜μ΄μ§€κ°€ κ·ΈλŒ€λ‘œ λ³΄μ—¬μ§€λŠ” μ›ΉνŽ˜μ΄μ§€)에 μ ν•©ν•©λ‹ˆλ‹€.

  • 검색 μ—”μ§„μœΌλ‘œ 읽지 λͺ»ν•©λ‹ˆλ‹€.

  • μƒˆλ‘œκ³ μΉ¨ν•΄λ„ μ—λŸ¬κ°€ λ°œμƒν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

  • κΉƒν—™ 배포가 κ°„νŽΈν•©λ‹ˆλ‹€.


  • path μ†μ„±μœΌλ‘œ 경둜λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€.

  • exact 속성 μ‚¬μš© μ‹œ λΌμš°νŒ… μ€‘μ²©μœΌλ‘œ μ—¬λŸ¬ μ»΄ν¬λ„ŒνŠΈκ°€ ν•œ νŽ˜μ΄μ§€μ— λ Œλ”λ§λ˜λŠ” 것을 λ°©μ§€ν•©λ‹ˆλ‹€.

  • component μ†μ„±μœΌλ‘œ 이동할 μ»΄ν¬λ„ŒνŠΈλ₯Ό μ •ν•˜κ³  history, location, matchκ°€ ν¬ν•¨λœ 객체λ₯Ό μ „λ‹¬ν•©λ‹ˆλ‹€.

    • history: μŠ€νƒμ— ν˜„μž¬κΉŒμ§€ μ΄λ™ν•œ URL κ²½λ‘œλ“€μ΄ λ‹΄κ²¨μžˆλŠ” ν˜•νƒœλ‘œ μ£Όμ†Œλ₯Ό μž„μ˜λ‘œ λ³€κ²½ν•˜κ±°λ‚˜ λ˜λŒμ•„κ°ˆ 수 μžˆλ„λ‘ ν•΄μ€€λ‹€.

    • location: ν˜„μž¬ νŽ˜μ΄μ§€μ˜ 정보λ₯Ό 가지고 μžˆλ‹€.

    • match: <Route path="#">와 URL이 맀칭된 정보가 λ‹΄κ²¨μ Έμžˆλ‹€.


  • from μ†μ„±μœΌλ‘œ μ–΄λ–€ κ²½λ‘œμ—μ„œ λ¦¬λ‹€μ΄λ ‰νŠΈλ  것인지 μ •ν•©λ‹ˆλ‹€.

  • to μ†μ„±μœΌλ‘œ from μ†μ„±μ—μ„œ λ¦¬λ‹€μ΄λ ‰νŠΈλ  경둜λ₯Ό μ •ν•©λ‹ˆλ‹€.


  • switch문의 λ™μž‘μ²˜λŸΌ λ§€μΉ­λ˜λŠ” <Route path="#">λ₯Ό λ§Œλ‚˜κ²Œ 되면 νƒˆμΆœν•©λ‹ˆλ‹€.

  • <Redirect> μ‚¬μš© μ‹œ 계속 λ¦¬λ‹€μ΄λ ‰νŠΈλ˜λŠ” 것을 λ°©μ§€ν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•©λ‹ˆλ‹€.

  • a νƒœκ·ΈλŠ” μƒˆλ‘œκ³ μΉ¨μ΄ λ°œμƒν•˜λ―€λ‘œ, <Link>λ₯Ό μ‚¬μš©ν•΄ λ³€κ²½λœ λΆ€λΆ„λ§Œ μž¬λ Œλ”λ§ν•΄μ„œ μƒˆλ‘œκ³ μΉ¨μ„ λ°œμƒμ‹œν‚€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

  • to μ†μ„±μœΌλ‘œ 경둜λ₯Ό μ„€μ •ν•˜κ³  stateλ₯Ό 전달할 수 μžˆμŠ΅λ‹ˆλ‹€.


  • withRouter() μƒμœ„ ꡬ성 μš”μ†Œλ₯Ό 톡해 νžˆμŠ€ν† λ¦¬ 개체의 속성과 κ°€μž₯ κ°€κΉŒμš΄ <Route>의 일치 ν•­λͺ©μ— μ•‘μ„ΈμŠ€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

  • withRouter()λŠ” λ Œλ”λ§ ν•  λ•Œλ§ˆλ‹€ μ—…λ°μ΄νŠΈ 된 history, location, matchκ°€ ν¬ν•¨λœ 객체λ₯Ό ꡬ성 μš”μ†Œμ— μ „λ‹¬ν•©λ‹ˆλ‹€.

κΈμ •μ μœΌλ‘œ λ³΄λ‚΄κΈ°πŸ˜Š

0개의 λŒ“κΈ€