[TIL] React : Basics

AcidΒ·2021λ…„ 9μ›” 15일
1

πŸ“˜ React

λͺ©λ‘ 보기
1/2
post-thumbnail

λ¦¬μ•‘νŠΈ(React)에 λŒ€ν•œ 기본적인 λ‚΄μš©μœΌλ‘œ λ¦¬μ•‘νŠΈμ— λŒ€ν•œ 기반 정보와 μ»΄ν¬λ„ŒνŠΈ, JSX에 λŒ€ν•œ λ‚΄μš©μ„ ν¬ν•¨ν•©λ‹ˆλ‹€. 😊

λ¦¬μ•‘νŠΈλž€ 무엇인가? πŸ”€

ν—˜ν•˜λ”” ν—˜ν•œ 바닐라 μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ§€λ‚˜ λ“œλ””μ–΄ λ¦¬μ•‘νŠΈμ— λ„μ°©ν–ˆλ‹€. 잠깐 μ•Œμ•„λ΄€λŠ”λ°λ„ 이리 μ–΄λ©”μ΄μ§•ν•˜κ³  μ–΄μΈν•œκ²Œ μžˆλ‚˜ μ‹Άλ‹€. κ·Έλ ‡λ‹€λ©΄ λ¦¬μ•‘νŠΈλŠ” 무엇인가? νŽ˜μ΄μŠ€λΆμ—μ„œ λ§Œλ“ κ±΄ μ•Œκ² λŠ”λ° μ œλŒ€λ‘œ μ•Œμ•„λ³Έ 적이 μ—†λ‹€. 이번 ν¬μŠ€νŒ…μ—μ„œ κ°„λ‹¨νžˆ λ¦¬μ•‘νŠΈμ— λŒ€ν•΄ μ•Œμ•„λ³΄κ³ , μ–΄λ–€ μ›λ¦¬λ‘œ λ””μŠ€ν”Œλ ˆμ΄μ— λ°˜μ˜λ˜λŠ”μ§€μ— λŒ€ν•΄μ„œλ„ Araboza.

λ¦¬μ•‘νŠΈ(React)λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 라이브러리의 ν•˜λ‚˜λ‘œ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€(UI)λ₯Ό λ§Œλ“€κΈ° μœ„ν•΄ μ‚¬μš©λœλ‹€. μ•žμ—μ„œλ„ λ§ν–ˆλ“―μ΄, νŽ˜μ΄μŠ€λΆμ— μ˜ν•΄ λ§Œλ“€μ–΄μ‘Œκ³  κ°œλ³„ 개발자 및 κΈ°μ—…λ“€ 곡동체에 μ˜ν•΄ μœ μ§€λ³΄μˆ˜ λœλ‹€.

λ¦¬μ•‘νŠΈμ™€ λΉ„μŠ·ν•˜κ²Œ μ‚¬μš©λ˜λŠ” Angular, Vueκ°€ MVC(Model-View-Controller) Architecture인데 λ°˜ν•΄, λ¦¬μ•‘νŠΈλŠ” 였직 View λ§Œμ„ λ‹΄λ‹Ήν•˜λ©°, 그렇기에 좔가적인 third-party 라이브러리(React-router, Redux)λ₯Ό ν•¨κ»˜ μ‚¬μš©ν•œλ‹€.

πŸ’‘ third-party library

기본적으둜 제 3자의 의미λ₯Ό κ°–λŠ” 'third-party' κ°€ ν¬ν•¨λœ 'third-party library'λŠ” ν”„λ‘œκ·Έλž˜λ°μ„ μœ„ν•΄ 도움이 λ˜λŠ” ν”ŒλŸ¬κ·ΈμΈμ΄λ‚˜ 라이브러리 등을 λ§ν•œλ‹€.

