Search

React

React

Meta(FaceBook)μ—μ„œ κ°œλ°œν•œ JavaScript 기반 UI 개발 라이브러리
ReactλŠ” νŽ˜μ΄μŠ€λΆμ—μ„œ κ°œλ°œν•œ JavaScript 라이브러리둜, μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€λ₯Ό λ§Œλ“€κΈ° μœ„ν•œ λΌμ΄λΈŒλŸ¬λ¦¬μž…λ‹ˆλ‹€. ReactλŠ” μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€μ˜ ꡬ좕과 관리λ₯Ό λ„μ™€μ£ΌλŠ” 선언적이고 효율적인 방법을 μ œκ³΅ν•©λ‹ˆλ‹€. ReactλŠ” 단일 νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜(SPA) 및 λͺ¨λ°”일 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ 특히 λ›°μ–΄λ‚œ μ„±λŠ₯을 보이며, μ»΄ν¬λ„ŒνŠΈ 기반 μ•„ν‚€ν…μ²˜λ₯Ό 기반으둜 ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.
React μ†Œκ°œ

Node.js μ„€μΉ˜ν•˜κΈ° (Windows)

1. winget으둜 Node.js μ„€μΉ˜

React κ°œλ°œν™˜κ²½ μ„€μΉ˜

React μ‹œμž‘ν•˜κΈ°

React ν”„λ‘œμ νŠΈλ₯Ό μ‹œμž‘ν•˜λŠ” 방법

1.
CDN 으둜 μ‹œμž‘ν•˜κΈ°
2.
Node.js 와 npm 으둜 μ‹œμž‘ν•˜κΈ°
React μ‹œμž‘ν•˜κΈ°

React ν”„λ‘œμ νŠΈ 생성

1.
vite 둜 ν”„λ‘œμ νŠΈ
2.
npx 둜 ν”„λ‘œμ νŠΈ
3.
λͺ¨λ“ˆ μ„€μΉ˜
React ν”„λ‘œμ νŠΈ

node_modules λΉ λ₯Έ μ‚­μ œ

β€’
rimraf λͺ¨λ“ˆ μ „μ—­ μ„€μΉ˜
β€’
node_modules μ‚­μ œ λͺ…λ Ή
node_modules μ‚­μ œ

ES7+ React/Redux/React-Native snippets

React Extension

Vite

Vite(ν”„λž‘μŠ€μ–΄λ‘œ λΉ λ₯Έμ΄λΌλŠ” 뜻)λŠ” Evan Youκ°€ λ§Œλ“  λΉ λ₯΄κ³  κ°„λ‹¨ν•œ μ›Ή 개발 λΉŒλ“œ 도ꡬ
ViteλŠ” 주둜 Vue.js μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μœ„ν•œ 개발 ν™˜κ²½μ„ μ œκ³΅ν•˜λŠ”λ° 쀑점을 두고 μžˆμœΌλ‚˜, λ‹€λ₯Έ ν”„λ ˆμž„μ›Œν¬ 및 λΌμ΄λΈŒλŸ¬λ¦¬μ—λ„ μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
Vite & React

JSX

JavaScript + (XML/HTML)
Reactμ—μ„œ μ‚¬μš©λ˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν™•μž₯ λ¬Έλ²•μœΌλ‘œ, XML λ˜λŠ” HTMLκ³Ό μœ μ‚¬ν•œ ꡬ쑰λ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€. JSXλ₯Ό μ‚¬μš©ν•˜λ©΄ React μš”μ†Œλ₯Ό μ’€ 더 κ°„νŽΈν•˜κ²Œ μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” Reactμ—μ„œ UIλ₯Ό ν‘œν˜„ν•˜λŠ” 데에 주둜 μ‚¬μš©λ˜λ©°, μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œ 내에 λ§ˆν¬μ—…μ„ μž‘μ„±ν•  수 있게 ν•΄μ€λ‹ˆλ‹€.
JSX

