Chapter6. Header Component

노마드 코더의 InstaClone Header Component 편이 끝났습니다. 이 부분에서 중요하다고 개인적으로 생각하는 부분을 정리하는 시간을 가져보겠습니다. 이번 헤더를 구성하는 시간에서는 제 개인적인 생각으로는 React Router에 대한 이해가 상당히 필요했고 또한 이번 클론코딩을 진행하면서 Router에 대한 개념이 확실하게 잡히는 시간이었습니다.

그럼 먼저 여러 폴더들을 구성하는 기본적인 방법부터 시작하겠습니다.

Icon 정리

이 부분은 다들 알고 계시리라고 생각이 됩니다. 기본적으로 Expo의 Vector Icon이나 Open Source 아이콘을 사용하기 위해서는 @expo/vector-icon과 같은 사이트에 접속하시어 url을 연결하는 작업을 해야합니다. 그러나 Screen.js 안에서 url을 가져오면 코드가 지저분해질 뿐더러 다른 아이콘으로 변경하고 싶을 때 해당 스크린을 들어가서 일일이 변경해야한다는 불편함 때문에 Icon 만 관리하는 페이지를 따로 만드는 것은 아주 기본적인 상식입니다. 다만 이렇게 한번 더 정리하고 가는 것은 노마드 코더가 다루는 방식에 대해 얘기하고 싶어서입니다.

src/Component/Icon.js

import React from "react";

export const Compass = () => ()
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 5.999l-5.621 2.986c-.899-.104-1.806.191-2.474.859-.662.663-.95 1.561-.862 2.428l-3.043 5.728 5.724-3.042c.884.089 1.772-.205 2.432-.865.634-.634.969-1.524.859-2.473l2.985-5.621zm-5.97 7.22c-.689 0-1.25-.559-1.25-1.249-.001-.691.559-1.251 1.25-1.25.69 0 1.25.56 1.25 1.25-.001.689-.56 1.249-1.25 1.249z" />
  </svg>
);

보통 저는 아이콘의 주소만 따로 가져오는 방법을 택했습니다. 왜냐하면 작업을 할 때, 디자이너가 width와 height가 기본적으로 24px 또는 48px로 정리된 파일로 만들어 주었기에 큰 불편함을 느끼지 못하였습니다. 또한 Screen에 따라서 아이콘이 가끔은 다르게 표시하고 싶을 때가 있어 InLine 방식으로 스타일을 선언하기도 하였습니다.

노마드 코더는 위의 코드와 같이 아이콘 링크와 더불어 기본적인 스타일까지 한번에 지정하여 아이콘을 관리하였습니다. 이러한 방법이 아주 사소한 습관 차이지만 나중에 코드를 수정할 때에는 더 좋을 것 같다는 생각이 들어 한번 더 되짚어보자는 의미에서 이렇게 기술하였고 또한 svg 파일로 작업하는 것이 더 효율적임을 다시 한번 상기하게 되었습니다.

React-Router-Dom

가장 중요하다고 서두에서 말씀 드렸던 React Router에 대해 개념을 정리하고자 합니다. 앞선 글에서 Router에 대한 개념은 특정 주소로 유저가 접근하였을 때 URL을 Client 단에서 지정하여 보내줄 수 있도록 해주는 라이브러리라 설명을 드린 적이 있습니다. 여기서 추가적으로 HashRouter에 대해 보충 설명을 하고자 합니다.