이에 λŒ€ν•œ μ˜ˆμ‹œλ‘œ λ¦¬μ•‘νŠΈμ˜ 경우 React-routerλ₯Ό μ‚¬μš©ν•˜λŠ”λ°, SPA(Single Page Application) 방식을 μ±„νƒν•˜λŠ” λ¦¬μ•‘νŠΈμ˜ 경우 MPA(Multi Page Application) λ°©μ‹μ²˜λŸΌ νŽ˜μ΄μ§€μ˜ 이동이 λΆˆκ°€ν”Όν•˜λ‹€. 그렇기에 νŽ˜μ΄μ§€λ₯Ό μƒˆλ‘œ 뢈러 듀이지 μ•Šκ³  λ³€κ²½λœ λΆ€λΆ„λ§Œ μˆ˜μ •ν•˜μ—¬ ν•˜λ‚˜μ˜ νŽ˜μ΄μ§€μ—μ„œ 좜λ ₯ν•˜κ²Œ ν•΄μ£ΌλŠ” λ Œλ”λ§ 라이브러리인 λΌμš°ν„°λ₯Ό μ‚¬μš©ν•˜λŠ” 것이닀.


가상 돔(Virtual Dom) 🌐


λ¦¬μ•‘νŠΈμ˜ κ°€μž₯ 큰 μž₯점 쀑 ν•˜λ‚˜λŠ” 가상 돔(Virtual DOM)을 톡해 μ‹€μ œ 돔에 μ ‘κ·Όν•˜λŠ” λŒ€μ‹ μ— 좔상화 μ‹œν‚¨ 객체에 μ ‘κ·Όν•œλ‹€λŠ” 것이닀. 이 뢀뢄이 μ–΄λ– ν•œ μž₯점을 κ°–λŠ” μ§€λŠ” λ‹€μŒκ³Ό 같은 μ΄μœ κ°€ μžˆλ‹€.

μœ„ μ˜ˆμ‹œλŠ” UIλ₯Ό λ³€κ²½ν•˜λŠ” κ³Όμ •μ—μ„œ 가상돔과 λΈŒλΌμš°μ €μ˜ μƒνƒœλ₯Ό λ³΄μ—¬μ£ΌλŠ” λ‚΄μš©μ΄λ‹€. μœ„ λ‚΄μš©μ„ μ„€λͺ…ν•˜κΈ°μ— μ•žμ„œ μ‹€μ œ 돔과 가상 λ”μ˜ 차이점에 λŒ€ν•΄ κ°„λ‹¨νžˆ μ•Œμ•„λ³΄μž. μ‹€μ œ 돔을 μ‘°μž‘ν•˜λŠ” 것은 화면에 μ‹€μ œλ‘œ μ μš©ν•˜λŠ” 과정이기에 이λ₯Ό μ§„ν–‰ν•˜λŠ” 것은 μƒλŒ€μ μœΌλ‘œ 무거운 ν”„λ‘œμ„ΈμŠ€μ— μ†ν•œλ‹€. κ·Έλ ‡κΈ° λ•Œλ¬Έμ—, 이λ₯Ό 직접 μ‘°μž‘ν•˜λŠ” 것 보닀 이전에 λ§Œλ“€μ–΄ 놓은 κ²½λŸ‰ 볡사본인 가상 돔에 이λ₯Ό μš°μ„ μ μœΌλ‘œ μ μš©ν•˜κ³  μ‹€μ œ 돔과 μ–΄λ– ν•œ 차이점이 μžˆλŠ” 지 λΉ„κ΅ν•˜μ—¬ 돔 μ‘°μž‘μ„ μ§„ν–‰ν•˜λŠ” 것이 보닀 더 κ°€λ²Όμš΄ ν”„λ‘œμ„ΈμŠ€μ— ν•΄λ‹Ήν•˜λŠ” 것이닀.

λ‹€μ‹œ λŒμ•„μ™€μ„œ μœ„ μ˜ˆμ‹œλ₯Ό μ‚΄νŽ΄λ³΄λ©΄, μš°μ„  μƒνƒœκ°€ λ³€ν™”λœ 것을 μΈμ§€ν•˜κ³  이에 따라 λ³€ν™”ν•œ 뢀뢄을 μΆ”μ ν•˜μ—¬ 가상 돔에 μ μš©ν•˜μ˜€μœΌλ©° λ§ˆμ§€λ§‰μœΌλ‘œ λ³€κ²½ 뢀뢄에 λŒ€ν•΄ μ‹€μ œ 돔에 μ μš©ν•˜μ—¬ 이λ₯Ό 마무리 μ§“λŠ”λ‹€. μ΄λ ‡κ²Œ 되면 νŠΉνžˆλ‚˜ μ‚¬μš©μžμ˜ μΈν„°λž™μ…˜μ΄ λ§Žμ€ SPA(Single Page Application)λŠ” λ³€ν™”μ˜ 양이 많기 λ•Œλ¬Έμ—, λ³€ν™”μ˜ 양을 ν•œκΊΌλ²ˆμ— λ¬Άμ–΄μ„œ ν•œ λ²ˆμ— μ§„ν–‰ν•˜λŠ” ν˜•νƒœμΈ λ¦¬μ•‘νŠΈκ°€ 훨씬 μΎŒμ ν•œ λΈŒλΌμš°μ € ν™˜κ²½μ„ μ œκ³΅ν•œλ‹€.

