제가 궁금한건 다른 페이지에 있을 때에도 스냅샷 함수를 가동시켜 비용이 계속해서 발생하는 것을 막기위해 온스냅샷 함수를 unsubscribe, 구독취소하는 코드인데요어째서 제가 읽기에는 unsubscribe = ~ 온스냅샷함수 ~...return () => unsubscribe함수 실행useEffect cleanup기능으로 언마운트시 온스냅샷함수를 정지하려는데 다시 온스냅샷함수를 실행? 제가 어떻게 잘못 이해하는건지 모르겠어요 .. ㅠㅠexport default function Timeline() { const [tweets, setTweet] = useState<ITweet[]>([]); let unsubscribe: Unsubscribe | null = null; const fetchTweets = async () => { const tweetsQuery = query( collection(db, "tweets"), orderBy("createdAt", "desc"), limit(25) ); unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => { const tweets = snapshot.docs.map((doc) => { const { tweet, createdAt, userId, username, photo } = doc.data(); return { tweet, createdAt, userId, username, photo, id: doc.id, }; }); setTweet(tweets); }); }; useEffect(() => { fetchTweets(); return () => { unsubscribe && unsubscribe(); }; }, []); }

안녕하세요.본 강의에서 보여주신 회원가입 버튼 비활성화 로직은 다음과 같습니다. useEffect(() => { const isEnabled = Object.values(inputs).every((s) => s.length > 0); setFormDisabled(!isEnabled); }, [inputs]);위의 코드로 실행하면 username과 password를 모두 입력하면 회원가입 버튼이 활성화되고 하나라도 지우면 다시 비활성화 됩니다.   useEffect(() => { if (inputs.username && inputs.password) { setFormDisabled(false); } }, [inputs]);그러나 조금 수정하여(이외의 부분은 모두 동일) 위와 같이 실행해보면, 본래의 코드와 마찬가지로 모두 입력되었을 때 버튼이 활성화 되지만 다시 지워도 비활성화가 되지 않습니다. 두 곳 모두 지워봐도 마찬가지입니다. console.log로 찍어보아도 false 값으로 고정된 채 바뀌지 않습니다.useEffect가 비동기 방식이므로 formDisabled가 업데이트 되는 타이밍 문제도 고려해 보았지만, 그렇다면 본래의 코드에서도 이런 문제가 발생하여야 할 것이라고 판단했습니다.여러모로 분석해 보았지만 이유를 알기가 어렵습니다.

최적화 완성까지 코드를 작성하고, 테스트를 해보면, 최초 로딩에서 DiarayEditor가 계속 두번 렌더링 됩니다. 새로운 react프로젝트를 만든 후 App에 userEffect를 적용후 확인해보니까, App자체가 두번 렌더링(Mount) 되는것 같았습니다. 그 이유를 알 수 있을까요?코드는 아래처럼 간단하게 App.js에 포함하여 확인하였습니다. useEffect(()=> { console.log("App Mount!!"); }, []); 또한 App이 두번 렌더링 되다보니, getData()가 두번씩 수행되는 문제가 있습니다. react의 버전차이인가요?

useEffect(() => { getPostList(); }, [Sort]);위 코드에서 아래와 같은 경고 메세지가 나옵니다. Line 33:6: React Hook useEffect has a missing dependency: 'getPostList'. Either include it or remove the dependency array react-hooks/exhaustive-deps있어도 동작 자체는 잘 되는 것 같습니다만, 이게 원래 뜨는게 정상인건지, 저만 뜨는건지 궁금합니다. 경고메세지를 그대로 남겨두는 것도 찜찜하고요;

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세 import React, { useEffect } from "react"; import axios from "../api/axios"; import "./Row.css"; export default function Row({isLargeLow, title, id, fetchUrl}) { useEffect(() => {   fetchMovieData();   }, []) const fetchMovieData = async () => {   const request = await axios.get(fetchUrl)   console.log("requeset",request) }   return (     <div>Row</div>   ) } Compiled with warnings.   [eslint] src\components\Row.js   Line 15:4:  React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps   Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before.   WARNING in [eslint] src\components\Row.js   Line 15:4:  React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps   webpack compiled with 1 warning   이런식으로 계속 ueseffect 의존성 오류가 나오는데 ㅜㅜ 강의랑 똑같이해도 진행이 안되네요ㅠㅠㅠㅠㅠㅠ

안녕하세요. 강의를 잘 듣고있는 학생입니다. 다만 선생님과 다른 부분이 궁금하여 질문하게 되었는데요, upload에서 list로 페이지 이동할 때 axios를 이용해서 요청 성공과 실패를 확인하는 부분인데요. useEffect 조건에 빈 배열을 넣을 경우 실행코드가 한 번만 뜨는 걸로 알고있었는데 자꾸 저한테는 실행코드인 alert창이 두 번씩 뜹니다.. 왜 이러는 걸까요? 현재로써는 코드에서는 다른 부분이 전혀 없어보입니다. 혹시 해결 방법을 아시는지 도움을 요청해봅니다..!!

강의 잘 보고 있습니다. 질문이 있는데요, useEffect()로 Mount 를 구현하였고, 콘솔에 로그를 Mount를 출력하였습니다. 그런데, 이상하게, Mount 로그가 두번씩 출력됩니다. 동작은 이상없지만, 두번 출력되는게 이상해서요~ 제가 무엇을 잘못했는지 궁금합니다. useEffect(()=>{   console.log("Mouint!"); }, []); 즐거운 하루 보내세요.