HashRouter란 react-router-dom은 단일 페이지 앱의 내비게이션 이력을 관리할 수 있는 다양한 방법을 제공한다. HashRouter는 클라이언트를 위해 설계된 라우터다. Hash(#)는 앵커링크를 정의할 때 쓰였다. 주소창의 현재 페이지 경로 뒤에 # 식별자를 입력하면 브라우저는 서버 요청을 보내지 않고, 현재 페이지에서 식별자에 해당하는 id 애트리뷰트가 있는 엘리먼트를 찾아서 그 엘리먼트의 위치를 화면에 보여준다.

라고 합니다.

노마드코더가 다루는 방식 중에 초기에는

// Components/Routes.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import A from "../Screens/A";
import B from "../Screens/B";
import C from "../Screens/C";

export default () => (
  <Router>
    <Route path="/A" component={A} />
    <Route path="/B" component={C} />
    <Route path="/C" component={C} />
  </Router>
)

로 다루었습니다. 안에 와 를 통해 경로를 설정하고 해당 컴포넌트를 임포하여 라우터의 기능으로 해당 스크린으로 이동하였습니다. 강의를 진행하다보면 HeaderLink라는 컴포넌트를 새롭게 만드는 모습을 볼 수가 있습니다. 이는 React-Router-Dom의 Link 기능을 다시 재정의 하여 사용하는 것으로 일반적인 Link의 기능은 다음과 같습니다.

Link는 content를 유저가 눌렀을 때 to 속성으로 지정된 url로 이동합니다.

우선 위의 코드를 바꾸어 보면

import React from 'react';
import { Link, withRouter } from "react-router-dom";
import A from "../Screens/A";

function Header (({ history }) {
  return (
  <Header>
    <HeaderLink to="/A" />
  </Header>
)};

export default withRouter(Header);

우선 HeaderLink는 Link라고 생각하시면 됩니다. 노마드 코더가 재정의한 기능이므로 여기서는 그냥 진행하도록 하겠습니다. Link to는 해당 경로로 이동시켜주는 기능을 합니다. Link to는 새로고침하지 않고 이동하여 속도가 빠른 이점이 있습니다. 또한 Header는 withRouter로 감싸주어 export 하게 됩니다. 이렇게 하는 이유는 withRouter가 history.push로 onChange와 value 값을 전달하기에 그렇습니다.

인스타 클론에서 이렇게 하는 이유는 Search에서 키워드랑 같이 이동하고 싶기에(인스타에서 해쉬태그를 검색하는 기능) 해당 스크린으로 이동하여도 키워드 값을 같이 전달하려고 하는 기능입니다. Search 칸에서 키워드를 입력하고 Enter를 누르면 onSubmit이 동작하고 키워드와 같이 Link to 가 지정한 경로로 이동하게 됩니다. history는 withRouter와 함께 이동하였기에 존재하지 않습니다.

다만 주의사항으로는 가끔 Route에서 여러가지가 동시에 보일 때가 있습니다. 이렇 때는 로만 감싸지 말고 로 감싸 주면 됩니다. Swtich는 하나의 Route만 렌더링 해주는 기능을 가지고 있습니다. 여기까지 구성한 화면입니다.

react-apollo-hooks Error

마지막으로 많이 고민하셨을 Error인 TypeError: Cannot read property 'me' of undefined로 고민을 많이 하셨을 것이라고 생각합니다. react-apollo-hooks가 Defricated 되면서 나타나는 버그입니다.

첫번째 해답으로는 이제는 npm install @apollo/react-hooks 로 설치하시고 import { useQuery } from '@apollo/react-hooks'; 진행하시면 됩니다. 바뀐 부분에 대한 예제는 Apollo-Hooks여기로 들어가시면 알 수 있습니다.

두번째 방법으로 새로이 적용된 Apollo의 @apollo/react-hooks 사용법이 조금 달라저 다른 여러 Error를 띄우는 것이 걱정이 되시어 Defricated 된 react-apollo-hooks를 그대로 쓰고 싶은 경우에는 노마드 코더의 코드
src/Component/Header.js에서

// const { data } =useQuery(ME); 대체
const { data, loading } = useQuery(ME); // loading 추가
if (loading) return "";

이렇게 대체하여 주시면 됩니다. useQuery에서 loading은 boolean 값을 결과로 받고 요청이 진행중인지를 나태내는 값입니다. 여러번 console을 찍어본 결과 위와 같이 loading한 이후 return을 하지 않으면 { data } 값에서 me를 찾지 못하였습니다.

마지막 세번째 방법으로 데이터를 추출하지 않고 변수를 설정하여 const data = useQuery(ME)를 하면 또한 동작은 잘 됩니다. 이 방법은 data 변수를 직접 선언하여 ME에 해당하는 result들을 모두 받아오는 방식이기에 과도한 network의 사용성은 있으나 테스트 하기에는 또한 방법이 될 수 있습니다.

이로써 노마드 코더에서 업데이트 된 함수의 사용 때문에 벌어지는 Header 편에서 에러를 잡아보았습니다.

참고자료

• academy.nomadcoders.InstagramClonCoding