πŸ’‘ SPA(Single Page Application)

SPA(Single Page Application)λž€ μ„œλ²„μ—μ„œ μ™„μ „νžˆ μƒˆλ‘œμš΄ νŽ˜μ΄μ§€λ₯Ό λΆˆλŸ¬μ˜€μ§€ μ•Šκ³  ν˜„μž¬ νŽ˜μ΄μ§€λ₯Ό λ™μ μœΌλ‘œ λ‹€μ‹œ μž‘μ„±ν•¨μœΌλ‘œ νŽ˜μ΄μ§€λ₯Ό λ³€κ²½ν•˜λŠ” ν˜•μ‹μ„ λ§ν•œλ‹€. νŽ˜μ΄μŠ€λΆμ„ ν•˜λ‹€λ³΄λ©΄ λ‹€λ₯Έ μ‚¬λžŒμ΄ κ²Œμ‹œλ¬Όμ— λŒ“κΈ€μ„ λ‹¬μ•˜μ„ λ•Œ, λ³„λ„μ˜ μƒˆλ‘œκ³ μΉ¨ 없이 μ—…λ°μ΄νŠΈ 됨을 λ³Ό 수 μžˆμ—ˆλ‹€. κ·ΈλŸ¬ν•œ κΈ°λŠ₯이 κ°€λŠ₯ν•œ μ΄μœ λŠ” νŽ˜μ΄μ§€κ°€ μ—…λ°μ΄νŠΈ 될 λ•Œ, μƒˆλ‘œμš΄ λ¬Έμ„œ(HTML)λ₯Ό λ‹€μ‹œ μŠ€μΊ”ν•˜λŠ” 것이 μ•„λ‹ˆλΌ, μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό ν™œμš©ν•˜μ—¬ λ‹€μ‹œκΈˆ λ³€ν™”κ°€ μΌμ–΄λ‚œ 뢀뢄에 λŒ€ν•΄μ„œλ§Œ μˆ˜μ •μ„ μ§„ν–‰ν•˜κΈ° λ•Œλ¬Έμ΄λ‹€.

SPA와 λ°˜λŒ€λ˜λŠ” κ°œλ…μœΌλ‘œ MPA(Multi Page Application)κ°€ μžˆλŠ”λ°, λ‚˜λŠ” ν•΄λ‹Ή κ°œλ…μ„ ν™”μ΄νŠΈλ³΄λ“œμ˜ 갯수둜 λΉ„μœ ν•˜μ—¬ μ΄ν•΄ν•˜κΈ°λ‘œ ν–ˆλ‹€. SPA의 경우 ν™”μ΄νŠΈλ³΄λ“œκ°€ ν•˜λ‚˜κ³  μ—¬λŸ¬κ°€μ§€ μ΄ˆμ•ˆμ„ λ°”κΎΈλ©΄μ„œ μˆ˜μ •ν•˜λŠ” ν˜•μ‹μ΄κ³ , MPA의 κ²½μš°λŠ” μ—¬λŸ¬κ°€μ§€μ˜ ν™”μ΄νŠΈλ³΄λ“œμ— μ΄ˆμ•ˆλ“€μ΄ 미리 μž‘μ„±λ˜μ–΄ μžˆλŠ” μƒνƒœμ—μ„œ ν™”μ΄νŠΈλ³΄λ“œλ₯Ό λ³€κ²½ν•˜λŠ” ν˜•μ‹μ΄λΌκ³  μ΄ν•΄ν–ˆλ‹€.

