[Day 48] React Exercise(2)

리액트 실습

홈(Index) 페이지에서 로그아웃 시(홈 페이지로 다시 리리다이렉트 되면서 상태가 안바뀌니까) 헤더가 리렌더링 되지 않는 문제 해결법

강제로 상태를 초기화하고 싶은 순간에 다른 키를 넣어주면 된다.

헤더 컴포넌트의 키 값을 바꿔준다.

username을 Header 컴포넌트의 키 값으로 사용한다면, 로그인 된 상태에서는 계속 같은 키 값이 유지되다가, 로그아웃 하는 순간 username이 null로 바뀌면서 리렌더링 된다.

// 인덱스페이지에서 로그아웃 시에도 헤더를 유지하기 위해 키를 넘겨준다.
// 키를 이용해서 강제로 상태 초기화해준다.
export default function Header(props) {
  return (
    <UserConsumer>
      {value => <HeaderView key={value.username} {...value} />}
    </UserConsumer>
  );
}

상태 없이 리다이렉트 시키는 방법

리액트 함수를 이용해서 주소 표시줄의 상태를 강제로 바꿔준다.

리액트 라우터에는 브라우저의 history 객체와 비슷하게 쓸 수 있는 history 객체가 존재한다.

리액트 라우터의 history 객체의 push 또는 replace 메소드를 이용해서 주소 표시줄의 상태를 강제로 바꿔줄 수 있다. (즉, 상태를 바꾸고 redirect 하는 것과 같은 효과를 낼 수 있다.)

HOC(withRouter)를 이용해서 match, location, history를 넘겨줄 수 있다. (react-router-dom에 있는 Consumer를 둘러주는 효과를 갖는다.)

import { withRouter } from 'react-router-dom';

export default withRouter(withUser(HeaderView));

// withRouter를 사용하는 view에서
const {history} = this.props

<button onClick={() => {history.push('/')}}

카테고리 전환

상태를 초기화하거나 componentDidMount()를 다시 호출하고 싶다면 key를 바꿔줘야 한다.

라우팅을 이용한 애플리케이션 제작 시 주의할점

개발 서버는 어떤 경로를 입력하더라도 리액트 앱을 응답하도록 만들어져 있다.

배포 서버(netlify 등등…)는 파일 저장소에 불과하기 때문에, 우리가 설계한 주소를 입력했을 때 not found를 띄우는 등의 문제가 발생할 수 있다.

해결법

Create React App - Netlify Deploy Setting

public/_redirects 파일을 만들고

/*  /index.html  200   <-- 이렇게 적어준다.

위의 코드는 어떤 경로로 들어오더라도 index.html을 200 상태로 응답하라는 의미이다.

Create-React-App과 react-router를 사용했을 경우 어떠한 서버에라도 이러한 의미의 작업이 필요하다는 것을 BE 개발자에게 요청할 줄 알아야 한다.

이미지 사용법

1. public 폴더에 이미지 넣고 사용 —> 잘 안쓰는 방법
2. adding-images-fonts-and-files —> 이 방법을 쓰도록 하자!