안녕하세요 강의 다 마무리하고 추가 기능 추가하면서 해결안되는게 있어 질문드립니다. 모달로그인 기능을 추가하였습니다.    (로그인 두곳에서 가능 =>일반, 모달)여기서  로그인실패 message 상태값을 사용하는 component들이 다 호출되는데 이걸 어떻게 해결 해야될지 잘모르겠습니다.  (설명하기가 좀 어렵네요)  모달or 일반 로그인 실패 msg => const { loginErr} = useSelector((state) => state.user)   loginErr 사용되는 곳은 모달로그인 컴퍼넌트와 일반 로그인 컴퍼넌트  ... 로그인 실패시 const { loginErr, } = useSelector((state) => state.user) useEffect(() => {     if (!mounted.current) {       mounted.current = true     } else {       if (loginErr) {         console.log(loginErr)         alert(loginErr) //       }     }   }, [loginErr])   위 코드가 모달로그인과 일반 로그인 똑같이 되어있는데 둘 중하나로 로그인하여 실패시 alert 창이 두번 실행됩니다. 이걸 해결할수 있는 방법 없을까요?   버튼 클릭시 모달내부 코드들이 실행될줄 알고 했는데 생각 처럼 잘 안죕니다. 왜 그런지는 알겠는데 해결방법을 잘 모르겠습니다. 사이트는 tweeter.ga 입니다. 항상 감사합니다.

제가 이해하기론, removeFromCart 역시 거의 addToCart와 동일한 방식으로 이루어지는 걸로 아는데요 addToCart와는 달리 removeFromCart에선 제품의 수량과 상관없이 대상 상품을 cart 목록에서 삭제하면 되는거라, 사실 db 상에 작업은 매우 간단해보입니다. 어짜피 CartPage가 렌더링 될때 현재의 db정보를 해석해서 렌더링해주는 것이다보니 강의 중간에서처럼 다른 곳에서 오류가 있어도, db수정만 이상이 없다면 CartPage를 새로고침 하는 것만으로도 정상적인 결과가 출력되는 거라, 그냥 카트에서 목록이 삭제될때마다 useEffect가 실행되도록 추가해주면 안되나요? server user routes의 router.get('/removeFromCart')에서 db가 성공적으로 수정되면 res.send(userInfo)로 간단하게 데이터만 보내서 CartPage 컴포넌트에서 이 값이 변경될때마다 useEffect가 추가로 실행되게만 해줘도 문제가 없나해서 문의 드립니다

안녕하세요 강사님 책도 가지고 있는데 책읽을 시간이 없어 강의로 필요한 부분만 보았는데요 useEffect로 onMounted됐을때 실행시킬 함수들을 빈배열을 넣고 사용하는 것보다,  useOnMounted라는 훅으로 만들어서 실행시키는게 더 낫다고 하셨는데요, 이유가 무엇인가요? 저는 mounted직후는 빈배열을 useEffect에 넘겨주면서 사용했었고 딱히 불편함을 느낀적이 없어서 이해가 잘안갑니다😭 왜 그게 더 나은지 설명이 부족한것 같아서 여쭤봅니다😭  단순히 가독성 때문인가요? 자세히 알고싶어요! 감사합니다.

렌더링 이후에 처리할 작업들을 사용하는 용도로 알고 있습니다!  (api를 통해 값을 불러올 때 사용하셨는데) 특별한 이유가 있으신가요??

안녕하세요,강의가 저에게 많은 도움이 되고 있습니다😄 강의를 수강하는 도중 몇가지 궁금한 것이 있어 질문 드립니다. 1. useEffect에 변수값(useState 포함)이 들어가는 것으로 알고 있었는데,함수가 들어가는 것은 어떤 의미인지 궁금합니다.함수가 변경될때마다 useEffect가 실행된다라는 뜻인 것 같은데,함수가 변경된다는 뜻은 무엇일까요?(deps에 들어가는 함수의 인자들이 변경된다는 뜻은 아닌 것 같아서요...) 2. 뒷정리 함수를 사용하는 이유를 확실하게 알고 싶습니다.현재 사용된 뒷정리 함수를 return (뒷정리함수) 에 두지 않고,그냥 useEffect의 이펙트 부분에 함수를 실행하면 안되는 것인가요? 제 생각에서는 그냥 본 이펙트를 실행하기 직전에observer.disconnect() 를 실행시켜도 비슷한 결과를 가져오지 않을까라는 막연한 생각이 들어서요. 그래서 윗 부분의 두가지 궁금증을 해결하고자 질문을 남깁니다. 감사합니다.

1. useEffect useEffect는 랜더링시 특정작업을 위해 수행하는 hook로 알고 있고 [ ] 에 값을 삽입시 그값만 업데이트시만 수행하는걸로 알고있습니다. Comment.js 에서 [ dispatch, id ] 를 집어넣는데 정확한 이유가 무었일까요? 2. useRef 특정DOM을 가르킬때 사용하는것으로 알고있습니다. 그러나 onSubmit 함수안에서 resetForm.current.value="" 가 의미하는바, 역할이 무엇인지 알지 못하고 있습니다. 간략한  설명좀 해주실 수 있을까요?