그렇기에 SPA ν˜•μ‹μ€ λΉ λ₯Έ λ°˜μ‘μ„±, ν™”λ©΄ μ „ν™˜ λ“±μ˜ μΈ‘λ©΄μ—μ„œ μ‚¬μš©μž μΉœν™”μ μ΄κ³  μƒλŒ€μ μœΌλ‘œ μœ μ§€λ³΄μˆ˜κ°€ 쉽고 κ°œλ°œμ†λ„κ°€ λΉ λ₯΄λ©°, 전체 νŠΈλž˜ν”½ 양이 μ λ‹€λŠ” μž₯점이 μžˆλ‹€.

λ°˜λ©΄μ—, 처음 접속과 λ™μ‹œμ— λͺ¨λ“  λ¦¬μ†ŒμŠ€λ₯Ό ν•œ λ²ˆμ— λ°›κΈ° λ•Œλ¬Έμ— 초기 ꡬ동 속도가 λŠλ¦¬λ‹€λŠ” 점과, 검색엔진 μ΅œμ ν™”(SEO)κ°€ CSR λ°©μ‹μœΌλ‘œ μ–΄λ ΅λ‹€λŠ” 점 등이 λ‹¨μ μœΌλ‘œ κΌ½νžŒλ‹€.


μ»΄ν¬λ„ŒνŠΈ(Component) 🧱

λ˜ν•œ λ¦¬μ•‘νŠΈμ˜ μž₯점으둜 μ»΄ν¬λ„ŒνŠΈ(Component)λ₯Ό ν™œμš©ν•œλ‹€λŠ” 점이 μžˆλ‹€. μ»΄ν¬λ„ŒνŠΈλž€ 컴퓨터 μ†Œν”„νŠΈμ›¨μ–΄μ—μ„œ λ‹€μ‹œ μ‚¬μš©ν•  수 μžˆλŠ” λ²”μš©μ„±μ„ μœ„ν•΄ 개발된 μ†Œν”„νŠΈμ›¨μ–΄ ꡬ성 μš”μ†Œλ₯Ό μΌμ»«λŠ”λ‹€. 그런 μ˜λ―Έμ—μ„œ μ•Œ 수 μžˆλ“―μ΄ λ¦¬μ•‘νŠΈμ—μ„œλŠ” λ°˜λ³΅λ˜λŠ” UI ꡬ성 μš”μ†Œλ“€μ„ ν•˜λ‚˜μ˜ μ»΄ν¬λ„ŒνŠΈλ‘œ μ§€μ •ν•˜μ—¬ 반볡적인 μž‘μ—…μ„ λ°©μ§€ν•˜κ³  μœ μ§€λ³΄μˆ˜μ— μ›ν™œν•¨μ„ λΆ€μ—¬ν•œλ‹€. μ»΄ν¬λ„ŒνŠΈμ˜ νŠΉμ§•μ„ μ •λ¦¬ν•˜λ©΄ λ‹€μŒκ³Ό κ°™λ‹€.

  • μž¬ν™œμš©μ΄ κ°€λŠ₯ν•˜λ‹€.
  • μ½”λ“œ μœ μ§€λ³΄μˆ˜μ— μš©μ΄ν•˜λ‹€.
  • μ½”λ“œ 가독성이 높아진닀.
  • μ»΄ν¬λ„ŒνŠΈ λ‚΄ μ»΄ν¬λ„ŒνŠΈλ₯Ό 포함할 수 μžˆλ‹€.


μ΄λŸ¬ν•œ νŠΉμ§• 덕뢄에 μ»΄ν¬λ„ŒνŠΈλ₯Ό ν™œμš©ν•˜μ—¬ UI ꡬ성을 μ’€ 더 μ²΄κ³„μ μœΌλ‘œ, κ³„νšμ μœΌλ‘œ ν•  수 μžˆλŠ” 것이닀.

λ¦¬μ•‘νŠΈμ—λŠ” 두 κ°€μ§€μ˜ μ»΄ν¬λ„ŒνŠΈ μ„ μ–Έ 방식이 μžˆλŠ”λ° ν•˜λ‚˜λŠ” 클래슀(Class)ν˜• μ»΄ν¬λ„ŒνŠΈ , λ‚˜λ¨Έμ§€ ν•˜λ‚˜λŠ” ν•¨μˆ˜ν˜•(Functional) μ»΄ν¬λ„ŒνŠΈμ΄λ‹€. ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈμ™€ ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈμ˜ 역할은 λΉ„μŠ·ν•˜μ§€λ§Œ, κ·Έ μ„ μ–Έ λ°©μ‹μ—μ„œ 차이λ₯Ό 보인닀.

ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈ(Class Component)


