문제가 발생한 코드 로직에 대해 설명드리자면 유저가 어떤 상태 선택창을 띄우고 상태를 변경하면 서버로 요청을 보내고 응답이 와서 변경된 데이터로 새로 렌더링 되는 로직입니다. 그런데 여기서 저는 상태 선택창을 닫히지 않게 하고 싶습니다. 그런데 useState를 사용하면 리렌더링 됐을 때 당연히 상태가 초기화 돼서 선택창이 사라질 것이기 때문에 useRef를 사용했습니다. 아래가 그 코드인데 useRef로 했음에도 리렌더링 되고 초기 상태인 false로 바뀌어버립니다. 그래서 상태창을 유지하지 못하고 있습니다. 해결법 좀 아시는 고수님들 도움 좀 주셨으면 좋겠습니다 ㅠ const maintainStatus = useRef(false); const changeStatus = (status: LocationStatusType) => { mutate({ locationStatus: status }, { onSuccess: async (res) => { // 성공시 await queryClient.invalidateQueries({ queryKey: homelessListQueryKey }); // 쿼리 최신화 maintainStatus.current = true; console.log("maintainStatus.current:", maintainStatus.current) //true 출력 } }) } useEffect(() => { console.log("Updated maintainStatus.current:", maintainStatus.current); // false 출력 }, [maintainStatus.current]);
코드로 배우는 React with 스프링부트 개정판3 영는 React with 스프링부트 개정판3 영풍문고 IT 코너에 메인으로 전시되어 있네요. 최근 개정판 맞죠? 너무 반가워서 ^^ 응원 하러 왔어요 ^^ 스프링 mvc의 기초를 다져준 이 강의에 꽤나 인상이 깊었나 봐요 ^^ 이어서 Reactor, webflux 강의도 기대해 봅니다 ^^)*
강사님 안녕하세요! 최적화 강의 1,2 잘 듣고 있습니다 :) 3-4) 이미지 사이즈 최적화 강의에서 강의에서 설명하신 방식대로 진행했는데, 제 경우는 다른 결과가 나와서 질문 드립니다. 강사님이 작성하신 코드대로 webp 형식을 지원하는 브라우저이면 source 태그를 통해 로드하고 그렇지 않으면 jpg 형식으로 로드하도록 코드를 그대로 작성했습니다. <picture> <source data-srcset={props.webp + "s"} type="image/webp" /> <img data-src={props.image} ref={imgRef} /> </picture> 그러나 고의적으로 data-srcset 에서 에러를 발생시켰을 때, img 태그에 해당하는 jpg 형식의 이미지가 로드되지 않고, 이미지 엑박이 나옵니다. 저와 동일한 질문을 봤는데 jpg 형식 이미지가 담긴 img 태그는 실제로 화면에 잘 나오는 것을 확인했습니다. webp 형식과 Jpg 형식 이미지 모두 지연 로딩을 적용해서 이러한 에러가 발생하는건가요?
안녕하세요. v15로 업데이트를 했는데 하이드레이션 오류가 발생하기 시작했습니다. /book/1 페이지에서 vscode 저장으로 Next.js가 재실행이 되면은 오류가 발생하는데요. 하이드레이션 과정에서 서버와 클라이언트의 HTML이 일치하지 않아 클라이언트에서 재생성이 된다는 오류가 발생하고 있습니다. 그래서 속도 저하가 굉장히 심해진 상태입니다. https://nextjs.org/docs/messages/react-hydration-error 이 곳에서 오류가 발생하는 원인과 해결법을 말해주고는 있는데, 지금 저한테만 발생하는 현상인건지 좀 궁금합니다.
컨텍스르를 설계하실 때 const Consumer = ({childeren } => <>{children(emiiter.get())}</>) 설명하시면서 렌더프롭이라고 설명하셨습니다. 그 이후 Count 설계하실 때 {(value) => <div>{value.count}</div>} 라고 적으셨는데 렌드 프롭에 대한 설명이 없으셔서 정확히 어떻게 렌더링되는지 궁금합니다!! 정확한 원리를 자세히 모르겠습니다
안녕하세요! 지금까지 강의 너무 잘 들었습니다. React와 TypeScript 강의를 듣고 복습겸으로 제공해주신 핸드북 사이트까지 참고하면서 공부하고 있습니다! 혹시나 Next.js의 핸드북 사이트를 제가 못 찾은건지 아니면 없다면 만드실 계획은 없으신지 궁금해서 질문 올려봅니다. 좋은 강의 만들어주셔서 감사합니다.
landingpage에서 useEffect로 fetchProducts를 하고 있는데, VSCode development server를 켜놓고 하지 않습니까? 근데 vscode에서 save를 할 때 landingpage의 useEffect가 실행되는데, 이게 원래 이런건가요? useEffect는 컴포넌트가 처음 마운트 될 때만 실행되는 것으로 알고 있는데, 개발모드에서 save할 때는 save할 때마다 실행되나요? 궁금하네요.
안녕하세요 제로초님 modal을 구현하고있는데 궁금증이 생겨 질문드립니다. modal을 구현할 때 intercepting routes를 사용하는 이유가 궁금합니다. 단순히 parallel로만 띄우면 안되는건가요? 아래는 제가 구현한 코드예시입니다. https://github.dev/datoybi/next-playground simple-modal1은 parallel routes만 사용하였고, simple-modal2는 parallel routes + intercepting routes를 사용하였습니다. 두개 다 구현을 해보았는데 새로고침을 해도 둘의 결과값이 같습니다. 무엇때문에 intercepting routes를 사용하는 건가요? 미리 감사합니다!
기존처럼 사용하면 빌드시 타입 오류가 나와서 따로 type을 Promise 로 만들어 사용해줘야 하는 듯합니다. nextjs 링크도 첨부해두었습니다. https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams 참고로 search/page.tsx 에서 searchParams 를 다음과 같이 타입 적용해주었더니 정상 빌드되었습니다. type SearchParams = Promise<{ q?: string }>;
