ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ํ”„๋กœ์ ํŠธ TIL (1) - [์กฐ๊ฑด๋ถ€๋ Œ๋”๋ง & Hooks ์ตœ์ ํ™”]
    ํ”„๋กœ์ ํŠธ ๋ฆฌ๋ทฐ/Book-Square 2020. 9. 11. 14:33

     

    ์˜ค๋Š˜ ํ•œ ์ผ ๐Ÿ˜œ

     

    ์˜ค๋Š˜์€ ๋‚ด ์„œ์žฌ ํŽ˜์ด์ง€์— ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋‹ค๋ฅธ UI๋ฅผ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋Š” ํ™”๋ฉด์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

    ์‚ผํ•ญ ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์กฐ๊ฑด์„ ๋ถ„๋ฆฌํ–ˆ๋Š”๋ฐ ๊ฐ€๋…์„ฑ๋„ ์ข‹์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™๊ณ  ์ด๋Ÿฌํ•œ ์กฐ๊ฑด์ด ๋งŽ์•„์ง€๊ฒŒ ๋œ๋‹ค๋ฉด ๋ Œ๋”๋ง ๋  ๋•Œ์— UI๊ฐ€ ๋งค๋„๋Ÿฝ๊ฒŒ ๋ณด์—ฌ์ง€์ง€ ์•Š์„ ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์„ ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

     

     

    ๋จผ์ € ์‚ผํ•ญ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

     

     

    ์œ„์˜ ์ฝ”๋“œ๋ฅผ ์ˆ˜๋„์ฝ”๋“œ์™€ if/else ์ฝ”๋“œ๋กœ ์ž‘์„ฑํ•ด๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

     

     


     

    1. ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธ์„ ํ•œ ์ƒํƒœ์ด๊ณ  ๋‚ด ์„œ์žฌ์— ๋“ฑ๋กํ•œ ์ฑ…์ด ์žˆ์„ ๊ฒฝ์šฐ

    2. ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธ์„ ํ•œ ์ƒํƒœ์ด๊ณ  ๋‚ด ์„œ์žฌ์— ๋“ฑ๋กํ•œ ์ฑ…์ด ์—†๋Š” ๊ฒฝ์šฐ

    3. ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธ์„ ํ•˜์ง€ ์•Š์€ ์ƒํƒœ์ธ ๊ฒฝ์šฐ

     

    if(loggedUserCheck && myLibraryBookLists) {
    	// ...
    }else if(loggedUser && !myLibraryBookLists) {
    	// ...
    }else if(!loggedUser) {
    	// ...
    }

     


     

     

    ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‚˜๋Š” ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ ์ฝ”๋“œ๋Š” ๋‚˜๋งŒ ์•Œ์•„๋ณด๊ธฐ ์œ„ํ•ด ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋…์„ฑ์„ ๊ณ ๋ คํ•˜์ง€ ์•Š์„ ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ์€ ์กฐ๊ฑด์ด 3๊ฐ€์ง€๋ผ์„œ ๋ณต์žกํ•ด๋ณด์ด์ง€๋Š” ์•Š์ง€๋งŒ ์•ž์œผ๋กœ ๋” ์ถ”๊ฐ€๋ ์ง€๋„ ๋ชจ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ฒ˜์Œ๋ถ€ํ„ฐ ๊ฐ€๋…์„ฑ์„ ์ƒ๊ฐํ•˜๊ณ  ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

     

    ์ฐธ๊ณ  ๋ ˆํผ๋Ÿฐ์Šค

    https://stackoverflow.com/questions/58137667/if-else-statement-in-react-jsx

    https://stackoverflow.com/questions/53038034/conditional-rendering-for-more-for-more-then-one-condition-in-react

     

     

     

    stackOverFlow์—์„œ ๊ฒ€์ƒ‰ํ•œ ์œ„์˜ ์ž๋ฃŒ๋“ค์„ ์ฐธ๊ณ ํ•˜์—ฌ ๋‹ค์‹œ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

     

     

    renderOrDetails๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ํ•˜๋‚˜ ์„ ์–ธํ•˜๊ณ  return๋ฌธ ์•ˆ์—์„œ ๋ Œ๋”๋ง ๋  ๋•Œ์— ์ค‘๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œ์ผœ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

    ๊ตฌ๊ธ€๋ง์„ ํ•˜๋ฉด ์ด๋ ‡๊ฒŒ ๋ณต์žกํ•œ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ๋”ฐ๋กœ ํ•จ์ˆ˜๋กœ ๋นผ๋Š” ์ด์œ ๊ฐ€ ํ™•์žฅ์„ฑ / ๊ฐ€๋…์„ฑ / ์œ ์ง€ ๋ณด์ˆ˜์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์–ด์„œ ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ํ•˜๋Š”๋ฐ ์•„์ง๊นŒ์ง€๋Š” ํฌ๊ฒŒ ์™€๋‹ฟ์ง€๋Š” ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

     

     

    ๋” ๋‚˜์•„๊ฐ€๋ฉฐ (ํ•จ์ˆ˜์˜ ์ตœ์ ํ™”)

     

    renderOrDetails ํ•จ์ˆ˜์˜ ์ตœ์ ํ™”๋ฅผ ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์ข‹์„์ง€์— ๋Œ€ํ•ด ๊ณ ๋ฏผํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

     

    React๊ฐ€ ๋ Œ๋”๋ง์„ ์‹คํ–‰ํ•˜๋Š” ๊ณผ์ •

    1. Props๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋•Œ
    2. State๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋•Œ
    3. ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง๋˜์—ˆ์„ ๋•Œ
    4. shouldComponentUpdate์—์„œ true๊ฐ€ ๋ฐ˜ํ™˜๋  ๋•Œ
    5. forceUpdate๊ฐ€ ์‹คํ–‰๋  ๋•Œ

     

    1๋ฒˆ๊ณผ 2๋ฒˆ์˜ ๊ฒฝ์šฐ ๋ฆฌ์•กํŠธ๋Š” ์–•์€ ๋น„๊ต๋ฅผ ํ†ตํ•ด ์ƒˆ๋กœ์šด ๊ฐ’์ธ์ง€ ์•„๋‹Œ์ง€๋ฅผ ํŒ๋‹จํ•œ ํ›„ ์ƒˆ๋กœ์šด ๊ฐ’์ธ ๊ฒฝ์šฐ ๋ฆฌ๋ Œ๋”๋ง์„ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

    ๋”ฐ๋ผ์„œ ์›์‹œ ๊ฐ’๋“ค์€ ์„œ๋กœ ๋‹ค๋ฅธ ์ฐธ์กฐ ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด๋„ ๋น„๊ตํ•จ์— ์žˆ์–ด ๋ฌธ์ œ๊ฐ€ ์—†์ง€๋งŒ ๊ฐ์ฒด, ๋ฐฐ์—ด, ํ•จ์ˆ˜์™€ ๊ฐ™์€ ๊ฐ์ฒด๋“ค์€ ๊ฐ™์€ ์ฐธ์กฐ ๊ฐ’์ด ์•„๋‹ˆ๋ผ๋ฉด ์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ํŒ๋‹จํ•ฉ๋‹ˆ๋‹ค.

     

    ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ state ๋ณ€๊ฒฝ -> ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋˜๋ฉด์„œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์— ๋„˜๊ฒจ์ฃผ๋Š” props๊ฐ€ ์ƒˆ๋กญ๊ฒŒ ์ƒ์„ฑ -> props์— ์ฐธ์กฐ ํƒ€์ž…์ด ์žˆ๋‹ค๋ฉด ๋™์ผํ•œ ๊ฐ’์ด๋ผ๋„ ๋™์ผ ์ฐธ์กฐ ๊ฐ’์ด ์•„๋‹ˆ๋ฏ€๋กœ ์–•์€ ๋น„๊ต๋ฅผ ํ†ตํ•ด ์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ํŒ๋‹จํ•˜์—ฌ ๋ฆฌ๋ Œ๋”๋ง์„ ์ผ์œผํ‚ด 

     

     

    ์œ„์™€ ๊ฐ™์€ ์ƒํ™ฉ์—์„œ ๋ถˆํ•„์š”ํ•œ ๋ Œ๋”๋ง์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ ์ค‘์— useCallback, React.memo ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

     


    Hooks์—์„œ ์ตœ์ ํ™”ํ•˜๊ธฐ

     

    useMemo(callback, [๋ณ€๊ฒฝ๋˜๋Š” ๊ฐ’]);

    • ๋‘ ๋ฒˆ์งธ ๋ฐฐ์—ด์ด ๋ฐ”๋€Œ๊ธฐ ์ „๊นŒ์ง€ ๊ฐ’์„ ๊ธฐ์–ต
    • ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋Š” ๋งค๋ฒˆ ํ•จ์ˆ˜๊ฐ€ ์ƒˆ๋กœ ๋ Œ๋”๋ง๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ•œ๋ฒˆ๋งŒ ์‹คํ–‰๋˜๋ฉด ๋˜๋Š” ํ•จ์ˆ˜๋„ ๊ณ„์† ํ˜ธ์ถœ๋˜๋Š” ๋ฌธ์ œ ๋ฐœ์ƒ
    • ๋ณ€๊ฒฝ๋˜๋Š” ๊ฐ’์ด ์—†๋‹ค๋ฉด ํ•œ๋ฒˆ๋งŒ ์‹คํ–‰ ํ›„ ๊ฐ’์„ ๋ณด๊ด€ํ•˜๋Š” ์—ญํ• ๋กœ ์‚ฌ์šฉ๊ฐ€๋Šฅ

     

    useRef()์™€ useMemo์˜ ์ฐจ์ด์ 

    • useRef : Dom๊ฐ์ฒด ์ฒ˜๋Ÿผ ํŠน์ •ํ•œ ๊ฐ’๋งŒ ๊ธฐ์–ตํ•ด์•ผํ•  ๋•Œ
    • useMemo : ํ•จ์ˆ˜์˜ return๊ฐ’์„ ๊ธฐ์–ตํ•ด์•ผ ํ•  ๋•Œ

     

    useCallback(callback, [๋ณ€๊ฒฝ๋˜๋Š” ๊ฐ’]);

    • ๋‘ ๋ฒˆ์งธ ๋ฐฐ์—ด์ด ๋ฐ”๋€Œ๊ธฐ ์ „๊นŒ์ง€ ํ•จ์ˆ˜ ์ž์ฒด๋ฅผ ๊ธฐ์–ต
    • ํ•จ์ˆ˜ ์ƒ์„ฑ ์ž์ฒด๊ฐ€ ์˜ค๋ž˜๊ฑธ๋ฆฌ๋Š” ๊ฒฝ์šฐ๋‚˜ ๋ณต์žกํ•œ ๋กœ์ง์˜ ํ•จ์ˆ˜์— ์‚ฌ์šฉํ•˜๋ฉด ์ตœ์ ํ™” ๊ฐ€๋Šฅ
    • ๋ณ€๊ฒฝ๋˜๋Š” ๊ฐ’์ด ์—†๋‹ค๋ฉด state๊ฐ’์„ ๋งจ ์ฒ˜์Œ ๊ฐ’๋งŒ ๊ธฐ์–ต
    • ๋ณ€๊ฒฝ๋˜๋Š” ๊ฐ’์ด ์žˆ์„ ๋•Œ ์ƒˆ๋กœ์šด ๊ฐ’์„ ๊ธฐ์–ตํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— ํ•จ์ˆ˜๋ฅผ Props๋กœ ๋‚ด๋ฆด ๋•Œ๋Š” useCallback์„ ๋ฐ˜๋“œ์‹œ ์‚ฌ์šฉ (์ž์‹ ๋ฆฌ๋ Œ๋”๋ง ๋ฐฉ์ง€)

     

    useMemo์™€ useCallback์˜ ์ฐจ์ด์ 

    • useMemo : ํ•จ์ˆ˜์˜ return ๊ฐ’์„ ๊ธฐ์–ต
    • useCallback : ํ•จ์ˆ˜์˜ reference๋ฅผ ๊ธฐ์–ต

     

    ์œ„์—์„œ ์•Œ์•„๋ณธ ์ตœ์ ํ™” ๋ฐฉ๋ฒ• ์ค‘์— ์ œ๊ฐ€ ์ž‘์„ฑํ•œ renderOrDetails ํ•จ์ˆ˜์—์„œ๋Š” useMemo๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๋Š” ํŒ๋‹จ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค.

     

    useMemo ์ ์šฉ ์ฝ”๋“œ

     

    ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์˜ ๊ฐ€๋…์„ฑ๊ณผ ํ™•์ƒ์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ์กฐ๊ธˆ ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์„ ํƒํ•˜๊ธฐ ์œ„ํ•ด ๊ตฌ๊ธ€๋ง์„ ํ•˜๋ฉด์„œ ์ตœ์ ํ™”๊นŒ์ง€ ์‹ ๊ฒฝ์“ธ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์–ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉด์„œ ์ข‹์€ ๊ณต๋ถ€๊ฐ€ ๋˜์—ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

     

    ์•„์ง ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์—๋Š” ์ตœ์ ํ™”๋ฅผ ์ง„ํ–‰ํ•˜์ง€ ์•Š์•˜๋Š”๋ฐ ์–ด๋Š์ •๋„ UI๊ฐ€ ์™„์„ฑ๋˜๊ณ  ๋‚˜๋ฉด ์‹œ๊ฐ„์„ ๋‚ด์„œ ์ตœ์ ํ™”๋ฅผ ์ ์šฉํ•˜์—ฌ ๋ฆฌํŒฉํ† ๋ง์„ ๊ผญ ํ•ด์•ผ๊ฒ ์Šต๋‹ˆ๋‹ค!!!!!!!!!

     

     

    ( ์ฝ”๋“œ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ ๋ณด๋‹ค ์ตœ์ ํ™”๋ฅผ ์‹ ๊ฒฝ์“ฐ๋Š”๊ฒŒ ์™œ ๋” ํž˜๋“ค ๊ฒƒ ๊ฐ™๋‹ค๋Š” ๋Š๋‚Œ์ ์ธ ๋Š๋‚Œ์ด ์˜ค๋Š”๊ฑธ๊นŒ.....................๋„ˆ๋ฌด ๊ณผํ•œ ์ตœ์ ํ™”๋Š” ์•ˆํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋ชปํ•˜๋‹ค๊ณ  ํ•˜๋‹ˆ ๊ตฌ๊ธ€๋ง์„ ํ†ตํ•ด ๊ณต๋ถ€๋ฅผ ๋” ํ•œ ํ›„ ์ ์šฉํ•ด๋ด์•ผ๊ฒ ๋‹ค........^^)

     

     

    ๋Œ“๊ธ€ 0

Designed by Tistory.