import React from 'react'

class Component extends React.Component { // extends : 클래슀λ₯Ό λ‹€λ₯Έ 클래슀의 μžμ‹μœΌλ‘œ
  render() {
    return (
      <div>
        <h1>This is Class Component!</h1>
      </div>
    )
  }
}

export default Component


ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈλŠ” λ³΄μ΄λŠ” 듯이 render() ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜κ³  JSX λ₯Ό λ°˜ν™˜ν•˜λŠ” ν˜•μ‹μ„ κ°–λŠ”λ‹€. ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈλŠ” λ‹€μŒκ³Ό 같은 νŠΉμ§•μ„ κ°–λŠ”λ‹€.

  • state κΈ°λŠ₯, lifecycle κΈ°λŠ₯ 등을 μ‚¬μš© κ°€λŠ₯
  • μž„μ˜ λ©”μ„œλ“œ μ •μ˜ κ°€λŠ₯

ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈ(Functional Componant)


import React from 'react'

const Component = () => {
  return (
    <div>
      <h1>This is Functional Component!</h1>
    </div>
  )
};

export default Component


ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈλŠ” ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈμ™€ λ‹€λ₯΄κ²Œ render() ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•  ν•„μš” μ—†κ³ , 보닀 더 κ°„λž΅ν•˜κ²Œ μ»΄ν¬λ„ŒνŠΈλ₯Ό μ„ μ–Έν•  수 μžˆλ‹€λŠ” μž₯점이 μžˆλ‹€. ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈμ˜ νŠΉμ§•μ€ λ‹€μŒκ³Ό κ°™λ‹€.

  • λ©”λͺ¨λ¦¬ μžμ›μ„ μƒλŒ€μ μœΌλ‘œ 덜 μ‚¬μš©ν•œλ‹€.
  • μ»΄ν¬λ„ŒνŠΈ 선언이 νŽΈν•˜λ‹€.
  • Hook ν™œμš©


μ΅œκ·Όμ—λŠ” ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈλ₯Ό 더 μ„ ν˜Έν•˜λŠ” 좔세이닀.

πŸ’‘ JSX(JavaScript Syntax Extension)

JSX(JavaScript Syntax Extension)λ₯Ό κ°„λ‹¨ν•˜κ²Œ λ§ν•˜λ©΄ "μžλ°”μŠ€ν¬λ¦½νŠΈ λ‚΄λΆ€μ—μ„œ HTML을 μ‚¬μš©ν•œ 것"이라고 말할 수 있고, μ •ν™•νžˆ λ§ν•˜μžλ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈ ν™•μž₯ 문법이닀.

μœ„ μ˜ˆμ‹œλ“€μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈ 내뢀에 HTML ꡬ쑰의 μ½”λ“œκ°€ μž‘μ„±λœ 것을 확인할 수 μžˆλ‹€. μ΄λ ‡κ²Œ μž‘μ„±λœ μ½”λ“œλ“€μ€ 바벨(Babel)μ΄λΌλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 컴파일러λ₯Ό 톡해 일반 μžλ°”μŠ€ν¬λ¦½νŠΈ ν˜•νƒœμ˜ μ½”λ“œλ‘œ λ³€ν™˜λœλ‹€. μ΄λ ‡κ²Œ JSX둜 μž‘μ„±ν•˜λ©΄, DOMκ³Ό Event λ₯Ό ν™œμš©ν•˜λŠ” 것보닀 μ’€ 더 μ§κ΄€μ μœΌλ‘œ 확인할 수 μžˆκΈ°μ—, 개발 κ³Όμ •μ—μ„œ νš¨μœ¨μ„ μ¦κ°€μ‹œν‚¨λ‹€.

