반응형 프로젝트/코드스테이츠 - 4주프로젝트28 useMemo와 React.memo를 이용한 최적화 변화가 없다면 굳이 똑같은 연산을 하거나, 리렌더링을 할 필요가 없다. 그냥 이전에 쓰던 데이터를 다시 쓰면 된다. 리액트에는 값이 바뀌었을때만 리렌더링 혹은 연산 을 하게 하는 기능이 있다. 바로 useMemo, useCallback, React.memo이다. UseMemo와 useCallback useMemo와 useCallback은 사용법이 useEffect와 흡사하다. 두번째 인자에 들어간 배열의 값이 바뀌면 첫번째 인자인 콜백이 실행된다. 아래사진은 내가 useMemo를 사용한 방식이다. 이렇게 하면 tags[0] 혹은 tags[1]의 값이 바뀌었을때만 변수 memoTags에 바뀐 tags의 값을 할당한다. useMemo가 '값'을 반환한다면 useCallback은 '함수'를 반환한다. 핵심은 .. 2021. 12. 19. 카카오맵에서 클릭한 마커의 정보를 담은 모달창 켜기 카카오맵에서 클릭한 마커의 정보를 담은 모달창 켜기 아래 gif는 완성된 화면이다. 마이페이지 내가가본곳에 있는 지도에서 마커 누르면 에러뜨는 현상 해결 : 저번 배열map한 후 모달컴퍼넌트에 props로 배열의 해당 인덱스 정보를 전달하는 것과 같은 원리이다. https://wnsdufdl.tistory.com/254 배열을 map하고 각 인덱스의 자료를 모달창에 렌더링시킬때, 무조건 가장 마지막 인덱스의 자료 배열 map에서 모달창열때 문제 : 모달창을 골라서 킬려고 했는데, 그냥 모든 모달창이 다 켜지면서 화면에는 제일 마지막 모달창만 보인다. (마지막모달창이 나머지 모달창을 다 가린다.) 여기서 wnsdufdl.tistory.com 한 state에 배열인덱스를 통째로 넣어준 후, 배열 인덱스가 들.. 2021. 12. 18. 토큰이 만료되었을시 로그아웃을 유도하는 모달창만들기 토큰이 없는데도 마이페이지에 사용자의 화면이 남아있는 현상이 있었다. AWS에서 세션만료되었다고 로그아웃시키는것처럼 나도 로그아웃시키기로 했다. 아래와 같은 모달창을 만들었다. 아래 사진처럼 catch(err)를 통해 상태코드가 401번(토큰없을때 응답)일때 모달창으로 가도록 유도했고, 모달창의 확인 온클릭이벤트에 로그아웃 함수를 걸어주었다. 모달창에선 예 버튼의 온클릭함수를 통해 로그아웃함수랑 연결된다. 2021. 12. 17. 배열을 map하고 각 인덱스의 자료를 모달창에 렌더링시킬때, 무조건 가장 마지막 인덱스의 자료가 렌더링되는 버그 배열 map에서 모달창열때 문제 : 모달창을 골라서 킬려고 했는데, 그냥 모든 모달창이 다 켜지면서 화면에는 제일 마지막 모달창만 보인다. (마지막모달창이 나머지 모달창을 다 가린다.) 여기서 주스 사진을 클릭하면 주스사진이 떠야한다 하지만 실제로는 아래의 풍선모달창이 뜬다. 이유는 주스모달창, 풍선모달창이 두개가 뜨고 마지막에 뜬 풍선 모달창이 주스 모달창을 가리게 된다. 그니까 모달창을 한.개만 키는게 안되는것이다. 구글링하니까 이런이슈에 관한 자료들이 한글은 거의없고 스택오버플로우, 외국인블로그에 정말 조금 포스팅되어 있었다. 하여튼. 해결책은 모달창이 여러개 켜진다걸 감수하고, 켜질 모든 모달창들에 똑같은 자료를 넣는것이다. function VisitedList({ placeList }) { co.. 2021. 12. 15. 이전 1 2 3 4 5 6 7 다음 반응형
