[인스타그램클론코딩] #6.2 Header Logic part Two

안녕하세요 강정호입니다

 

오늘은 Header 개발을 끝내보겠습니다.

 

[개발 내용]

로그인 한 사용자의 userName을 가져와서 localhost:3000/#/wwwkang8 이런식으로 라우팅 주소 끝에 사용자의 유저명이 조립되어 호출될 수 있도록 개발 하는 것입니다.

 

[소스코드]

Header.js

export default withRouter(({ history }) => {
  const search = useInput("");
  const { data } = useQuery(ME);

  // useQuery(ME) 로 조회한 me 데이터 출력.
  // undefined 일 때는 데이터가 없기 때문에 data.me가 오류 발생
  if(data !== undefined){
      console.log(data.me);
  }

  const onSearchSubmit = (e) => {
    e.preventDefault();
    history.push(`/search?term=${search.value}`);
  };
  return (
    <Header>
      <HeaderWrapper>
        <HeaderColumn>
          <Link to="/">
            <Logo />
          </Link>
        </HeaderColumn>
        <HeaderColumn>
          <form onSubmit={onSearchSubmit}>
            <SearchInput {...search} placeholder="Search" />
          </form>
        </HeaderColumn>
        <HeaderColumn>
          <HeaderLink to="/explore">
            <Compass />
          </HeaderLink>
          <HeaderLink to="/notifications">
            <HeartEmpty />
          </HeaderLink>
          { !(data !== undefined && data.me) ? 
            <HeaderLink to="/#">
              <User />
            </HeaderLink>
            :
            <HeaderLink to={data.me.userName}>
              <User />
            </HeaderLink>
          }
        </HeaderColumn>
      </HeaderWrapper>
    </Header>
  );
});

확인해야 할 부분은  <HeaderLink to={data.me.userName}> 부분입니다.

userQuery(ME) 로 조회한 데이터를 받아와서 존재 유무에 따라서 to="/#" 로 라우팅하거나, to={data.me.userName} 으로 라우팅합니다.

이렇게 개발한 것의 목적은 현재 사용하는 유저의 프로필로 이동하기 위해 라우팅을 이와 같이 한 것입니다.