본문으둜 κ±΄λ„ˆλ›°κΈ°

πŸ‘‰ React 19

whats-new-in-react-19

Server Component (RSC)​

react server component의 이해

μž₯점​

  • 초기 νŽ˜μ΄μ§€ λ‘œλ“œ μ‹œκ°„: μ„œλ²„μ—μ„œ componentλ₯Ό λ Œλ”λ§ν•˜μ—¬ ν΄λΌμ΄μ–ΈνŠΈλ‘œ μ „μ†‘λ˜λŠ” JavaScript 양을 쀄여 초기 λ‘œλ“œκ°€ 더 빨라진닀. λ˜ν•œ νŽ˜μ΄μ§€κ°€ ν΄λΌμ΄μ–ΈνŠΈλ‘œ μ „μ†‘λ˜κΈ° 전에 μ„œλ²„μ—μ„œ 데이터 쿼리가 μ‹œμž‘λ˜λ„λ‘ ν•œλ‹€.
  • Code portability(μ½”λ“œ 이식성): server componentλ₯Ό μ‚¬μš©ν•˜λ©΄ κ°œλ°œμžκ°€ μ„œλ²„μ™€ ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ λͺ¨λ‘ 싀행될 수 μžˆλŠ” ꡬ성 μš”μ†Œλ₯Ό μž‘μ„±ν•  수 μžˆμœΌλ―€λ‘œ 쀑볡이 쀄어듀고 μœ μ§€ 관리가 κ°œμ„ λ˜λ©° μ½”λ“œλ² μ΄μŠ€ μ „μ²΄μ—μ„œ 논리λ₯Ό 더 μ‰½κ²Œ κ³΅μœ ν•  수 μžˆλ‹€.
  • SEO. ꡬ성 μš”μ†Œμ˜ μ„œλ²„ μΈ‘ λ Œλ”λ§μ„ 톡해 검색 엔진과 LLM이 μ½˜ν…μΈ λ₯Ό 보닀 효과적으둜 ν¬λ‘€λ§ν•˜κ³  색인화할 수 μžˆμ–΄ 검색 엔진 μ΅œμ ν™”κ°€ ν–₯상.
  • 둜컬 파일 μ‹œμŠ€ν…œμ— μ ‘κ·Όν•  수 있으며 데이터 κ°€μ Έμ˜€κΈ° 및 λ„€νŠΈμ›Œν¬ μš”μ²­μ— λŒ€ν•œ 짧은 지연 μ‹œκ°„μ„ κ²½ν—˜ν•  수 있음. (μ„œλ²„ λ¦¬μ†ŒμŠ€μ— μ ‘κ·Όν•  수 있음)
  • μ„œλ²„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ import λ˜λŠ” λͺ¨λ“  ν΄λΌμ΄μ–ΈνŠΈ μ»΄ν¬λ„ŒνŠΈλ₯Ό code splitting 포인트둜 κ°„μ£Όν•˜κΈ° λ•Œλ¬Έμ— 더 이상 React.lazy둜 메뉴얼 ν•˜κ²Œ λͺ…μ‹œν•˜μ§€ μ•Šμ•„λ„ λœλ‹€.
  • λ―Όκ°ν•œ μ„œλ²„ μžμ›μ˜ 데이터λ₯Ό μ•ˆμ „ν•˜κ²Œ μ‚¬μš©ν•  수 μžˆλ‹€.

μ„œλ²„ μ»΄ν¬λ„ŒνŠΈμ™€ μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§μ˜ 차이​

  • μ„œλ²„ μ»΄ν¬λ„ŒνŠΈμ˜ μ½”λ“œλŠ” ν΄λΌμ΄μ–ΈνŠΈλ‘œ μ „λ‹¬λ˜μ§€ μ•ŠμŒ. μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§μ˜ λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈμ˜ μ½”λ“œλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ λ²ˆλ“€μ— ν¬ν•¨λ˜μ–΄ ν΄λΌμ΄μ–ΈνŠΈλ‘œ μ „μ†‘λœλ‹€.
  • μ„œλ²„ μ»΄ν¬λ„ŒνŠΈλŠ” ν΄λΌμ΄μ–ΈνŠΈ μƒνƒœλ₯Ό μœ μ§€ν•˜λ©° refetch 될 수 있음. μ„œλ²„ μ»΄ν¬λ„ŒνŠΈλŠ” HTML이 μ•„λ‹Œ νŠΉλ³„ν•œ ν˜•νƒœλ‘œ μ»΄ν¬λ„ŒνŠΈλ₯Ό μ „λ‹¬ν•˜κΈ° λ•Œλ¬Έμ— ν•„μš”ν•œ 경우 포컀슀, 인풋 μž…λ ₯κ°’ 같은 ν΄λΌμ΄μ–ΈνŠΈ μƒνƒœλ₯Ό μœ μ§€ν•˜λ©° μ—¬λŸ¬ 번 데이터λ₯Ό κ°€μ Έμ˜€κ³  λ¦¬λ Œλ”λ§ν•˜μ—¬ 전달할 수 있음. ν•˜μ§€λ§Œ SSR의 경우 HTML둜 μ „λ‹¬λ˜κΈ° λ•Œλ¬Έμ— μƒˆλ‘œμš΄ refetchκ°€ ν•„μš”ν•œ 경우 HTML 전체λ₯Ό λ¦¬λ Œλ”λ§ ν•΄μ•Ό ν•˜λ©° 이둜 인해 ν΄λΌμ΄μ–ΈνŠΈ μƒνƒœλ₯Ό μœ μ§€ν•  수 μ—†μŒ.

μ œν•œμ‚¬ν•­β€‹

  • μ„œλ²„ ꡬ성 μš”μ†ŒλŠ” 이벀트 ν•Έλ“€λŸ¬λ₯Ό λ“±λ‘ν•˜κ³  ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ νŠΈλ¦¬κ±°ν•΄μ•Ό ν•˜λ―€λ‘œ μƒν˜Έ μž‘μš©μ„ 지원할 수 μ—†μŒ.
    • 예λ₯Ό λ“€μ–΄, 이벀트 ν•Έλ“€λŸ¬λŠ” onClick ν΄λΌμ΄μ–ΈνŠΈ ꡬ성 μš”μ†Œμ—μ„œλ§Œ μ •μ˜ν•  수 있음.
  • μ„œλ²„ κ΅¬μ„±μš”μ†ŒλŠ” λŒ€λΆ€λΆ„μ˜ Hooksλ₯Ό μ‚¬μš©ν•  수 μ—†μŒ.
    • μ„œλ²„ ꡬ성 μš”μ†ŒλŠ” λ Œλ”λ§ ν›„ λ©”λͺ¨λ¦¬μ— μœ μ§€λ˜μ§€ μ•ŠμœΌλ©° 자체 μƒνƒœλ₯Ό κ°€μ§ˆ 수 μ—†μŒ.
  • μ„œλ²„ ꡬ성 μš”μ†Œμ—μ„œ ν΄λΌμ΄μ–ΈνŠΈ ꡬ성 μš”μ†Œλ‘œ μ „λ‹¬λ˜λŠ” Prop 값은 직렬화 κ°€λŠ₯ν•΄μ•Ό ν•œλ‹€.
    • jsonν˜•νƒœλ‘œ 직렬화 κ°€λŠ₯ν•œ ν•­λͺ©λ“€