JSX의 문법적 νŠΉμ§•μœΌλ‘œ μžλ°”μŠ€ν¬λ¦½νŠΈ ν‘œν˜„μ„ {} μ•ˆμ— μž‘μ„±ν•˜λŠ” 것과, Self Closing tag 그리고 μž‘μ„±ν•  λ•Œ, ν•˜λ‚˜μ˜ μ»΄ν¬λ„ŒνŠΈλŠ” λͺ¨λ“  μš”μ†Œλ“€μ„ κ°μ‹ΈλŠ” ν•˜λ‚˜μ˜ μ΅œμƒμœ„ μš”μ†Œκ°€ μ‘΄μž¬ν•΄μ•Ό ν•œλ‹€λŠ” 점 등이 μžˆλ‹€.

// μ΅œμƒμœ„ μš”μ†Œ 있음
return (
  <div>
    <h1>Hello, World!</h1>
    <div>Welcome to JSX!</div>
  </div>
)
// μ΅œμƒμœ„ μš”μ†Œ μ—†μŒ : 였λ₯˜ λ°œμƒ
return (
  <h1>Hello, World!</h1>
  <div>Welcome to JSX!</div>
)


μ΅œμƒμœ„ μš”μ†Œκ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” 경우, λ‹€λ₯Έ νƒœκ·Έλ‘œ λž˜ν•‘ν•˜λŠ” 것이 κΊΌλ €μ§€λŠ” 경우 Fragmentsλ₯Ό ν™œμš©ν•˜μ—¬ ν˜•μ‹μƒμ˜ λž˜ν•‘μ„ 진행할 수 μžˆλ‹€. κ·Έλ ‡κ²Œ 되면 μ‹€μ œλ‘œ λ Œλ”λ§ 되고 λ‚œ λ’€μ—λŠ” κ°μ‹ΈλŠ” νƒœκ·ΈλŠ” μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” κ²°κ³Όλ₯Ό 보여쀀닀.

// μ΅œμƒμœ„ μš”μ†Œ Fragments
return (
  <>
    <h1>Hello, World!</h1>
    <div>Welcome to JSX!</div>
  </>
)

λ¦¬μ•‘νŠΈ λΌμš°ν„°(react-router) πŸ—ΊοΈ

μ•žμ—μ„œ SPA 방식에 λŒ€ν•΄ μ–ΈκΈ‰ν•˜λ©΄μ„œ, κ΄€λ ¨ κ°œλ…μœΌλ‘œ λ“±μž₯ν–ˆλ˜ λΌμš°ν„°μ— λŒ€ν•΄ μ•Œμ•„λ³΄μž. SPAλŠ” 말 κ·ΈλŒ€λ‘œ ν•˜λ‚˜μ˜ νŽ˜μ΄μ§€ 만으둜 κ΅¬μ„±λœ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μ˜λ―Έν•˜λŠ”λ°, 이것이 곧 ν•œ μ’…λ₯˜μ˜ ν™”λ©΄ 만이 μ‘΄μž¬ν•˜λŠ” 것은 μ•„λ‹ˆλ‹€. λ‹Ήμ—°νžˆλ„, SPA λ˜ν•œ 직접 λΈŒλΌμš°μ €μ˜ APIλ₯Ό μ‚¬μš©ν•˜κ³  μƒνƒœλ₯Ό μ„€μ •ν•΄μ„œ λ‹€λ₯Έ λ·°λ₯Ό 보여쀄 수 μžˆλ‹€.

μ΄λ ‡κ²Œ λ‹€λ₯Έ μ£Όμ†Œμ— 따라 λ‹€λ₯Έ λ·°λ₯Ό λ³΄μ—¬μ£ΌλŠ” 것을 λΌμš°νŒ…(Routing)이라고 ν•˜κ³ , 곡식은 μ•„λ‹ˆμ§€λ§Œ λ¦¬μ•‘νŠΈμ˜ κ²½μš°μ—” 이제 μ•Œμ•„λ³Ό λ¦¬μ•‘νŠΈ λΌμš°ν„°(react-router)λΌλŠ” μ¨λ“œ νŒŒν‹° 라이브러리λ₯Ό 주둜 μ‚¬μš©ν•œλ‹€.

λ¦¬μ•‘νŠΈ λΌμš°ν„° μ‚¬μš©λ²•