μ—˜λ¦¬λ¨ΌνŠΈ (Element)

λΈŒλΌμš°μ €μ— 컨텐츠λ₯Ό ν‘œν˜„ν•˜λŠ” ν•˜λ‚˜μ˜ λ‹¨μœ„
μ—˜λ¦¬λ¨ΌνŠΈλŠ” Reactμ—μ„œ μ»΄ν¬λ„ŒνŠΈκ°€ μ‹€μ œλ‘œ λΈŒλΌμš°μ €μ— λ‚˜νƒ€λ‚΄λŠ” λ‚΄μš©μ„ ν‘œν˜„ν•˜λŠ” λ‹¨μœ„μž…λ‹ˆλ‹€. Reactμ—μ„œ μ—˜λ¦¬λ¨ΌνŠΈλŠ” μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€λ₯Ό λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ μ‚¬μš©λ˜λ©°, 각 μ—˜λ¦¬λ¨ΌνŠΈλŠ” 가상 DOM (Virtual DOM)μ—μ„œ μ»΄ν¬λ„ŒνŠΈμ˜ μΈμŠ€ν„΄μŠ€μ— λŒ€μ‘ν•©λ‹ˆλ‹€.
Element

Component

React 의 μž¬μ‚¬μš© κ°€λŠ₯ν•œ UI μš”μ†Œ
μ»΄ν¬λ„ŒνŠΈλŠ” μž¬μ‚¬μš© κ°€λŠ₯ν•œ UI 쑰각으둜, 독립적이며 νŠΉμ • κΈ°λŠ₯을 μˆ˜ν–‰ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. React μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ€ μ»΄ν¬λ„ŒνŠΈμ˜ μ‘°ν•©μœΌλ‘œ κ΅¬μ„±λ˜λ©°, 각 μ»΄ν¬λ„ŒνŠΈλŠ” 자체적으둜 μƒνƒœλ₯Ό κ°€μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ λͺ¨λ“ˆν™”λœ κ΅¬μ‘°λŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ 보닀 효율적으둜 κ΄€λ¦¬ν•˜κ³  μœ μ§€λ³΄μˆ˜ν•˜κΈ° μ‰½κ²Œ λ§Œλ“­λ‹ˆλ‹€.
Component

State (μƒνƒœ)

μ»΄ν¬λ„ŒνŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” 둜컬(λ‚΄λΆ€) 데이터
React μ»΄ν¬λ„ŒνŠΈμ˜ μƒνƒœ(State)λŠ” μ»΄ν¬λ„ŒνŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” 둜컬 λ°μ΄ν„°μž…λ‹ˆλ‹€. μƒνƒœλ₯Ό μ‚¬μš©ν•˜λ©΄ μ»΄ν¬λ„ŒνŠΈκ°€ 동적인 데이터λ₯Ό μ €μž₯ν•˜κ³  ν‘œμ‹œν•  수 있으며, μƒνƒœκ°€ 변경될 λ•Œλ§ˆλ‹€ ReactλŠ” μžλ™μœΌλ‘œ 화면을 λ‹€μ‹œ λ Œλ”λ§ν•©λ‹ˆλ‹€.

State 의 νŠΉμ§•

State

Props (속성)

λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μžμ‹ μ»΄ν¬λ„ŒνŠΈλ‘œ μ „λ‹¬ν•˜κΈ° μœ„ν•œ 데이터 properties 의 μ€„μž„λ§
μ™ΈλΆ€μ—μ„œ μ „λ‹¬λ˜λŠ” λ§€κ°œλ³€μˆ˜. λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μžμ‹ μ»΄ν¬λ„ŒνŠΈλ‘œ 데이터λ₯Ό 전달할 λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€.
이것이 React μ»΄ν¬λ„ŒνŠΈ 간에 정보λ₯Ό μ£Όκ³ λ°›λŠ” μ£Όμš” λ©”μ»€λ‹ˆμ¦˜ 쀑 ν•˜λ‚˜μž…λ‹ˆλ‹€. λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈλŠ” μžμ‹ μ»΄ν¬λ„ŒνŠΈμ—κ²Œ propsλ₯Ό 톡해 데이터λ₯Ό μ „λ‹¬ν•˜κ³ , μžμ‹ μ»΄ν¬λ„ŒνŠΈλŠ” 이λ₯Ό ν™œμš©ν•˜μ—¬ 화면에 정보λ₯Ό ν‘œμ‹œν•˜κ±°λ‚˜ νŠΉμ • λ™μž‘μ„ μˆ˜ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
Props

Lifecycle Methods (생λͺ…μ£ΌκΈ° λ©”μ„œλ“œ)

μ»΄ν¬λ„ŒνŠΈμ˜ 생λͺ…μ£ΌκΈ° λ™μ•ˆ νŠΉμ • μ‹œμ μ— μ‹€ν–‰λ˜λŠ” λ©”μ„œλ“œ

Mounting

λ©”μ†Œλ“œ
μ„€λͺ…
constructor(props)
μ»΄ν¬λ„ŒνŠΈλ₯Ό μ΄ˆκΈ°ν™”ν•˜κ³  초기 μƒνƒœλ₯Ό μ„€μ •ν•©λ‹ˆλ‹€.
getDerivedStateFromProps()
ν”„λ‘­μŠ€μ˜ 변경에 따라 μƒνƒœλ₯Ό μ—…λ°μ΄νŠΈν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€.
render()
ν˜„μž¬ μƒνƒœμ™€ ν”„λ‘­μŠ€μ— κΈ°λ°˜ν•˜μ—¬ μ»΄ν¬λ„ŒνŠΈ UIλ₯Ό λ Œλ”λ§ν•©λ‹ˆλ‹€.
componentDidMount()
μ»΄ν¬λ„ŒνŠΈκ°€ DOM에 마운트된 후에 ν˜ΈμΆœλ©λ‹ˆλ‹€.

Updating

λ©”μ†Œλ“œ
μ„€λͺ…
getDerivedStateFromProps()
ν”„λ‘­μŠ€μ˜ 변경에 따라 μƒνƒœλ₯Ό μ—…λ°μ΄νŠΈν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€.
shouldComponentUpdate()
μ»΄ν¬λ„ŒνŠΈκ°€ λ¦¬λ Œλ”λ§ν•΄μ•Ό ν•˜λŠ”μ§€ μ—¬λΆ€λ₯Ό κ²°μ •ν•©λ‹ˆλ‹€.
render()
ν˜„μž¬ μƒνƒœμ™€ ν”„λ‘­μŠ€μ— κΈ°λ°˜ν•˜μ—¬ μ»΄ν¬λ„ŒνŠΈ UIλ₯Ό λ Œλ”λ§ν•©λ‹ˆλ‹€.
getSnapshotBeforeUpdate()
DOM이 μ—…λ°μ΄νŠΈλ˜κΈ° 전에 정보λ₯Ό μΊ‘μ²˜ν•©λ‹ˆλ‹€.
componentDidUpdate()
μ»΄ν¬λ„ŒνŠΈκ°€ DOMμ—μ„œ μ—…λ°μ΄νŠΈλœ 후에 ν˜ΈμΆœλ©λ‹ˆλ‹€.
Lifecycle

Hook

Hook ( 갈고리 ) : λΎ°μ‘±ν•˜κ³  κ΅¬λΆ€λŸ¬μ§„ λ‚ λ‘œ λ‹€λ₯Έ 물체에 κ±Έμ–΄ μ—°κ²°ν•˜λŠ” 도ꡬ
κ°ˆκ³ λ¦¬λŠ” 물건을 μž‘κ±°λ‚˜ κ±ΈκΈ° μœ„ν•΄ μ‚¬μš©ν•˜λŠ” λ„κ΅¬μž…λ‹ˆλ‹€. hook은 λ¦¬μ•‘νŠΈ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μƒνƒœλ‚˜ 라이프사이클을 μž‘κ±°λ‚˜ κ±Έμ–΄μ„œ μ‚¬μš©ν•  수 μžˆλŠ” λ„κ΅¬λΌλŠ” μ˜λ―Έμ—μ„œ μœ λž˜λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
Hook

