ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ๐Ÿ€ useEffect VS useLayoutEffect ๐Ÿ€
    ๊ฐœ๋ฐœ 2020. 10. 22. 14:36

     

     

    ๐ŸŒธ TIL

     

     

    ํšŒ์‚ฌ์—์„œ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋Š” React-Native ์•ฑ์„ ๊ตฌํ˜„ํ•˜๋˜ ์ค‘์— Navigation ์ค‘์— Stack.Screen์„ ์‚ฌ์šฉํ•˜์—ฌ Header Bar๋ฅผ ์ปค์Šคํ…€ํ•˜์—ฌ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ฒผ๋‹ค.

     

    ๋จผ์ € ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” ์ƒ๋‹จ์— header๊ฐ€ ์žˆ๊ณ  navigation.push()๋ฅผ ํ†ตํ•ด ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ–ˆ์„ ์‹œ header ์™ผ์ชฝ์— ์ด์ „๋ฒ„ํŠผ์ด ๋ณด์—ฌ์ง€๊ฒŒ ๋˜๋Š”๋ฐ, ๋‚ด๊ฐ€ ๊ตฌํ˜„ํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์€ ์ด์ „ ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  header์— ๋‚ด๊ฐ€ ์ง€์ •ํ•˜๊ณ  ์‹ถ์€ ์ด๋ฏธ์ง€๋‚˜ ๋ฒ„ํŠผ ๋“ฑ๋“ฑ์„ ์ปค์Šคํ…€ํ•˜์—ฌ ๋งŒ๋“ค์–ด๋‚ด๋Š” ๊ฒƒ์ด์—ˆ๋‹ค.

     

     

     

    import React, { useState } from 'react';
    import { Text, View, TouchableOpacity } from 'react-native';
    
    const App = ({ navigation }: any) => {
    
      const [disabled, setDesabled] = useState(true);
    
      navigation.setOptions({
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Text>์ทจ์†Œ</Text>
          </TouchableOpacity>
        ),
        headerRight: () => (
          <TouchableOpacity
            disabled={disabled}
            onPress={() => alert('hi')}
          >
            <Text style={disabled ? {color: '#cdccd'} : {color: '#111'}} >ํ™•์ธ</Text>
          </TouchableOpacity>
        ),
      });
        
    
      return (
        <View>
          <Text>Hello World</Text>
        </View>
      );
    };
    
    export default App;

     

    ์œ„์™€ ๊ฐ™์ด navigation.setOptions()๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ Header๋ฅผ ์ปค์Šคํ…€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ ์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•˜์ž ํ„ฐ๋ฏธ๋„์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์—๋Ÿฌ๋ฅผ ๋งˆ์ฃผํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

     

     

     

     

    ๐Ÿšซ  Warning: Cannot update a component from inside the function body of a different component.

     

     

    ์ด ์—๋Ÿฌ๊ฐ€ ์™œ ์ž๊พธ ๋‚˜์˜ค๋Š”์ง€ ๊ตฌ๊ธ€๋ง์„ ํ•œ ๊ฒฐ๊ณผ ์–ด์ด์—†๊ฒŒ๋„ useEffect ๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ๋Š” ๊ฒƒ์„ ๊นœ๋นกํ–ˆ๋‹ค...

    ๊ทธ๋ž˜์„œ useEffect๋กœ ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ๊ฐ์‹ธ์ฃผ์—ˆ๋‹ค.

     

    import React, { useState } from 'react';
    import { Text, View, TouchableOpacity } from 'react-native';
    
    const App = ({ navigation }: any) => {
    
      const [disabled, setDesabled] = useState(true);
      
      useEffect(() => {
      
        navigation.setOptions({
          headerLeft: () => (
            <TouchableOpacity onPress={() => navigation.goBack()}>
              <Text>์ทจ์†Œ</Text>
            </TouchableOpacity>
          ),
          headerRight: () => (
            <TouchableOpacity
              disabled={disabled}
              onPress={() => alert('hi')}
            >
              <Text style={disabled ? {color: '#cdccd'} : {color: '#111'}} >ํ™•์ธ</Text>
            </TouchableOpacity>
          ),
        });
        
      },[disabled]);
    
      return (
        <View>
          <Text>Hello World</Text>
        </View>
      );
    };
    
    export default App;

     

    useEffect๋ฅผ ํ†ตํ•ด ์—๋Ÿฌ๋Š” ํ•ด๊ฒฐ์ด ๋˜์—ˆ์ง€๋งŒ ํ•ด๋‹น ์—๋Ÿฌ์— ๋Œ€ํ•ด ์ข€ ๋” ์•Œ์•„๋ณด๊ณ  ์‹ถ์–ด์„œ ์—๋Ÿฌ๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ๊ตฌ๊ธ€๋งํ•œ ๊ฒฐ๊ณผ ๊ณต์‹๋ฌธ์„œ์—์„œ ์ด navigation.setOptions()๋ฅผ useLayoutEffect()๋ผ๋Š” Hook์œผ๋กœ ๊ฐ์‹ธ์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋‹ค. 

     

    useLayoutEffect๋Š” ์ฒ˜์Œ ์ ‘ํ•ด๋ณด๋Š” Hook์ด๋ผ์„œ useEffect์™€ ์–ด๋–ค ์ฐจ์ด์ ์ด ์žˆ๋Š”์ง€ ๊ตฌ๊ธ€๋ง์ด ์ข€ ๋” ํ•„์š”ํ–ˆ๋‹ค.

     

     

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

     

     

     


     

     

    ๐Ÿ’ฅ useLayoutEffect์™€ useEffect์˜ ์ฐจ์ด์ 

     

     

      useEffect useLayoutEffect
    render ๋ Œ๋”๊ฐ€ ํ™”๋ฉด์— ๊ทธ๋ ค์ง„ ํ›„ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์‹คํ–‰ ๋ Œ๋”๋ง ํ›„ ํ™”๋ฉด์ด ์—…๋ฐ์ดํŠธ ๋˜๊ธฐ ์ „์— ๋™๊ธฐ์ ์œผ๋กœ ์‹คํ–‰
    ์‚ฌ์šฉ ๊ฒฝ์šฐ โ˜˜๏ธ ์ผ๋ถ€ ์ƒํƒœ๋ฅผ ์ฆ‰์‹œ ๋ฐœ์ƒํ•  ํ•„์š”๊ฐ€ ์—†์„ ๊ฒฝ์šฐ
    โ˜˜๏ธ ํŽ˜์ด์ง€์— ์‹œ๊ฐ์ ์œผ๋กœ ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š” ๋ฌด์–ธ๊ฐ€๋ฅผ ๋™๊ธฐํ™” ํ•  ๊ฒฝ์šฐ

    โ˜˜๏ธ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์„ค์ •ํ•˜๋Š” ๊ฒฝ์šฐ
    โ˜˜๏ธ ๋ชจ๋‹ฌ ์ƒ์ž๊ฐ€ ๋‚˜ํƒ€๋‚˜๊ฑฐ๋‚˜ ์‚ฌ๋ผ์งˆ ๋•Œ ์ผ๋ถ€ ์ƒํƒœ๋ฅผ ์žฌ์„ค์ •ํ•˜๋Š” ๊ฒฝ์šฐ
     
    โ˜˜๏ธ ์ƒํƒœ๊ฐ€ ์—…๋ฐ์ดํŠธ ๋  ๋•Œ ์š”์†Œ๊ฐ€ ๊นœ๋ฐ•์ด๋Š” ๊ฒฝ์šฐ
    โ˜˜๏ธ DOM์„ ๋ณ€๊ฒฝํ•˜๋ ค๋Š” ๊ฒฝ์šฐ
    ์ด ๋‘˜์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ ๋ Œ๋”๋ง ์‹œ์ ์— ์žˆ๋‹ค.

     

     

    ์œ„์˜ ์ฐจ์ด์ ๋งŒ ๋ณด๋ฉด DOM์„ ๋ณ€๊ฒฝํ•˜๋ ค๋Š” ๊ฒฝ์šฐ๊ฐ€ ์˜ค๊ฑฐ๋‚˜ ํ”„๋ก ํŠธ๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ํ•œ๋ฒˆ์ฏค ๋งˆ์ฃผํ•˜๋Š” ์ƒํƒœ๋ณ€๊ฒฝ์œผ๋กœ ์ธํ•œ ์š”์†Œ์˜ ๊นœ๋ฐ•๊ฑฐ๋ฆผ์— ๋ถ€์ž์—ฐ์Šค๋Ÿฌ์šด UI๋ฅผ ๋งˆ์ฃผํ•˜๊ฒŒ ๋˜๋ฉด์„œ " ์•„ ๊ทธ๋Ÿฌ๋ฉด ์ด๋Ÿฐ ๊ฒฝ์šฐ์—๋Š” ๋ฌด์กฐ๊ฑด useLayoutEffect๊ฐ€ ์ข‹๊ฒ ๋„ค? " ๋ผ๋Š” ์ƒ๊ฐ์„ ํ•˜๊ฒŒ ๋  ์ˆ˜ ์žˆ๋‹ค.

     

     

     

    ( ์–ด.......................๋‚ด๊ฐ€ ๊ทธ๋žฌ๋‹ค............................)

     

     

     

    ๊ทธ๋ž˜์„œ ์ •๋ง ๋‚ด ํŒ๋‹จ์ด ๋งž๋Š”๊ฑด์ง€ ๊ถ๊ธˆํ•˜์—ฌ ๊ตฌ๊ธ€๋ง์„ ํ•œ ๊ฒฐ๊ณผ ์–ด๋–ค ๊ฒฝ์šฐ์—๋Š” useEffect ๋Œ€์‹  useLayoutEffect๊ฐ€ ๋” ์ข‹๋‹ค๋Š” ๊ธ€๋„ ๋ณด์•˜๋‹ค.

     

    ํ•ด๋‹น ๊ธ€

     

     

     

     


     

    ๋งˆ์น˜๋ฉฐ ๐ŸŒธ

     

     

    ์Œ.... ๋‚ด ํŒ๋‹จ์€ " ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ์—๋Š” useEffect๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌํ˜„ํ•˜๊ณ  ์‹œ๊ฐ์ ์ธ ๊นœ๋นก์ž„ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋งŒ ์ ์ ˆํ•˜๊ฒŒ ํŒ๋‹จํ•˜์—ฌ useLayoutEffect๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๊ฒ ๋‹ค " ๋ผ๋Š” ํŒ๋‹จ์„ ๋‚ด๋ ธ๋‹ค.

     

    ์‚ฌ์‹ค Hook์„ ์–ผ๋งˆ๋‚˜ ๋งŽ์ด ์‚ฌ์šฉํ–ˆ๋Š๋ƒ๊ฐ€ ์ค‘์š”ํ•˜๋‹ค๊ธฐ ๋ณด๋‹ค๋Š” ์–ด๋Š ๊ฒฝ์šฐ์— ์–ด๋–ค Hook์„ ์ ์ ˆํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋Š๋ƒ๊ฐ€ ๋” ์ค‘์š”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค.

     

    ๊ทธ์ € " ์ด๋Ÿฐ ๊ฒฝ์šฐ์—๋Š” ์ด ์ฝ”๋“œ๋ฅผ ์ ์šฉํ•˜๋”๋ผ " ๊ฐ€ ์•„๋‹ˆ๋ผ " ์ด ๊ฒฝ์šฐ์—๋Š” ์™œ ์ด๋Ÿฐ ์ฝ”๋“œ๋ฅผ ์ ์šฉํ•ด์•ผํ•˜์ง€? " ๋ฅผ ๋จผ์ € ์ƒ๊ฐํ•˜๊ณ  ๊ทธ์— ๋”ฐ๋ฅธ ๋‹ต์„ ์ž์‹ ์žˆ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๊ทธ ๋ˆ„๊ตฌ๋„ ๋น„ํŒํ•  ์ˆ˜ ์—†๋Š” ์ข‹์€์ฝ”๋“œ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

     

     

     

    '๊ฐœ๋ฐœ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

    React-Navigation ํ™”๋ฉด ํฌ์ปค์Šค ๊ฐ์ง€ ๋ฌธ์ œ ํ•ด๊ฒฐ  (6) 2020.11.25
    TDD ๐Ÿ’Ž  (0) 2020.11.02
    TypeScript ์˜ Interface ์‚ฌ์šฉํ•˜๊ธฐ  (0) 2020.10.21
    Express  (0) 2020.06.25
    Cookie์™€ Session  (0) 2020.06.18

    ๋Œ“๊ธ€ 10

Designed by Tistory.