✏프로젝트 도중 공부한 내용✏:

✔useMemo를 사용한 렌더링 성능 최적화

원래 코드:

const placeArray =()=>
      roomData
        ? roomData.accommodationList.map((room) => [
            room.latitude,
            room.longitude,
            room.charge,
          ])
        : [[0, 0, 0]]
  );

useEffect(() => {
					  .
						.
						.
  }, [placeArray]);

상황: <RoomMap /> 컴포넌트 안에 placeArray함수를 선언함. RoomMap컴포넌트가 리렌더링 될 때마다 다시 재생성되기 때문에(새 메모리 주소에 할당) 무조건 useEffect가 실행되게 된다.

바뀐 코드:

const placeArray = useMemo(
    () =>
      roomData
        ? roomData.accommodationList.map((room) => [
            room.latitude,
            room.longitude,
            room.charge,
          ])
        : [[0, 0, 0]],
    [roomData]
  );

useMemo로 placeArray를 감싸고, useMemo의 의존배열에 roomData를 넣어(조건으로 함수에 변화가 생긴지 확인함) 룸데이터가 변하지 않으면 useEffect가 값을 그대로 갖다줄것이고, 의미없는 렌더링을 방지하게된다.

✔ Modal창 관련 문제들

☝이벤트 핸들링

1. useRef를 사용한 방법

모달을 감싸는 div에 useRef를 걸고, useEffect 안에서 이벤트 관련 함수를 하나 만들고, document객체 에다가 이벤트를 걸어두었다. 즉, 사용자가 다른 창을 눌렀을 때 선언해둔 modalOff 함수를 실행시키도록 했다. e.target을 사용하여 modalElement의 current를 탐색하여 클릭한 타겟 요소를 포함하고 있는지 체크를 하였고, 포함한다면 모달을 끄도록 설정하였다.