무한스크롤 리액트버전 | 16분 31초

질문자님의 말씀이 맞습니다.편집과정에서 async를 지운 내용이 빠져있었네요..18:33 부분에서는 async가 지워져 있습니다.혼란을 드려 죄송합니다.https://www.inflearn.com/course/lecture?courseSlug=react-vanillajs-ui%EC%9A%94%EC%86%8C%EB%A7%8C%EB%93%A4%EA%B8%B0-part1&unitId=212088&subtitleLanguage=ko

sass 오류

안될 이유가 없죠!

does not match

데이터를 랜덤하게 가져오도록 작성한 부분을 랜덤하지 않게 만들면 해결될 것입니다.

자바스크립트 주석에 이상한 점이 있어서 문의드립니다.

AI가 답한대로입니다.위 코드를 실행한 런타임(자바스크립트 실행 환경)의 주석 구문 파싱 로직에 문제가 있는 것 같네요.크롬 개발자도구에서 위 코드를 실행해 보시면 아무런 문제가 없습니다.(사진)

FE 컨퍼런스 (인프콘, FEConf) 함께 시청하기

snackbar를 createportal를 썻을 때 갯수 조절이 가능한가요?

바로 다음 영상 (modal #2)에서 mutationObserver를 적용해 봅니다. 이 내용 참고하시면 간단하게 처리하실 수 있을 거예요.

return 문 안에 여러 함수가 존재하는 것이 이해되지 않습니다.

1. 네 맞습니다2. 명칭이 있는지 모르겠습니다만, 말씀하신대로 객체 리터럴을 반환한 것이므로 그렇게 부르셔도 괜찮을 것 같네요.3.문법이 이상해 보이는 건 처음이라 낯설어서 그럴 것이에요. 자바스크립트에서는 객체나 함수를 리턴하는 일이 정말정말 많이 있습니다. 요즘 많이 쓰이는 리액트는 이런 기능 없이는 아예 탄생할 수조차 없었을 겁니다.return 객체 안의 함수 없이 동일한 동작을 하는 함수라는게 어떤걸 말씀하시는지 상상이 안됩니다.각각의 목적에 따라 기능을 분리한 것이라, 여러가지 기능을 필요할 때 쓸 수 있도록 한 것이거든요. roy.name 으로 이름값을 가져오고 싶을 때가 있고, roy.name = '정재남' 이라고 해서 이름값을 바꾸고 싶을 때가 있고, roy.login()으로 로그인을 수행하고 싶을 때가 있는거니까요.. 이처럼 미리 '미래에 쓰일 수 있는 기능들'을 예상해서 목적에 따라 다양한 메서드들을 하나의 객체에 담아 반환해 주면, 미래에 필요에 따라 해당 메서드(함수)를 호출해서 사용할 수 있게 되는 것입니다.이런 개념을 좀 더 잘 이해하고 싶다면 '객체지향'에 대해서도 공부를 해보시면 좋을 것 같고,혹은 일단 지금은 그냥 이해 안된 채로 넘겼다가 몇 달 뒤에 다시 학습해 보셔도 좋습니다. 시간이 지나고 보면 새롭게 보이는 것들이 생기면서 훨씬 많이 이해할 수 있게 될거예요.

강의자료 github link 404 빈페이지

깃헙은 비공개입니다. 대신 전체 코드를 강의자료로 올려 두었으니 확인 부탁드려요 :)

useCallback, useMemo의 차이에 대해서 궁금합니다.

경우에 따라 다를 것 같습니다만, 제가 이해하기로는headless 컴포넌트 적용시에 useMemo가 아닌 useCallback을 적용하는 이유는 컴포넌트간의 렌더링 간섭을 최소화하기 위함이 클 것 같습니다.const useDropdown = () => { ... return { getContainerProps, getTriggerProps, ... } } const Dropdown = () => { const { getContainerProps, getTriggerProps } = useDropdown() return ( 이렇게 각각의 컴포넌트에 넘겨줄 대상을 함수 호출로 해두면getContainerProps의 내용이 변경되더라도 getTriggerProps에는 영향을 주지 않을 것입니다.반면 각각을 useMemo로 만들 경우에는,const useDropdown = () => { ... return { handleKeyDown, selectedItem, toggle, ... } } const Dropdown = () => { const { handleKeyDown, selectedItem, toggle } = useDropdown() return ( 이렇게 되어서, handleKeyDown, selectedItem, toggle 중 어느 하나만 변경되더라도모든 컴포넌트가 재렌더링될 것 같습니다.혹은 다음과 같이 할 수도 있겠는데요,const useDropdown = () => { ... return { containerProps, triggerProps } } const Dropdown = () => { const { containerProps, triggerProps } = useDropdown(data) return ( 이 경우에는 테스트 해보니 괜찮네요.다만 테스트하면서 보니, getItemProps의 경우에는 파라미터를 전달해야 해서 useCallback을 쓸 수밖에 없더군요. 결론은,파라미터를 전달해야 하는 경우와 그렇지 않은 경우를 나누어 useCallback / useMemo를 구분 적용하는 것도 괜찮고, 파라미터 필요성을 염두에 두어 일관되게 useCallback만 사용하는 방법도 좋을 것 같습니다.

createPortal 활용해서 modal 만들 때 활용한 MutationObserver 코드 관련 질문

답변이 늦은 것 같진 않은데, 그 얼마 안되는 사이에 AI가 답변을 해버렸군요.useEffect에 의존성이 비어 있으면 상태 변화 등으로 업데이트가 발생하더라도 재실행되지 않습니다. 이 부분은 AI가 잘못된 정보를 전달한 것 같습니다.그럼에도 재실행된 것은, 질문자께서 추가 작성하신 것처럼 StrictMode 때문입니다. https://ko.react.dev/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-developmentMutationObserver는 감시를 시작(observe)한 순간부터 해제(unobserve 또는 disconnect)되기 전까지 계속 등록한 대상의 변화를 감시하며, 변경사항이 감지될 때마다 초기 인스턴스 생성시에 전달한 함수를 실행합니다(그래서 감시자, observer라고 합니다). 클로저와는 무관하고, 이벤트 핸들러를 등록(adEventListener)한 것과 비슷하다고 이해하시면 됩니다.