์ปดํฌ๋„ŒํŠธ, ๋‹ค์‹œ ์ƒ๊ฐํ•˜๊ธฐ

React ์ปดํฌ๋„ŒํŠธ์˜ ์˜์กด์„ฑ: ?  
React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด ?๊ฐ€ ํ•„์š”ํ•˜๋‹ค.
  1. ๊ธฐ๋Šฅ์ Type ๋ถ„๋ฅ˜: props, hooks
  2. ํŠน์ง•์ Feature ๋ถ„๋ฅ˜: ์Šคํƒ€์ผ, ๋กœ์ง, ์ „์—ญ์ƒํƒœ, ๋ฆฌ๋ชจํŠธ ๋ฐ์ดํ„ฐ ์Šคํ‚ค๋งˆ

๋ฆฌ๋ชจํŠธ ๋ฐ์ดํ„ฐ ์Šคํ‚ค๋งˆ ?
API ์„œ๋ฒ„์—์„œ ๋‚ด๋ ค์ฃผ๋Š” ๋ฐ์ดํ„ฐ์˜ ๋ชจ์–‘

ํ•จ๊ป˜ ๋‘๊ธฐ (Co-locate)

๋น„์Šทํ•œ ๊ด€์‹ฌ์‚ฌ๋ผ๋ฉด ๊ฐ€๊นŒ์šด ๊ณณ ํ•จ๊ป˜ ๋‘๊ธฐ
img.png

import React from 'react'

import styled from '@emotion/styled'

const Something: React.FC = () => {
  const { ... } = useHooksForSomething()
  
  return <Container>Hello, World</Container>
}

// ๋กœ์ง(Custom Hooks)
function useHooksForSomething() {
  // ...
}

// ์Šคํƒ€์ผ(CSS-in-JS)
const Container = styled.div`
  background-color: red;
`

id ๊ฐ’๋งŒ Props๋กœ ์ „๋‹ฌ๋ฐ›์•„ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ์˜์กด์„ฑ ์ค„์ด๊ธฐ

import { IArticle } from '~/api'

interface Props {
  article: IArticle
}
const Something: React.ExoticComponent<Props> = (props) => {
  return (
    <div>
      <h1>{props.article.title}</h1>
    </div>
  )
}
import { useArticle } from '~/store'

interface Props {
  articleId: string
}
const Something: React.ExoticComponent<Props> = (props) => {
  return (
    <div>
      <h1>{article.title}</h1>
    </div>
  )
}

๋ฐ์ดํ„ฐ๋ฅผ ID ๊ธฐ๋ฐ˜์œผ๋กœ ์ •๋ฆฌํ•˜๊ธฐ

๋ฐ์ดํ„ฐ ์ •๊ทœํ™”(Nomalization)

{
  entities: {
    articles: {
      '123': {
        id: '123',
        author: '1',
        title: 'blog post',
        comments: ['325']
      }
    }
  }
}

๋ฐ์ดํ„ฐ ์ •๊ทœํ™”๋Š” normalizr ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•ด ์‰ฝ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.

์™œ ๋‚˜๋Š” React๋ฅผ ์‚ฌ๋ž‘ํ•˜๋Š”๊ฐ€

๋ฐœํ‘œ์ž

์•ˆํฌ์ข…๋‹˜ | ํ”Œ๋ ‰์ŠคํŒ€

์™œ ๋‚˜๋Š” ๋„ ์‚ฌ๋ž‘ํ•˜๋Š”๊ฐ€

  • ํด๋ฆฌ์–ดํ•œ ๋ฉ˜ํƒˆ ๋ชจ๋ธ, ์ž‘๊ณ  ๋‹จ๋‹จํ•œ ์ฝ”์–ด
    • Learn Once, Write AnyWhere (ํ•œ๋ฒˆ ๋ฐฐ์šฐ๋ฉด ์—ฌ๋Ÿฌ ํ™˜๊ฒฝ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์˜๋ฏธ)
  • ๊พธ์ค€ํžˆ ์„ฑ์žฅํ•˜๋Š” ๊ฑฐ๋Œ€ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ
  • ๋„์ „์ ์ธ ๊ณผ์ œ, ์šฐ์•„ํ•œ ํ•ด๊ฒฐ์ฑ…
    • Fiber, Hooks, Suspense, โ€ฆ

React๋Š” UI ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ด๋‹ค?

ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ๋ฆฌ์•กํŠธ
๊ฐ’ React Element
ํ•จ์ˆ˜ React Component
try-catch Error Boundary
์ •์  ํƒ€์ž… ์ฒดํฌ prop-types
์—”์ง„ Reconciler
์–ด์…ˆ๋ธ” ํ˜ธ์ŠคํŠธ ํ™˜๊ฒฝ

Reconciler ?
๋ชจ๋“  ๋ Œ๋”๋Ÿฌ์™€ ๊ณต์œ ๋˜๋Š” ๋‚ด์šฉ์œผ๋กœ React ์ฝ”๋“œ๋ฅผ ํ•ด์„ํ•˜๊ณ  ์‹คํ–‰ํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

react VS react-dom

