[React] today i learned 7/10: TypeScript + React

오늘 모각코 시간에는, 타입스크립트를 사용한 리액트 프로젝트에서 채널 만드는 모달과 사용자 초대 모달, 그리고 라우터 주소설계에 대해 공부했다.

사실 이 부분 자체는.. 이전 포스팅 내용과 막 크게 차이가 나진 않는다. 그나마 차이가 있는 점은, 어제 올린 포스팅에서는 껍데기를 페이지에 부여했다면 이번에는 껍데기를 포함한 전체를 컴포넌트안에 넣고, 파라미터를 담은 채로만 페이지에 불러왔다는 것이다.

이 부분 또한 전체 페이지에서 내가 다룰 부분만 가져왔다.

1. 채널 모달 만들기 ( &라우터 주소 설계 )

1-1. 컴포넌트

시작하기에 앞서 이전 포스팅들에서 다룬 내용은 전부 생략한다.

1. useParams Hook

useParams Hook은, 이후 쿼리문의 형태로 사용하는 것을 수월하게 해 주는 Hook이다. useParams를 이용해서 workspace와 channel를 파라미터로 쓸 수 있도록 해주는 것이다. ( 여기서 꺾쇠 내부의 형태는, 타입스크립트에서만 사용되는 타이핑이다. )

 

2. IUser

IUser를 보면 무슨 뜻인지 이해가 안될 수 있는데, 이 부분은, @typings/db에서 가져왔다. 이름만 봐도 알겠지만, @typings/db 내부에는 export되는 인터페이스들이 있다. 즉 useSWR의 제네릭으로 IUser 인터페이스를 가져온 것.

export interface IUser {
  id: number;
  nickname: string;
  email: string;
  Workspaces: IWorkspace[];
}

export interface IWorkspace {
  id: number;
  name: string;
  url: string;
  OwnerId: number;
}

IUser 인터페이스에는 id, 닉네임, 이메일과 워크스페이스가 들어간다. 자세하게 쓰면 너무 길어지므로 생략.. 이부분은 서버와의 API통신과도 관련이 있기 때문이다. 나는 프론트쪽만 다루기 때문에 그냥 이런 게 있다 생각하고 넘어갔다.

어쨌든, 중요한 건 /api/users와 API통신을 한다는 것이다. 이 부분도 useSWR 포스팅에서 다뤘으므로 넘어간다. dedupingInterval까지도 다뤘다.

 

3. 30~34행

data와 revalidate에 대해 각각 변수를 부여하고,마찬가지로 useSWR을 사용하였는데, 여기서는 삼항 연산자가 등장한다. A ? B : C 의 형태로 쓰이고,  A가 맞다면 B를, 아니면 C를 한다는 뜻이다. 여기서는, userData가 있을 경우 즉 로그인이 되어있을 경우 API를 불러오고(여기서 API를 불러온다는 건, workspace 내부의 채널들을 전부 보여준다는 뜻), 안되어있을 경우 null을 리턴하겠다는 것이다. null을 리턴한다는 건 결국 아무것도 보여주지 않는다는 것이다. 페이지에도 있지만, null 상태일 경우 무조건 로그인 페이지로 리다이렉트 된다.

 

4. onCreateChannel useCallback Hook 사용

여기는, 이전에 포스팅했던 내용들과 다르지 않으므로 넘어가는데, then만 보자.

.then(() => {
  setShowCreateChannelModal(false);
  revalidateChannel();
  setNewChannel('');
})

일단 첫번째와 세번째는 axios 요청이 성공했을 경우 모달을 비워주고 값도 초기화해준다는 뜻이다. revalidateChannel()은 useSWR의 파라미터로도 확인할 수 있지만, 결국 채널 리스트를 다시 불러온다는 것이다. 이는 useSWR의 기능과 궤를 같이 한다.

 

5. return

return 부분을 보면, Modal 컴포넌트를 import 해 와서 사용했다. Modal 컴포넌트는 이전 포스팅의 최상단에서 확인할 수 있다. 이외의 부분은 다른 부분과 크게 다르지 않으므로 넘어간다.

 

6. 결과

사실 저.. Sleact를 누르면 나오는 모달도 원래는 포스팅 해야되지만, 나중에 그냥 한꺼번에 해야겠다..

1-2. 페이지

오히려 여기는 사실 설명할 게 별로 없다. CreateChannelModal 컴포넌트는 1-1에서 다룬 컴포넌트이다. 

• show: 보이게 하는 설정, useState 값에 기반함. 기본값 false
• onCloseModal: 모달 여닫기, useCallback에 기반함
• setShowCreateChannelModal: 이 값은 showCreateChannelModal의 값에 의존함

이것들은 다 컴포넌트에서 설정되어있는 인터페이스 내부 속성들이다.

 

1-3. 라우터 주소 설계

App.tsx

const App: FC = () => {
  return (
    <Switch>
      <Redirect exact path="/" to="/login" />
      <Route path="/login" component={Login} />
      <Route path="/signup" component={Signup} />
      <Route path="/workspace/:workspace" component={Workspace} />
    </Switch>
  );
};

이전 포스팅들에서 다뤘던 Route path와는 좀 다른 것을 알 수 있다. 이렇게, workspace/:workspace로 바꾸게 되면, :workspace 자리에 아무 값이나 들어갈 수가 있게 된다.

그렇다면, 이 sleact라는 값은 어디서 오게 된 걸까? 그건 바로 로그인에 성공했을 때 리다이렉트되는 URL을 변경하였기 때문에 여기서부터 오는 것이다.

  if (data) {
    return <Redirect to="/workspace/sleact/channel" />;
  }

원래는 이렇게 설정해두지는 않았었는데, 이 라우터 주소 설계를 하면서 설정하였다. 기본적으로 sleact라는 워크스페이스에 들어가게끔 설정을 해둔 것이다. 원래는 sleact가 빠져 있었다.

http://localhost:3090/workspace/(워크스페이스명)/채널/(채널명) 

이런 식으로 이제 바꿀 수 있는 것이다. 가독성이 훨씬 좋아졌다.이런식으로 라우터 주소 설계를 하면, URL만 보더라도 내가 어느 워크스페이스의 어느 채널에 있는지 명확하게 확인할 수 있게 된다!