• React-Navigation ํ™”๋ฉด ํฌ์ปค์Šค ๊ฐ์ง€ ๋ฌธ์ œ ํ•ด๊ฒฐ
    ๊ฐœ๋ฐœ 2020. 11. 25. 18:33


    ๐ŸŒธ TIL








    ๐Ÿ’ฅ ๋ฌธ์ œ์ 



    ๊ตฌํ˜„ํ•˜๋˜ ๊ธฐ๋Šฅ ์ค‘์— A screen์—์„œ B screen์œผ๋กœ navigateํ•œ ํ›„, B screen์—์„œ A screen์œผ๋กœ goBackํ–ˆ์„ ๋•Œ A screen์—์„œ API ํ˜ธ์ถœ์ด๋‚˜ ์žฌ๋ Œ๋”๋ง์ด ์ด๋ฃจ์–ด์ ธ์•ผ ํ•˜๋Š” ์ƒํ™ฉ์ด ์ƒ๊ฒผ๋‹ค.


    ๋‹ค์‹œ ๋งํ•ด B screen์—์„œ useContext์— ์žˆ๋Š” ์ƒํƒœ ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜์˜€๊ณ , goBack์„ ํ†ตํ•ด A screen ์œผ๋กœ ๋Œ์•„์™”์„ ๋•Œ ๋ณ€๊ฒฝ๋œ ๊ฐ’์ด ์ ์šฉ๋˜์–ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์žฌ๋ Œ๋”๋ง์„ ํ•ด์•ผ๋งŒ ํ•˜๋Š” ๊ฒƒ์ธ๋ฐ goBack์„ ์‚ฌ์šฉํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— A screen์—์„œ ์žฌ๋ Œ๋”๋ง์ด ์ด๋ฃจ์–ด์ง€์ง€ ์•Š๊ณ  ์žˆ๋‹ค.



    ๐ŸŒˆ ํ•ด๊ฒฐ ๋ฐฉ์•ˆ



    react-navigation์€ ์ด 3๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค.


    1. Listening to the 'focus' event with an event listener.
    2. Using the useFocusEffect hook provided by react-navigation.
    3. Using the useIsFocused hook provided by react-navigation.



    ์ด 3๊ฐ€์ง€ ๋ฐฉ๋ฒ• ์ค‘ 3๋ฒˆ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๊ฒฐํ•˜์˜€๋‹ค.


    const isFocused = useIsFocused();
    useEffect(() => {
      if (isFocused) console.log('Focused!!');
    }, [isFocused]);



    useIsFocused๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ useEffect ์•ˆ์—์„œ ์ฒ˜๋ฆฌํ•ด์ฃผ์–ด๋„ ์ข‹๊ณ  useFocusEffect๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ์–ด๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

    ์ด๋Ÿฐ ๊ธฐ๋Šฅ์ด ์žˆ๋Š”์ค„ ๋ชจ๋ฅด๊ณ  ์”ฉ์”ฉ๋Œ€๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ๊ตฌ๊ธ€๋ง์€ ์—ญ์‹œ ์‹ ์ด์•ผ........



    ์•„! ๊ตฌ๊ธ€๋งํ•˜๋‹ค๊ฐ€ ํ•˜๋‚˜ ๋” ์•Œ์•„๋‚ธ ๊ฒƒ์€ ๋งŒ์•ฝ B screen์—์„œ A screen ์œผ๋กœ ์™”์„ ๋•Œ๋งŒ ๊ฐ์ง€ ํ•ด์•ผํ•˜๊ณ  C screen์—์„œ ์™”์„ ๋•Œ๋Š” ๊ฐ์ง€ํ•˜์ง€ ์•Š์•„์•ผ ํ•œ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•๋„ ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.





    goBack detect stackNavigator · Issue #684 · react-navigation/react-navigation

    Screen A -> Screen B On Screen B after I fill in a form, I use goBack() to go back to Screen A. However upon going back to Screen A, I need to refresh its contents. From Screen A, how can I dete...







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


    ์ „์—๋Š” ์•ˆ๋˜๋Š” ๊ฒƒ์ด ์žˆ์œผ๋ฉด ์ขŒ์ ˆํ•˜๊ณ  ๋ง‰๋ง‰ํ•˜๊ณ  ์–ด๋””์— ๋ฌผ์–ด๋ณด๊ธฐ ๊ธ‰๊ธ‰ํ–ˆ๋Š”๋ฐ ์ด์ œ๋Š” ์กฐ๊ธˆ์”ฉ ๊ตฌ๊ธ€๋ง์— ์ž์‹ ๊ฐ์ด ์ƒ๊ธฐ๊ณ  ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋ฌผ์–ด๋ณด๋Š” ํšŸ์ˆ˜๊ฐ€ ์ •๋ง ๋งŽ์ด ์ค„์—ˆ๋‹ค.


    ํ˜ผ์ž ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ํž˜์ด ๊ธธ๋Ÿฌ์ง€๊ณ  ์žˆ๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ๋ฟŒ๋“ฏํ•˜๊ณ  ์ด์ œ๋Š” ์–ด๋– ํ•œ ์ƒํ™ฉ์ด ์˜จ๋‹ค๊ณ  ํ•ด๋„ ์ „๋ณด๋‹ค ๋œ ๋‘๋ ต๊ณ  ์ข€ ๋” ๋„์ „์ ์œผ๋กœ ๋›ฐ์–ด๋“ค๊ณ  ์žˆ๋Š” ๋‚ด ์ž์‹ ์„ ๋ณด๊ฒŒ ๋˜์–ด ๋‚ด๊ฐ€ ๋„ˆ๋ฌด ๋Œ€๊ฒฌํ•˜๋‹ค!



    ( ๋Œ€๊ฒฌํ•œ ๋‚˜๋ฅผ ์œ„ํ•ด์„œ ์˜ค๋Š˜ ์ €๋…์—๋Š” ์ƒ์œผ๋กœ ๋งฅ์ฃผ๋ฅผ ์ค˜์•ผ๊ฒ ๋‹ค ํ—ฟ ๐Ÿคช )

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

    GraphQL - [ useQuery & useLazyQuery ]  (0) 2021.02.17
    API Documentation - PostMan  (0) 2021.01.27
    TDD ๐Ÿ’Ž  (0) 2020.11.02
    ๐Ÿ€ useEffect VS useLayoutEffect ๐Ÿ€  (10) 2020.10.22
    TypeScript ์˜ Interface ์‚ฌ์šฉํ•˜๊ธฐ  (0) 2020.10.21

    ๋Œ“๊ธ€ 6

Designed by Tistory.