Develop+

Naver Map api 를 사용해 맵을 클릭 할 때마다 해당 범위를 선택해 표시해주는 프로그램을 구현 중이었다. naver map에서 제공하는 addListener로 생성한 map 객체와 click에 addHex라는 함수를 추가해주는데 이 addHex라는 함수 내에서는 외부 변수인 data와 hexList라는 변수를 참조한다. 컴포넌트가 생성되는 시점에 addEventListener을 해주니 data 에 값이 들어온 이후 시점에도 컴포넌트 생성 당시의 data값을 가지고 온다. 이거 이론으로만 들어봤던 Lexical scope 인 거 같다! Lexical Scope 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 출처: https://poiemaweb.com/js..

리액트를 훅을 사용하다보면 useEffect와 useState만으로도 충분히 프로그램을 짤 수 있다. 그래서 useMemo, useCallback이라는 개념을 듣고 제대로 적용해 본 적이 없는 거 같다. 이렇게 작동하는 코드로 만족하는 것이 새로운 것을 배우려는 마음까지도 좁게 만드는 거 같아 useMomo와 useCallbak 에대해 공부해보고자 한다. 일단 useMemo, useCallback을 배우기 전에 알고가야 할 두 가지는, 함수형 컴포넌트도 "함수"라는 것이다. 함수가 실행될 때 내부에 있는 선언, 함수들이 매번 다시 선언이된다는 점이다. 그리고 컴포넌트는 state와 props가 변경될 때 마다 리랜더링 된다는 점이다. 그렇다면 리랜더링 될 때마다 내부의 변수선언, 함수들이 매번 다시 선언..