import React from 'react';
import ReactDOM from 'react-dom';

react์™€ react-dom์ด ๋‚˜๋ˆ„์–ด์ ธ ์žˆ๋Š” ๊ฒƒ๋„ react๋Š” ๋ชจ๋“  ๋ Œ๋”๋Ÿฌ์™€ ๊ณต์œ ๋˜๋Š” ๊ฒƒ๋“ค์„ ํฌํ•จํ•˜๊ณ  ์žˆ๊ณ , react-dom์€ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ(DOM)์„ ์œ„ํ•œ ๊ฒƒ๋“ค์ด ํฌํ•จ๋˜์–ด ์žˆ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ์ž‘์„ฑํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”๊ฐ€?

img_1.png
์šฐ๋ฆฌ๊ฐ€ ์ž‘์„ฑํ•˜๋Š” ์†Œ์Šค์ฝ”๋“œ๋Š” V8์ด๋ผ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์„ ํ†ตํ•ด CPU๊ฐ€ ํ•ด์„ํ•  ์ˆ˜ ์žˆ๋Š” ์–ด์…ˆ๋ธ”๋ฆฌ์–ด๋กœ ๋ณ€ํ™˜๋œ๋‹ค.

V8 ์—”์ง„?
ํฌ๋กฌ, node.js์— ๋‚ด์žฅ๋˜์–ด ์žˆ๋Š” ์—”์ง„์ด๋‹ค.

React์˜ ํ™˜์›

๋ฌธ์ œ ํ™˜์›๋œ ๋ฌธ์ œ ๋‹ต์•ˆ์ง€ ๊ฒฐ๊ณผ๋ฌผ
ํŠน์ • ํŠธ๋ฆฌ์˜ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ณต์œ ํ•˜๋Š” ๊ฐ’์„ ์ •์˜ํ•  ์ˆ˜๋‹จ ์ฐธ์กฐํ•˜๋Š” ์‹œ์ ์— ๋‘˜๋Ÿฌ์‹ผ ํ™˜๊ฒฝ์„ ๊ธฐ์ค€์œผ๋กœ ํ‰๊ฐ€๋˜๋Š” ๊ฐ’ ๋™์  ์Šค์ฝ”ํ•‘ Context
์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ ํ™˜๊ฒฝ ๋‚ด ๋ Œ๋”๋ง์ด ๋А๋ฆฐ ์ปดํฌ๋„ŒํŠธ๊ฐ€ UI ๋ฐ˜์‘์„ฑ์„ ์ €ํ•ดํ•˜๋Š” ์ƒํ™ฉ ๋ฐฉ์ง€ ํ•˜๋‚˜์˜ ์‹คํ–‰ ์ฃผ์ฒด๋กœ ์„œ๋กœ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋‹ค๋ฅธ ์—ฌ๋Ÿฌ ์ž‘์—…์ด ๋™์‹œ์— ์‹คํ–‰๋˜๋Š” ๋“ฏ ๋ณด์ด๊ฒŒ ํ•˜๊ธฐ ์šด์˜์ฒด์ œ์˜ ์Šค์ผ€์ค„๋ง, ๋น„์„ ์ ํ˜• ์Šค์ผ€์ค„๋ฆฌ์˜ Fiber Fiber Reconciler
ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์˜ ์ œ์•ฝ ์ œ๊ฑฐ, ์ƒํƒœ ๋กœ์ง์˜ ์‘์ง‘์„ฑ, ์žฌ์‚ฌ์šฉ์„ฑ ์ฆ๋Œ€ ํŠน์ • โ€˜ํšจ๊ณผโ€™(์ƒํƒœ, ๋ผ์ดํ”„์‚ฌ์ดํด, ๋น„๋™๊ธฐ)๋ฅผ React๊ฐ€ ์ œ๊ณตํ•œ ํ•ธ๋“ค๋Ÿฌ์— ์œ„์ž„ํ•  ์ˆ˜๋‹จ ๋Œ€์ˆ˜์  ํšจ๊ณผ Hooks
๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ ์ˆ˜์ง‘ ๊ณผ์ •์˜ ์„ ์–ธ์  ์ฒ˜๋ฆฌ Suspense

๋งˆ์น˜๋ฉฐ

์ง€๋‚œ๋ฒˆ์— ๋ดค๋˜ FEConf ๊ฐ•์˜ ์ค‘ ์ข‹์•˜๋˜ ๊ฐ•์˜๋ฅผ ์ •๋ฆฌํ•ด๋ณด์•˜๋Š”๋ฐ ์—ญ์‹œ ์–ด๋ ต๋‹ค. ์ด๋Ÿฐ ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ์˜ ๊ธฐ์ค€์€ ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ๋งŽ์ด ๊ฒฝํ—˜ํ•ด๋ณด๊ณ  ์ง์ ‘ ๋ถ„๋ฆฌํ•˜๋Š” ๊ณผ์ •๋„ ๋งŽ์ด ๊ฒช์–ด๋ด์•ผ ๋” ์™€๋‹ฟ์„ ๊ฒƒ ๊ฐ™๋‹ค.

Refer

https://www.youtube.com/watch?v=HYgKBvLr49c