๐Ÿ‘‰ React

ํŽ˜์ด์Šค๋ถ์ด ๋งŒ๋“  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(ํ•˜์ง€๋งŒ Redux๋‚˜ MobX, react-router์™€ ํ•จ๊ป˜ ํ”„๋ ˆ์ž„์›Œํฌ์ฒ˜๋Ÿผ ์‚ฌ์šฉ) Redux ๊ณต๋ถ€ check
Component ์‹œ์Šคํ…œ์„ ๊ตฌํ˜„ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํšจ์œจ์ ์œผ๋กœ ์ฝ”๋”ฉ ๊ฐ€๋Šฅ

๐Ÿ‘‰ Component๋ž€ ํ•˜๋‚˜์˜ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง„ ๋…๋ฆฝ์ ์ธ ๋‹จ์œ„ ๋ชจ๋“ˆ

๐Ÿ‘‰JSX

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ™•์žฅ ๋ฌธ๋ฒ•
1) ๋ฐ˜๋“œ์‹œ ํ•˜๋‚˜์˜ ์—˜๋ฆฌ๋จผํŠธ๋กœ ๊ฐ์‹ธ์•ผ ํ•œ๋‹ค.

        return  (
            <h1> Hello Velopert</h1>
            <h2> Welcome </h2>
        );                // error

        return  (
            <div>
                <h1> Hello Velopert </h1>
                <h2> Welcome </h2>
            </div>
        );                // div element๋ฅผ wrapper๋กœ ์‚ฌ์šฉ

2) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ ์šฉํ•  ๋• { } ์ ์šฉ
3) JSX ๋‚ด๋ถ€์—์„  if๋ฌธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. IIFE or ์‚ผํ•ญ์—ฐ์‚ฐ์ž ์‚ฌ์šฉ

// condition์ด true์ด๋ฉด, ์—ฐ์‚ฐ์ž expr1์˜ ๊ฐ’์„ ๋ฐ˜ํ™˜ 
var age = 29;
var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under 19";
console.log(canDrinkAlcohol); // "True, over 19"

// ์‚ผํ•ญ์—ฐ์‚ฐ์ž
// &&
//์กฐ๊ฑด์ด true์ผ๋•Œ๋งŒ ๋ณด์—ฌ์ง€๊ณ  false์ผ ๊ฒฝ์šฐ์—๋Š” ์•„๋ฌด๊ฒƒ๋„ ๋ณด์—ฌ์ฃผ์ง€ ์•Š๋Š”๋‹ค.
1 + 1 === 2 && '๋งž์Šต๋‹ˆ๋‹ค' // '๋งž์Šต๋‹ˆ๋‹ค' 
1 + 1 === 3 && '๋งž์Šต๋‹ˆ๋‹ค' // false

// ||
// ์กฐ๊ฑด์ด false๋ณด์—ฌ์ง€๊ณ  true ๊ฒฝ์šฐ์—๋Š” ์•„๋ฌด๊ฒƒ๋„ ๋ณด์—ฌ์ฃผ์ง€ ์•Š๋Š”๋‹ค.
1 + 1 === 3 || 'ํ‹€๋ฆฝ๋‹ˆ๋‹ค' // 'ํ‹€๋ฆฝ๋‹ˆ๋‹ค' 
1 + 1 === 2 || 'ํ‹€๋ฆฝ๋‹ˆ๋‹ค' // true

4) className์„ ์‚ฌ์šฉ

๐Ÿ‘‰ Key Concepts

1. Data Flow : ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„, ํ•œ ๋ฐฉํ–ฅ์œผ๋กœ๋งŒ ๋ฐ์ดํ„ฐ ์ด๋™

2. Props

์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ๋‚ด๋ ค์ฃผ๋Š” ๋ฐ์ดํ„ฐ, ๋‹จ์ˆœํžˆ ์‚ฌ์šฉ๋งŒ ๊ฐ€๋Šฅ, ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅ, ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ „๋‹ฌํ•˜๋Š” props๊ฐ€ ๋ฐ”๋€Œ๋ฉด ์ž๋™์œผ๋กœ ์—…๋ฐ์ดํŠธ, props๋Š” html์ฒ˜๋Ÿผ ๊ธฐ๋ณธ์ด ๋ฌธ์ž์—ด์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ์ž๋ฃŒํ˜•์„ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” { } ์•ˆ์— ๋„ฃ์–ด์•ผ ํ•œ๋‹ค.

3. State

์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ฐ–๋Š” ์ƒํƒœ, ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋กœ ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ ๋ณด๊ด€ / ๊ด€๋ฆฌ, Class ์ปดํฌ๋„ŒํŠธ๋กœ ์ž‘์„ฑ, ๊ฐ’์„ ๋ณ€๊ฒฝํ•  ๋• ๋ฐ˜๋“œ์‹œ setState ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉ

4. setState

state๋ฅผ ๋ฐ”๊พธ๋ ค๋ฉด this.state.์ด๋ฆ„ = ๋ฐ”๊ฟ€ ๊ฐ’์ด ์•„๋‹ˆ๋ผ this.setState((์ด์ „ ์ƒํƒœ) => ({ ์ด๋ฆ„: ๋ฐ”๊ฟ€ ๊ฐ’ }));

๐Ÿ‘‰Life Cycle

