[다락재쉼터] Gatsby with Redux

Redux를 굳이 안쓰고 contextAPI로 해결해도 될것 같으나, 학습의 취지로 Redux를 한번 사용해보고자 한다. 회사에서 여러번 엎긴했지만 세팅을 맡아서 한적은 있어서 가벼운 마음으로 튜토리얼로 이번엔 공부를 하고, 추후에 심화 학습을 하려고 한다. 

 

아래는 Redux 공식문서이다. 

redux.js.org/tutorials/essentials/part-1-overview-concepts

Redux Essentials, Part 1: Redux Overview and Concepts | Redux

 

 

상태관리가 필요했던 이유

지도처리와 관련해서 필요한 script가 두개가 있는데, 하나는 설치할때 한번만 실행되고, 다른 하나는 처음 설치할때 실행되고, 그다음에는 로드할때마다 실행되는 스크립트이다. 

 

문제가 발생했던 것은 아래와 같이 페이지내에서만 useState로 상태를 관리하면 다른 페이지로 갔다가 돌아왔을때 첫번째(설치하는 script)가 실행이 되었는지 안되었는지 확인하는게 난감해서 페이지 전체에서 상태가 관리되는 것이 필요했다. 

 

const Map = ({
  isMapInstalled,
  dispatch,
}: {
  isMapInstalled: string;
  dispatch: any;
}) => {
  console.log(isMapInstalled);
  // <!-- 3. 실행 스크립트 -->
  const executeScript = () => {
    // alert("executeScript");
    const scriptTag = document.createElement("script");
    const inlineScript = document.createTextNode(`new daum.roughmap.Lander({
    	"timestamp" : "1617690117752",
    	"key" : "258ih",
    	"mapWidth" : "640",
    	"mapHeight" : "360"
    }).render();`);
    scriptTag.appendChild(inlineScript);
    document.body.appendChild(scriptTag);
  };

  // <!-- 2. 설치 스크립트 * 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다. -->
  // document.write 문제가 발생해서 해당 파일을 직접 가져온다음 수정했음
  const InstallScript = () => {
    (function () {
      // alert("installScript");
      var c = location.protocol == "https:" ? "https:" : "http:";
      var a = "16137cec";

      if (window.daum && window.daum.roughmap && window.daum.roughmap.cdn) {
        return;
      }
      window.daum = window.daum || {};
      window.daum.roughmap = {
        cdn: a,
        URL_KEY_DATA_LOAD_PRE: c + "//t1.daumcdn.net/roughmap/",
        url_protocal: c,
      };
      var b =
        c +
        "//t1.daumcdn.net/kakaomapweb/place/jscss/roughmap/" +
        a +
        "/roughmapLander.js";

      // document.write -> doumnet.body.append로 수정
      const scriptTag = document.createElement("script");
      scriptTag.src = b;
      document.body.append(scriptTag);
      scriptTag.onload = () => {
        // 처음 스크립트를 실행할때 store에서 상태를 업데이트 해주고, 지도를 그린다
        dispatch(toggleMap(true));
        executeScript();
      };
    })();
  };

  useEffect(() => {
    if (!isMapInstalled) {
      // 이제 다른 페이지를 갔다와도 지도관련 설정이 되었는지 기억을 하고 있어서 암것두 설치 안되잇을때 설치를 실행한다
      InstallScript();
    } else {
      // 설치되어있으면 지도를 실행하기만 한다
      executeScript();
    }
  }, []);

  return (
    <MapStyle>
      {/* <!-- 1. 지도 노드 --> */}
      <div
        id="daumRoughmapContainer1617690117752"
        className="root_daum_roughmap root_daum_roughmap_landing"
      ></div>
    </MapStyle>
  );
};

export default connect(
  // @ts-ignore
  // state를 가져온다
  (state) => ({ isMapInstalled: state.app.isMapInstalled }),
  null
)(Map);

 

 

후기

ContextAPI와 reducer를 사용해본 후에 redux를 보니까, 개념자체가 엄청 어렵지는 않다는 생각도 든다. 그래서 이번엔 간단하게 redux를 맞보긴 했지만 큰 이유가 없다면 minimal하게 contextAPI를 위주로 사용해도 괜찮지 않을까 생각이든다. 

 

그리고 작년에만해도 redux가 잘이해가 안되었는데, contextAPI를 위주로 사용했던 토이프로젝트 덕분인지, 사소한 용법은 달라도 생각의 흐름이 비슷한 도구로 먼저 공부를 한후에 더 어려운걸 다루면 진입장벽이 좀 낮아진다는 생각도 든다. 

 

그리고 한동안 react를 안했다보니 useState외에 전역상태관리가 왜 필요한가? 하는 생각도 들었는데 페이지별로 이동할때 필요하겠구나, 싶다. 앞으로 더 하다보면 상태관리의 필요성에 대해서 더 깨닫지 않을까 생각한다. 

 

 

 

 

 

 

참고 자료

www.freecodecamp.org/news/how-to-get-started-with-gatsby-2-and-redux-ae1c543571ca/

How to get started with Gatsby 2 and Redux