μš°μ„  CRA ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν–ˆλ‹€λŠ” μ „μ œ ν•˜μ— μ΄ν›„μ˜ 과정을 μ•Œμ•„λ³΄μž. λ¦¬μ•‘νŠΈ λΌμš°ν„°λ₯Ό μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œλŠ” λ³„λ„μ˜ μ„€μΉ˜ 과정을 ν•„μš”λ‘œ ν•œλ‹€.

npm install react-router-dom --save


CRA ν”„λ‘œμ νŠΈλ₯Ό μ„€μΉ˜ν•˜κ³ , ν•΄λ‹Ή λ””λ ‰ν† λ¦¬λ‘œ μ΄λ™ν•˜μ—¬, ν„°λ―Έλ„λ‘œ ν•΄λ‹Ή λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•˜μ—¬ λ¦¬μ•‘νŠΈ λΌμš°ν„°λ₯Ό μ„€μΉ˜ν•œλ‹€. μ„€μΉ˜κ°€ 끝났닀면, 이제 μ»΄ν¬λ„ŒνŠΈλ₯Ό κ΅¬ν˜„ν•  μ°¨λ‘€λ‹€.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import Login from './pages/Login/Login';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;


μœ„ μ˜ˆμ‹œλŠ” λΌμš°ν„° μ»΄ν¬λ„ŒνŠΈλ₯Ό κ΅¬ν˜„ν•œ μ˜ˆμ‹œμ΄λ‹€. μš°μ„  μ΅œμƒλ‹¨μ—μ„œ λ¦¬μ•‘νŠΈ λͺ¨λ“ˆμ„ 뢈러였고, λΌμš°ν„°μ—μ„œ BrowserRouter , Switch , Route λ₯Ό λΆˆλŸ¬μ˜¨λ‹€. μœ„ μ„Έ κ°€μ§€λŠ” μ•„λž˜μ˜ μ»΄ν¬λ„ŒνŠΈ 생성에 μ‚¬μš©λ  것이닀.

그리고 μ΄μ–΄μ„œ νŽ˜μ΄μ§€μ— ν•΄λ‹Ήν•˜λŠ” μ»΄ν¬λ„ŒνŠΈλ“€μ„ 각각의 μœ„μΉ˜μ—μ„œ λΆˆλŸ¬μ˜¨λ‹€. μœ„ μ˜ˆμ‹œμ—μ„  Login κ³Ό Main μ΄λΌλŠ” μ»΄ν¬λ„ŒνŠΈλ₯Ό λΆˆλŸ¬μ™”λ‹€.

κ·Έλ‹€μŒμ— 본격적으둜 μ»΄ν¬λ„ŒνŠΈλ₯Ό μƒμ„±ν•œλ‹€. μœ„ μ˜ˆμ‹œμ—μ„  μ»΄ν¬λ„ŒνŠΈ 생성을 클래슀 μ»΄ν¬λ„ŒνŠΈ 방식을 μ‚¬μš©ν•˜μ—¬ μƒμ„±ν–ˆλ‹€. μš°μ„  Router 둜 μ •μ˜λœ BrowserRouter λ₯Ό 톡해 전체 λΌμš°νŠΈλ“€μ„ λ¬Άμ–΄μ€€λ‹€. 그리고 κ·Έ μ•ˆμ— Switch λ₯Ό 톡해 이동할 Route 듀을 λ¬Άμ–΄μ€€λ‹€. λ§ˆμ§€λ§‰μœΌλ‘œ κ·Έ 내뢀에 Route λ₯Ό μž‘μ„±ν•˜λŠ” κ²ƒμœΌλ‘œ μ»΄ν¬λ„ŒνŠΈ 생성을 λ§ˆμΉœλ‹€. μœ„ μ˜ˆμ‹œμ˜ 경우 초기 링크λ₯Ό Login 으둜 μ„€μ •ν•œλ‹€.

μ΄λ ‡κ²Œ Routes μ»΄ν¬λ„ŒνŠΈλ₯Ό μƒμ„±ν•˜μ˜€μœΌλ©΄, index.js 의 λ Œλ”λ§ 뢀뢄을 λ³€κ²½ν•΄μ€€λ‹€.

ReactDOM.render(<Routes />, document.getElementById('root'));


