공부기록

setInterval을 이용해 1초마다 시간을 갱신해서 출력하는 코드. 

재사용이 불가능하다.

다음과 같이 재사용 가능하게끔 컴포넌트를 분리시키자.

이와 같은 Comment 컴포넌트가 있다. 컴포넌트 내에서 쓰인 UserInfo나 Avatar는 재사용되기 힘들다.

다음과 같이 작게 쪼개보자

먼저 Avatar 컴포넌트부터 분리해냈다.

좀 더 일반적이고 Avatar 관점에서 바라봤을 때 어울리는 이름으로 바꿔보자.

{props.author...} => {props.user...}

이제 UserInfo도 분리해보자.

UserInfo컴포넌트에 Avatar가 사용되므로 

UserInfo컴포넌트에 Avatar를 포함시켜준다. 

이제 UserInfo와 Avatar는 재사용 가능한 컴포넌트가 됐다.

1. 자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다. 단, 브라우저는 서버로 요청을 보내지 않아야한다.

2. 브라우저의 뒤로 가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다. 이때 또한 브라우저는 서버로 요청을 보내지 않아야한다.

브라우저에는 히스토리에 state를 저장하는 스택이 존재한다. (브라우저 api의 pushState, replaceState, popState)

    componentDidMount(){
          window.onpopstate = () => { ... };
    }
    onClick1 = () => window.history.pushState('v1', '', '/page1');
    onClick2 = () => window.history.pushState('v2', '', '/page2')l

replaceState? pushState와 거의 같지만, 스택에 state를 쌓지않고 가장 최신의 state를 대체한다.

이렇게 popState(이벤트), pushState(함수) replaceState(함수) 가 있으면 클라이언트에서 라우팅 처리가 되는 단일 페이지 앱을 만들 수 있다.

브라우저 api로 페이지라우팅 처리하려면 신경써야할 부분이 많다. 이럴 때는 react-router-dom을 이용해보자.