Router

React μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ URL을 κ΄€λ¦¬ν•˜λŠ” 라이브러리

μ •μ˜

Router

React Style

React μ—μ„œ μŠ€νƒ€μΌλ§ν•˜λŠ” 방법을 μ•Œμ•„λ΄…λ‹ˆλ‹€.

React μ—μ„œ μŠ€νƒ€μΌλ§ ν•˜λŠ” 방법

β€’
β€’
React Style

Context

λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈμ—μ„œ κ³΅μœ ν•  수 μžˆλŠ” μƒνƒœλ₯Ό μ €μž₯ν•˜λŠ” 방법

Context 의 ν•„μš”μ„±

Context λŠ” λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈμ—μ„œ μƒνƒœλ₯Ό κ³΅μœ ν•˜κΈ° μœ„ν•΄ ν•„μš”ν•©λ‹ˆλ‹€. - μžμ‹ μ»΄ν¬λ„ŒνŠΈμ—μ„œ λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈλ‘œ 데이터 μ „λ‹¬ν•΄μ•Όν•˜λŠ” 경우 - μ»΄ν¬λ„ŒνŠΈ 2계측 μ΄μƒμœΌλ‘œ 데이터λ₯Ό μ „λ‹¬ν•΄μ•Όν•˜λŠ” 경우
Context

Redux

β€’
Redux λž€?
β—¦
Reduce
β—¦
Flux
β€’
Redux μ΄ν•΄ν•˜κΈ°
β€’
Redux κΈ°λ³Έ 원리
Redux

Throttle (μ“°λ‘œν‹€)

Throttleμ΄λž€ νŠΉμ • ν•¨μˆ˜κ°€ 일정 μ‹œκ°„ 내에 μ΅œλŒ€ ν•œ 번만 μ‹€ν–‰λ˜λ„λ‘ μ œν•œν•˜λŠ” 기법
μ΄λ²€νŠΈκ°€ 아무리 많이 λ°œμƒν•΄λ„ μ§€μ •ν•œ delay κ°„κ²©λ§ˆλ‹€ λ”± ν•œ 번만 μ‹€ν–‰λ©λ‹ˆλ‹€.

λΉ„μœ 

Throttle

React Custom Hook (μ»€μŠ€ν…€ ν›…)

1. μ»€μŠ€ν…€ ν›…μ΄λž€?

μ»€μŠ€ν…€ ν›…(Custom Hook)은 React의 λ‚΄μž₯ ν›…(useState, useEffect λ“±)을 μ‘°ν•©ν•˜μ—¬ λ°˜λ³΅λ˜λŠ” μƒνƒœ λ‘œμ§μ„ μž¬μ‚¬μš© κ°€λŠ₯ν•œ ν•¨μˆ˜λ‘œ μΆ”μΆœν•œ κ²ƒμž…λ‹ˆλ‹€.

핡심 κ·œμΉ™

Custom Hook

Vite ν”„λ‘μ‹œ(Proxy) μ„€μ • κ°€μ΄λ“œ

1. ν”„λ‘μ‹œ(Proxy)λž€?

ν”„λ‘μ‹œλŠ” ν΄λΌμ΄μ–ΈνŠΈμ™€ μ„œλ²„ μ‚¬μ΄μ—μ„œ μš”μ²­μ„ μ€‘κ³„ν•˜λŠ” 쀑간 μ„œλ²„μž…λ‹ˆλ‹€.
Proxy