React4 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. React 생명주기 원래 하려던 것: 클래스 컴포넌트에서 쓰이는 생명 주기 메서드를 함수형 컴포넌트에서 적용하려면 어떻게 해야하는지 다시 정확하게 알기 먼저 알고 싶은 것: 클래스 컴포넌트에서 쓰이는 생명 주기 메서드 따라서, State와 생명주기에서 다시 시작 - render 메서드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM 노드로 을 렌더링하는 경우 Clock 클래스의 단일 인스턴스만 사용된다. 따라서 로컬 state와 생명주기 메서드 등의 기능을 사용할 수 있다. - 어플리케이션에 컴포넌트가 삭제될 때, 해당 컴포넌트가 사용 중이던 리소스를 확보하기 - 타이머가 DOM에 렌더링 될 때(마운팅), DOM에서 삭제될 때 각각 componentDidMount, componentWillUnmout 예시로 나온 1. .. 2021. 2. 11. React Ref 보통, 원래, 일반적인 경우: - 부모와 자식 컴포넌트가 있을 때, 자식 컴포넌트를 수정하려면 부모 컴포넌트에서 새로운 props를 전달하여 자식을 리렌더링함 특수한 경우: - 그런 과정 안 거치고 직접 자식을 수정하고 싶음 - 컴포넌트 인스턴스( 클래스로 선언된 컴포넌트, this 키워드로 참조되는 대상 ), DOM 엘리먼트 쓰기 전 경고: - state에 어디에 있어야 할지 먼저 고민해야 함 생성: - 컴포넌트의 인스턴스 생성할 때, Ref를 프로퍼티로 추가 → 인스턴스 내부에서 자유롭게 접근 가능 접근: - render 메서드 안에서 ref가 엘리먼트에 ref attribute 통해 전달되면 해당 노드에 대한 참조가 ref.current에 담김 - ref의 값 HTML 엘리먼트에 쓰인 경우 - re.. 2021. 2. 11. 이전 1 다음
