문제

// useEffect + AddEventListener 대체 함수
  const mouseDownHandler = (event: React.MouseEvent<HTMLCanvasElement>) => {
    const mouseDown = new Map([
      ["pen", startPaint(event)],
      ["eraser", startErase(event)],
    ]);

    return mouseDown.get(mode);
  };

  const mouseMoveHandler = (event: React.MouseEvent<HTMLCanvasElement>) => {
    const mouseMove = new Map([
      ["pen", paint(event)],
      ["eraser", erase(event)],
    ]);
    return console.log("mouseMove", mouseMove.get(mode));
  };

  const mouseUpHandler = () => {
    const mouseUp = new Map([
      ["pen", exitPaint()],
      ["eraser", exitErase()],
    ]);
    return mouseUp.get(mode);
  };

  const mouseLeaveHandler = () => {
    const mouseLeave = new Map([
      ["pen", exitPaint()],
      ["eraser", exitErase()],
    ]);
    return mouseLeave.get(mode);
  };

그리기 관련 함수들에 if와 else를 사용하는 대신 Map 객체를 사용하여 그리기 모드별 동작을 처리해주고싶은데, Map안의 함수를 실행시키지 못함.

원인

Map 객체에 대한 이해도 부족으로 인해 함수 실행방법을 모름.

즉시실행함수로 적어줘야하나? 싶었지만 아닌것같음.

해결

정답은 항상 공식문서에 있다. 공식문서를 읽은 후에 예제를 실행시킬 수 있는 곳에서 여러가지 시도 해봄.

map.get(키값) () 해주면 실행이 됨.

여러 개의 함수를 실행시켜주고 싶을 경우, Map의 value에 arrow function으로 작성해주면 됨.

그러나? 프로젝트 파일에서는 여전히 실행이 되지 않음.

공식문서 내의 결과콘솔창에 undefined가 왜 뜨지? 🤔 라는 의문점이 생김.

그렇다면 이 undefined를 제외시켜주면 원하는 함수를 바로 실행시킬 수 있다고 생각하게 됨.

따라서 만약 존재한다면 함수를 실행시켜주라는 로직으로 map안의 함수를 실행시키는 데 성공함.

예) mousefunc && mousefunc();

// useEffect + AddEventListener 대체 함수
  const mouseDownHandler = (event: React.MouseEvent<HTMLCanvasElement>) => {
    const mouseDown = new Map([
      ["pen", () => startPaint(event)],
      ["eraser", () => startErase(event)],
    ]);
    const mousefunc = mouseDown.get(mode);

    return mousefunc && mousefunc();
  };

  const mouseMoveHandler = (event: React.MouseEvent<HTMLCanvasElement>) => {
    const mouseMove = new Map([
      ["pen", () => paint(event)],
      ["eraser", () => erase(event)],
    ]);
    const mousefunc = mouseMove.get(mode);

    return mousefunc && mousefunc();
  };

  const mouseUpHandler = () => {
    const mouseUp = new Map([
      ["pen", () => exitPaint()],
      ["eraser", () => exitErase()],
    ]);
    const mousefunc = mouseUp.get(mode);

    return mousefunc && mousefunc();
  };

  const mouseLeaveHandler = () => {
    const mouseLeave = new Map([
      ["pen", () => exitPaint()],
      ["eraser", () => exitErase()],
    ]);
    const mousefunc = mouseLeave.get(mode);

    return mousefunc && mousefunc();
  };