ukss

보통 HTML에서 id를 이용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다.

이를 바롤 ref(reference의 줄임말) 개념입니다.

리액트 컴포넌트 안에서는 id를 사용하면 안될까?

-> 리액트 컴포넌트 안에서도 id를 사용할 수는  있습니다. 그러나 권장하지 않습니다.

이유는 리액트 컴포넌트의 경우 여러 번 사용한다고 하면, 유일해야 하는 id의 특성에 위반하기 때문입니다.

다른 라이브러리나 프레임워크와 함께 id를 사용해야 할 경우에는 id 뒷부분에 추가 텍스트를 붙여 중복을 방지해야 합니다.

그렇다면, ref는 어떤 상황에서 사용해야 할까?

-> DOM을 꼭 직접적으로 건드려야 할 때 입니다.

최근 프로젝트 중에 Webpack과 Babel에 대해 이야기를 많이 들었습니다. 필자는 프론트엔드에 대해서 비기너이고, 보통 프로젝트를 구성할때 CRA를 통해서 구성하는데, 이때는 웹팩을 건드는 일이 거의 없는 것 같습니다.

이번에는 CRA가 아닌 Webpack과 Babel을 통하여 React를 개발 환경을 구성해보겠습니다.

참고 자료 : https://berkbach.com/%EC%9B%B9%ED%8C%A9-webpack-%EA%B3%BC-%EB%B0%94%EB%B2%A8-babel-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-fb87d0027766

Webpack, Babel, React 개발 환경 구성에 대한 가이드 및 설명에 대한 부분의 위의 링크를 참고하였고, 매우 설명이 잘 되어 있습니다.

추가로 저는 js 확장자가 아닌 jsx 확장자를 이용하여 파일을 생성하였는데, 위의 가이드로만으로는 jsx 파일을 로드하지 못합니다.

이러한 문제에 대해서 찾아보니 webpack.config.js 파일 내에서 resolve.extensions에 대한 속성을 추가해 주면 됩니다.

// webpack.config.js

module.exports = {
	...
    resolve: {
      // 5
      extensions: [".js", ".jsx", ".ts", ".tsx"],
    },
    module: {
      ...
    }
}

웹팩 공식 문서에 자세한 내용을 확인 할 수 잇습니다.

https://webpack.kr/configuration/resolve#resolveextensions

1부에 이어, 2부에서는 Map Component를 그리고, 지도가 표출되도록 하겠습니다.

이에 앞서 1부에서 CRA를 통해 설치 된 리액트 버전이 v18인데 v17로 다운그레이드 하겠습니다.

* 참고 자료

https://homubee.tistory.com/36

1부에서 설치되지 않았던 @mui/styles를 설치하겠습니다.

D:\workspace_vscode\react_google_map> npm install @mui/styles

/src/component/Map 하위에 styles.js 파일을 추가하고 여기에 Map.js의 css를 구성하겠습니다.

// styles.js

import { makeStyles } from "@mui/styles";

export default makeStyles(() => ({
  paper: {
    padding: "10px",
    display: "flex",
    flexDirection: "columns",
    justifyContent: "center",
    width: "100px",
  },
  mapContainer: {
    height: "85vh",
    width: "100%",
  },
}));

// Map.js

import React from "react";
import GoogleMapReact from "google-map-react";

import useStyle from "./styles";

const Map = () => {
  const classes = useStyle();
  const cordinates = { lat: 0, lng: 0 };
  return (
    <div className={classes.mapContainer}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "" }}
        defaultCenter={cordinates}
        center={cordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={""}
        onChange={""}
        onChildClick={""}
      ></GoogleMapReact>
    </div>
  );
};

export default Map;

google-map-react 라이브러리를 import 하고, 위와 같이 작성해줍니다.

bootstrapURLKeys 부분의 key 값에 대해서는 google project를 만들어 key값을 받아와야 합니다.

(발급방법은 자세히 설명 된 타글을 링크해놓겠습니다.)

* 참고자료

https://velog.io/@sukqbe/API-%EA%B5%AC%EA%B8%80-%EC%A7%80%EB%8F%84Google-Map-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-API-Key-%EB%B0%9C%EA%B8%89%EB%B0%9B%EA%B8%B0-qumur49u

위와같이 작성 후 프로젝트를 실행하면 아래와 같이 화면이 뜹니다.

해당 알림창은 우리가 아직 key값을 부여하지 않았기에 뜨는 내용이며, 지도를 최소로 축소하면 다음과 같이 지도가 정상적으로 뜨고있음을 알 수 있습니다.

* 참고 자료

https://www.npmjs.com/package/google-map-react

https://velog.io/@jhs000123/%EB%A6%AC%EC%95%A1%ED%8A%B8-googlemap%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8

1. create-react-app을 통해 기본적은 react 프로젝트를 생성합니다.

D:\workspace_vscode> npx create-react-app react_google_map

2. 생성 된 프로젝트가 정상적으로 실행되는지 확인합니다.

D:\workspace_vscode> npm run start

3. 불필요한 코드를 정리합니다.

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

// App.js

import React from "react";

function App() {
  return <div>app.js</div>;
}

export default App;

4. /src/component/Map 패키지 구조를 생성하고 Map.js, index.js를 생성합니다.

// /src/component/Map/index.jsp

export { default } from "./Map";

// /src/component/Map/Map.js

import React from "react";

const Map = () => {
  return <div>Map</div>;
};

export default Map;

5. App.js에서 Map.js를 import합니다.

// App.js

import React from "react";
import Map from "./component/Map";

function App() {
  return (
    <div>
      <Map />
    </div>
  );
}

export default App;

6. 이제 프로젝트를 진행함에 있어 필요한 항목들을 설치합니다.

D:\workspace_vscode\react_google_map> npm install @mui/material @mui/icons-material axios google-map-react

@mui/material, @mui/icons-material : 자주 사용되는 기능, 디자인을 component/API 형태로 제공하여, React 개발시에 유용한 라이브러리 입니다.

axios : 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 입니다.

google-map-react : 구글 지도 검색창 구현을 위한 라이브러리 입니다.

7. package.json에서 확인해야 할 사항

현재 npx를 통해 설치 된 react 버전이 v18버전인데, 추후 해당 버전과 google-map-react와의 이슈로 인해 다운그레이드를 할 예정입니다.(v17) 이에따라 React v17용으로 index.js의 변경이 있을 예정입니다.