서론

• 프로젝트에서 네비게이션바를 맡았다. 로그인을 성공하면 '로그인, 회원가입' 버튼이 유저의 닉네임과 로그아웃 버튼으로 변경이 되어야한다.
  
  

본론

Nav 로그인 전 이미지

Login.js

  const loginFetch = e => {
    e.preventDefault();

    fetch(`${BASE_URL}users/signin`, {
      method: 'POST',
      body: JSON.stringify({
        account: loginId,
        password: loginPw,
      }),
    })
      .then(res => res.json())
      .then(result =>
        sessionStorage.setItem('token', result.SUCCESS.ACCESS_TOKEN) // 세션스토리지에 토큰 저장
      )
      .then(() => navigate('/'));
  };

• 일단 로그인이 성공하면 백엔드에서 토큰을 전달받게 되고 전달받은 토큰을 세션스토리지에 저장하게 된다.
  
  

UserInfo.js

      {sessionStorage.getItem('token') ? (
        <li>
          <span className="userName">리치</span>
          <span className="userPoint">
            <p className="pointImage">P</p>
            1,000,000
          </span>
          <span className="txtBar" />
        </li>
      ) : (
        <li>
          <Link to="/login" className="navLogIn">
            로그인
          </Link>
          <span className="txtBar" />
        </li>
      )}

• 로그인이 성공적으로 되면 페이지 이동을 하기 때문에 자동적으로 렌더링을 할 것이라 생각했고 위의 코드처럼 조건부 렌더링을 해놓으면 세션스토리지의 토큰 여부에 따라 렌더링이 될 줄 알았는데.. 맘처럼 쉽게 되지 않았다.
• 그러다가 우연히 새로고침을 하면 작동한다는 사실을 알고 야메로 새로고침 관련 코드를 넣었다. 그런데..

좋지 않습니다!

• 멘토 연욱님께서 친절하게 이런 방식의 접근은 좋지 않다고 말씀해주셔서 다른 방법을 찾아보았지만 도저히 찾을 수가 없었다.

힌트!

• 그래서 연욱님께 PR을 작성하며 하단에 도움을 요청했고 어느정도 힌트를 주셨다.

응?

• useLocation에서 힌트를 얻어 이것저것 해보다가 언제부턴가 동작이 제대로 되는 것을 발견했다.
• 왜 동작을 하게 되었는지는 모르겠지만 하나하나 정리를 해가며 알아보려고 했는데 이 코드만 삭제하면 동작하지 않는 것을 발견했다.

 const location = useLocation();

• 이녀석은 대체 왜..?

React 동작 원리

• useLocation에서 navigate를 통해 페이지를 이동하며 state로 prop을 보내는 것을 이용해서 nav를 변경시킬 수 있는 줄 알았는데 그것은 이동한 페이지에 한해서만 동작하는 것이었고 정답은 아니었다.
• 연욱님께 가서 다시 여쭤본 결과 react가 다시 렌더링 되는 원리부터 말씀해주셨는데 react에서 재렌더링이 되는 순간은 state와 props가 변할 때 라는 것.
• useLocation은 현재 url을 나타내는 객체를 반환하는데 이렇게 호출 하는 것 만으로도 prop의 변화를 줄 수 있기 때문에 재렌더링되는 효과를 볼 수 있다 말씀해주셨다.
• 현재의 상황에서는 이정도로만 끝내는 것이 좋다고 해주셨다. (2주차에서는 절대 안되겠지만)
  
  

결론

Nav 로그인 후

• useLocation을 이용해서 로그인을 성공하면 원하는대로 변경이 되게끔 했다.
• 곧 2주차가 시작 될텐데 그때도 Nav를 맡게된다면 라이브러리나 전역변수를 사용해서 구현하게끔 해봐야겠다.