μœ„ μ˜ˆμ‹œλ₯Ό 보면 Routes μ»΄ν¬λ„ŒνŠΈλ₯Ό λ Œλ”λ§ν•˜λŠ” κ²ƒμœΌλ‘œ λ³€κ²½λ˜μ–΄μžˆλ‹€. μ΄λ ‡κ²Œ μ„€μ •ν•˜λ©΄, Routes μ»΄ν¬λ„ŒνŠΈ λ‚΄λΆ€μ—μ„œ μ„€μ •ν•œ default κ°’μ˜ 링크둜 초기 νŽ˜μ΄μ§€κ°€ μ„€μ •λ˜κ³ , 이후 <Link> μ»΄ν¬λ„ŒνŠΈ ν˜Ήμ€ this.props.history.push() λ₯Ό 톡해 νŽ˜μ΄μ§€λ₯Ό 이동할 수 μžˆλ‹€.

μœ„ 두 가지 방법은 λ¦¬μ•‘νŠΈ λΌμš°ν„°λ₯Ό μ΄μš©ν•˜μ—¬ 링크λ₯Ό 이동할 수 μžˆλŠ” 두 가지 방법이닀. μ™œ ꡳ이 두 가지 방법이 μ‘΄μž¬ν•˜λŠ”μ§€ μ‚¬μš©λ²•κ³Ό ν•¨κ»˜ 차이점을 μ•Œμ•„λ³΄μž.

μš°μ„  각각의 μ‚¬μš©λ²•μ€ λ‹€μŒκ³Ό κ°™λ‹€.

// <Link>
// 뢈러였기
import { Link } from 'react-router-dom'
<Link to="/signup">νšŒμ›κ°€μž…</Link>
// this.props.history.push()'
// 뢈러였기
import { withRouter } from 'react-router-dom'
// ν•¨μˆ˜ 생성
goToMain = () => {
  this.props.history.push('/main');
}
// μ΄λ²€νŠΈμ— μΆ”κ°€
<button className="loginBtn" onClick={this.goToMain}>


μœ„μ—μ„œ λ³Ό 수 μžˆλŠ” κ°€μž₯ 큰 차이점은 ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•œλ‹€λŠ” 점일 것이닀. Link 의 경우 λ°”λ‘œ μ»΄ν¬λ„ŒνŠΈλ₯Ό μΆ”κ°€ν•˜μ—¬ 이λ₯Ό 쑰건 없이 λ°”λ‘œ μ‹€ν–‰ν•  수 μžˆμ§€λ§Œ, this.props.history.push() 의 경우 ν•¨μˆ˜λ₯Ό 톡해 μž‘μ„±ν•˜μ—¬ ν•΄λ‹Ή κ³Όμ •μ—μ„œ λ‘œμ§μ„ μΆ”κ°€ν•  수 μžˆλ‹€λŠ” 점이 μžˆλ‹€. κ·Έλ ‡λ‹€, 둜직의 μΆ”κ°€ κ°€λŠ₯ μœ λ¬΄κ°€ 두 가지 λ°©μ‹μ˜ 큰 차이점이닀.

λ˜ν•œ Link 의 경우, λ Œλ”λ§ 이후 <a> νƒœκ·Έλ‘œ λ³€ν•˜λŠ”λ°, μ‚¬μš©μ— μžˆμ–΄ κ·Έ 차이점이 μ‘΄μž¬ν•œλ‹€. <a> νƒœκ·Έλ₯Ό ν¬ν•¨ν•œ μ„Έ κ°€μ§€μ˜ μ‚¬μš© 방법은 λ‹€μŒκ³Ό 같이 정리할 수 μžˆλ‹€.

  • Link : λ³„λ„μ˜ 둜직이 ν•„μš” μ—†λŠ” νŽ˜μ΄μ§€ λ‚΄ 이동
    ex) ν”„λ‘œν•„ 확인 λ“±
  • this.props.history.push() : 둜직이 ν•„μš”ν•œ νŽ˜μ΄μ§€ λ‚΄ 이동
    ex) 둜그인 λ“±
  • <a> νƒœκ·Έ : μ™ΈλΆ€ 링크둜의 이동
profile
μ΄μœ μ— μ§‘μ°©ν•˜λŠ” ν”„λ‘ νŠΈμ—”λ“œ 개발자 μ§€λ§μƒμž…λ‹ˆλ‹€ 🧐

1개의 λŒ“κΈ€