React6 [Next.js] :first-child CSS Selector 경고 Next 환경에서 개발을 하다보면 치명적이지는 않지만 주의하라는 경고들이 가끔 뜨는데 :first-child CSS Selector를 사용하지 말라는 경고도 그 중 하나이다. 저 셀렉터를 수정하지 않는다고 개발 진행이 불가능한 건 아니라서 무시하고 작업을 했다가 코드 리뷰에서 한번 이야기가 나온 적이 있다. 사실 코드 리뷰 받기 전에 다 수정하고 PR 올려야 하는데 내가 놓친 부분이다. 아무튼 동료 개발자도, 나도 개발하다가 저 경고를 본 적이 있었고 수정해야 하지않겠냐는 말이 나왔는데 정작 둘 다 왜 쓰면 안 되는지는 정확히 모르고 있어서 같이 찾아봤다. 정확한 답변은 이 링크에서 확인할 수 있었다. 엄밀히 말하면 Next.js 보다는 emotion 쪽 이슈였다. SSR + emotion 정리해보면 N.. 2022. 5. 15. forwardRef react에는 두 종류의 ref가 있다; ref 객체, ref 콜백. 전자는 useRef로 만들어지며 current 프로퍼티를 갖는 객체; RefObject. T는 current에 할당되는 값의 타입이다. 후자의 경우, 엘리먼트에 함수를 넘겨주면 인스턴스가 생성되거나 사라질 때 해당 함수가 콜백된다; (instance: T) => void 둘 모두를 가리키는 건 Ref. ref를 prop으로 넘겨 받기만 한다면 그 컴포넌트는 Ref로 충분. 이 때 ref는 객체일 수도, 함수일 수도 있다. 그러나 해당 Ref를 컴포넌트 내에서 ref Object로 활용하려면 타입의 범위를 RefObject로 좁혀야 한다. 하나 더, 범위를 제한하지 않으면서 ref를 활용하고 싶다면 interface ExampleProp.. 2021. 11. 22. Lazy-loading 이미지가 주된 컨텐츠인 프로젝트(갈피)를 진행하면서도 이미지 최적화와 퍼포먼스는 크게 신경쓰지 못한 것 같아서 이와 관련된 글들을 찾아보게 되었다. 우선, 리액트에서 lazy-loading이 일반적으로 어떻게 구현되는지 알아보았다. 첫번째 :: Deepak Vishwakarma, React lazy image loading and TypeScript — No more slow and broken images (201016) // components/Image/index.tsx import React from "react"; interface ImageProps extends React.ImgHTMLAttributes {} export default ({ ...props }: ImageProps) => {.. 2021. 5. 8. Kakao Map API에서 마우스 이벤트 핸들링 Kakao Map 지도 상에서 마우스 오른쪽 버튼을 클릭하면 내 위치를 설정할 건지 묻는 오버레이를 띄우는 것이 목적이었다. 그래서 이벤트 핸들러를 등록하고 콜백 함수 등을 만들고 있었다. 다음은 원하는 기능을 구현하기까지의 삽질 과정. #1 두번째 클릭부터 이벤트 핸들러가 작동하지 않음(...) 첫 오른쪽 클릭 때는 아무 문제없이 오버레이를 띄우고 새로운 좌표로 내 위치를 설정할 수 있었다. 그런데 두번째 클릭부터는 아무런 반응이 없다. 로그를 찍어보니 선택한 엘리먼트가 하나가 아니라 4개인 배열이었다. 그리고 그 이후에는 8개, 12개씩 제멋대로 늘어났다. (어이없음) 아마 엘리먼트가 지정되지 않아서 오버레이가 보이지 않았던 것 같다. 처음에는 오버레이를 띄울 때 추가된 새로운 엘리먼트가 미처 다 안.. 2021. 4. 7. Rendered more hooks than during the previous render // 컴포넌트 내부 const { loading: loadingAll, data: dataAll, error: errorAll } = useQuery( GET_KINDERGARTENS ); const [type, setType] = useState(""); if (loadingAll) return Loading; if (errorAll) return ERROR; if (!dataAll) return Not found; useEffect(() => { if (!type.length) return; const filteredArray = filterByType(dataAll.kindergartens, type).map( (item: any) => { return { name: item.name, locati.. 2021. 3. 28. Brad Westfall, React: "mount" vs "render" 🔹 렌더링 : 함수 컴포넌트가 호출될 때(클래스 컴포넌트에서 render 메소드 호출될 때) 발생. 호출하면 DOM 생성에 관한 지시 사항들이 반환된다. 🔹 마운팅 : 리액트가 최초로 컴포넌트를 렌더링할 때. 앞선 지시사항들로부터 첫 DOM을 실제로 빌드한다. 🔹 리렌더링 : 리액트가 함수 컴포넌트를 다시 호출하여 이미 마운트된 컴포넌트에 적용할 새로운 지시사항들을 가져온다. 🔸 클래스 컴포넌트 App의 인스턴스 생성 -> render 메소드 호출 [ 렌더링 ] -> DOM 빌드에 필요한 지시사항들을 얻음 - 최초의 렌더링인 경우, 컴포넌트가 마운트 한다고 표현 state가 변경 -> 리렌더; render 재호출 -> DOM 업데이트에 관한 새로운 지시사항이 반환 -> 재조정 🔸 함수 컴포넌트 함수가 호.. 2021. 2. 13. 이전 1 다음
