FEConf 2021
์ปดํฌ๋ํธ, ๋ค์ ์๊ฐํ๊ธฐ
React ์ปดํฌ๋ํธ์ ์์กด์ฑ: ?
React ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค๋ ค๋ฉด ?๊ฐ ํ์ํ๋ค.- ๊ธฐ๋ฅ์ Type ๋ถ๋ฅ: props, hooks
- ํน์ง์ Feature ๋ถ๋ฅ: ์คํ์ผ, ๋ก์ง, ์ ์ญ์ํ, ๋ฆฌ๋ชจํธ ๋ฐ์ดํฐ ์คํค๋ง
๋ฆฌ๋ชจํธ ๋ฐ์ดํฐ ์คํค๋ง ?
API ์๋ฒ์์ ๋ด๋ ค์ฃผ๋ ๋ฐ์ดํฐ์ ๋ชจ์
ํจ๊ป ๋๊ธฐ (Co-locate)
๋น์ทํ ๊ด์ฌ์ฌ๋ผ๋ฉด ๊ฐ๊น์ด ๊ณณ ํจ๊ป ๋๊ธฐ
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)์ ์ํ ๊ฒ๋ค์ด ํฌํจ๋์ด ์๋ค.
์ฐ๋ฆฌ๊ฐ ์์ฑํ๋ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ด๋ป๊ฒ ๋์ํ๋๊ฐ?
์ฐ๋ฆฌ๊ฐ ์์ฑํ๋ ์์ค์ฝ๋๋ V8์ด๋ผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ํตํด CPU๊ฐ ํด์ํ ์ ์๋ ์ด์
๋ธ๋ฆฌ์ด๋ก ๋ณํ๋๋ค.
V8 ์์ง?
ํฌ๋กฌ, node.js์ ๋ด์ฅ๋์ด ์๋ ์์ง์ด๋ค.
React์ ํ์
| ๋ฌธ์ | ํ์๋ ๋ฌธ์ | ๋ต์์ง | ๊ฒฐ๊ณผ๋ฌผ |
|---|---|---|---|
| ํน์ ํธ๋ฆฌ์ ๋ชจ๋ ์ปดํฌ๋ํธ๊ฐ ๊ณต์ ํ๋ ๊ฐ์ ์ ์ํ ์๋จ | ์ฐธ์กฐํ๋ ์์ ์ ๋๋ฌ์ผ ํ๊ฒฝ์ ๊ธฐ์ค์ผ๋ก ํ๊ฐ๋๋ ๊ฐ | ๋์ ์ค์ฝํ | Context |
| ์ฑ๊ธ ์ค๋ ๋ ํ๊ฒฝ ๋ด ๋ ๋๋ง์ด ๋๋ฆฐ ์ปดํฌ๋ํธ๊ฐ UI ๋ฐ์์ฑ์ ์ ํดํ๋ ์ํฉ ๋ฐฉ์ง | ํ๋์ ์คํ ์ฃผ์ฒด๋ก ์๋ก ์ฐ์ ์์๊ฐ ๋ค๋ฅธ ์ฌ๋ฌ ์์ ์ด ๋์์ ์คํ๋๋ ๋ฏ ๋ณด์ด๊ฒ ํ๊ธฐ | ์ด์์ฒด์ ์ ์ค์ผ์ค๋ง, ๋น์ ์ ํ ์ค์ผ์ค๋ฆฌ์ Fiber | Fiber Reconciler |
| ํจ์ ์ปดํฌ๋ํธ์ ์ ์ฝ ์ ๊ฑฐ, ์ํ ๋ก์ง์ ์์ง์ฑ, ์ฌ์ฌ์ฉ์ฑ ์ฆ๋ | ํน์ โํจ๊ณผโ(์ํ, ๋ผ์ดํ์ฌ์ดํด, ๋น๋๊ธฐ)๋ฅผ React๊ฐ ์ ๊ณตํ ํธ๋ค๋ฌ์ ์์ํ ์๋จ | ๋์์ ํจ๊ณผ | Hooks |
| ๋น๋๊ธฐ ๋ฐ์ดํฐ ์์ง ๊ณผ์ ์ ์ ์ธ์ ์ฒ๋ฆฌ | Suspense |
๋ง์น๋ฉฐ
์ง๋๋ฒ์ ๋ดค๋ FEConf ๊ฐ์ ์ค ์ข์๋ ๊ฐ์๋ฅผ ์ ๋ฆฌํด๋ณด์๋๋ฐ ์ญ์ ์ด๋ ต๋ค. ์ด๋ฐ ์ปดํฌ๋ํธ ๋ถ๋ฆฌ์ ๊ธฐ์ค์ ํ๋ก์ ํธ๋ง๋ค ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ๋ง์ด ๊ฒฝํํด๋ณด๊ณ ์ง์ ๋ถ๋ฆฌํ๋ ๊ณผ์ ๋ ๋ง์ด ๊ฒช์ด๋ด์ผ ๋ ์๋ฟ์ ๊ฒ ๊ฐ๋ค.