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 만 사용하는 방법도 좋을 것 같습니다.