์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‹คํ–‰๋˜๊ฑฐ๋‚˜ ์—…๋ฐ์ดํŠธ ๋˜๊ฑฐ๋‚˜ ์ œ๊ฑฐ๋  ๋•Œ, ํŠน์ •ํ•œ ์ด๋ฒคํŠธ๋“ค์ด ๋ฐœ์ƒ

โœ” Mount

์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ฒ˜์Œ ์‹คํ–‰๋  ๋•Œ ๊ทธ๊ฒƒ์„ Mount๋ผ๊ณ  ํ‘œํ˜„ํ•œ๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‹œ์ž‘๋˜๋ฉด ์šฐ์„  context, defaultProps์™€ state๋ฅผ ์ €์žฅํ•œ๋‹ค. ๊ทธ ํ›„์— componentWillMount ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  render๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ DOM์— ๋ถ€์ฐฉํ•œ ํ›„ Mount๊ฐ€ ์™„๋ฃŒ๋œ ํ›„ componentDidMount๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค.
์ฃผ์˜ํ•  ์ ์€, componentWillMount์—์„œ๋Š” props๋‚˜ state๋ฅผ ๋ฐ”๊พธ๋ฉด ์•ˆ ๋œ๋‹ค. Mount ์ค‘์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์•„์ง DOM์— renderํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— DOM์—๋„ ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค.
componentDidMount์—์„œ๋Š” DOM์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์—ฌ๊ธฐ์—์„œ๋Š” ์ฃผ๋กœ AJAX ์š”์ฒญ์„ ํ•˜๊ฑฐ๋‚˜, setTimeout, setInterval๊ฐ™์€ ํ–‰๋™์„ ํ•ฉ๋‹ˆ๋‹ค.
๋‹ค์Œ ์ˆœ์„œ๋กœ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.

state, context, defaultProps ์ €์žฅ
componentWillMount
render
componentDidMount

โœ” Props Update

props๊ฐ€ ์—…๋ฐ์ดํŠธ๋  ๋•Œ์˜ ๊ณผ์ •์ด๋‹ค. ์—…๋ฐ์ดํŠธ๋˜๊ธฐ ์ „์— ์—…๋ฐ์ดํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜์˜€์Œ์„ ๊ฐ์ง€ํ•˜๊ณ , componentWillReceiveProps ๋ฉ”์†Œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค. ๊ทธ ํ›„ shouldComponentUpdate, componentWillUpdate๊ฐ€ ์ฐจ๋ก€๋Œ€๋กœ ํ˜ธ์ถœ๋œ ํ›„, ์—…๋ฐ์ดํŠธ๊ฐ€ ์™„๋ฃŒ(render)๋˜๋ฉด componentDidUpdate๊ฐ€ ๋œ๋‹ค. ์ด ๋ฉ”์†Œ๋“œ๋“ค์€ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ ๋ฐ”๋€” props์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. componentDidUpdate๋งŒ ์ด๋ฏธ ์—…๋ฐ์ดํŠธ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ”๋€Œ๊ธฐ ์ด์ „์˜ props์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
shouldcomponentUpdate์—์„œ๋Š” ์•„์ง renderํ•˜๊ธฐ ์ „์ด๊ธฐ ๋•Œ๋ฌธ์— return false๋ฅผ ํ•˜๋ฉด render์„ ์ทจ์†Œํ•  ์ˆ˜ ์žˆ๋‹ค.
componentWillUpdate์—์„œ๋Š” state๋ฅผ ๋ฐ”๊ฟ”์„œ๋Š” ์•ˆ ๋œ๋‹ค. ์•„์ง props๋„ ์—…๋ฐ์ดํŠธํ•˜์ง€ ์•Š์•˜์œผ๋ฏ€๋กœ state๋ฅผ ๋ฐ”๊พธ๋ฉด ๋˜ shouldComponentUpdate๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. componentDidUpdate์—์„œ๋Š” render์ด ์™„๋ฃŒ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— DOM์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

โœ” State Update

setState ํ˜ธ์ถœ์„ ํ†ตํ•ด state๊ฐ€ ์—…๋ฐ์ดํŠธ๋  ๋•Œ์˜ ๊ณผ์ •์ด๋‹ค. props update์™€ ๊ณผ์ •์ด ๊ฐ™์ง€๋งŒ, componentWillReceiveProps ๋ฉ”์†Œ๋“œ๋Š” ํ˜ธ์ถœ๋˜์ง€ ์•Š๋Š”๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฉ”์†Œ๋“œ์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž๋กœ๋Š” ๋ฐ”๋€” state์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. componentDidUpdate๋Š” ๋‘ ๋ฒˆ์งธ ์ธ์ž๋กœ ๋ฐ”๋€Œ๊ธฐ ์ด์ „์˜ state์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

โœ” Unmount

์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ œ๊ฑฐ๋˜๋Š” ๊ฒƒ์€ Unmount๋ผ๊ณ  ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. ๋”๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. componentWillUnmount๊ฐ€ ๊ทธ๊ฒƒ์ž…๋‹ˆ๋‹ค. componentDidUnmount๋Š” ์—†์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ ์ œ๊ฑฐ๋œ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜๋Š” ์—†๊ฒ ์ฃ ? componentWillMount์—์„œ ์ฃผ๋กœ ์—ฐ๊ฒฐํ–ˆ๋˜ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ๋“ฑ์˜ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์ •๋ฆฌ ํ™œ๋™์„ ํ•ฉ๋‹ˆ๋‹ค.

componentWillUnmount