Puppy's paw

react-router-dom의

Route는 unmount되는 즉시 dom에서 컴포넌트를 즉시 삭제한다

그래서 새로운 페이지의 등장 애니매이션은 쉽지만

기존의 페이지는 즉시 사라지기 때문에 애니매이션 효과가 반감된다.

React는 공식적으로 react-transition-group을 이용해서 해결하라고 한다.

<Route render={({location}) => (

<TransitionGroup>

  <CSSTransition key={location.key} classNames="page" timeout={300}>

    <Switch>

      <Route/>

      <Route/>

    </Switch>

  </CSSTransition>

</TransitionGroup>

)} />

와 같이 route이동에서 애니매이션을 쓸 수 있다.

주의할 점은 hashrouter를 쓸 경우 location.key가 없기 때문에 location.pathname 같은 걸로 대체해야 한다.

또한 location.pathname을 쓸 경우 다음과 같은 문제가 있다.

https://github.com/reactjs/react-transition-group/issues/136

참조

https://reacttraining.com/react-router/web/example/animated-transitions

CSS도 분명히 프로그래밍 되어있을 텐데

작성하다보면 이렇게 되야 하는게 맞는데 예상하지 않은 결과가 나올 때가 많다.

우리가 잘 모르는 요소들이 많기 때문인데 이런 원리를 잘 설명해논 글을 찾기가 쉽지 않다.

css문서를 직접 찾아서 자세히 읽어보면 나와있겠지만 언어의 압박과 그 분량이 너무 많다.

시간나면 읽어보는게 좋지만 css를 깊이 이해하는 것은 항상 우선 순위에 밀려나 있다.

그 동안 이상하게 생각해왔던 것들 중 원리를 이해하고 풀린것 중 하나가 마진의 작동 방식이다.

1. 마진은 마진끼리 영향을 주지 않는다.

2. inline 타입은 마진이 적용되지 않는다.

3. inline-block은 부모 태그를 마진으로 밀어낼 수 있다.

4. block타입은 부모 태그 자체를 마진으로 밀어내지 않는다.

   하지만 마진이 부모에 포함된 solid한 객체를 만나면 밀어낸다.

   border나 padding이 solid한 것에 포함된다. 

5. overflow: hidden 인 부모도 margin collapsed 가 안된다.

아직 그런 적이 없지만 5번때문에 왜 안되는 지 몰라서 개고생하면 참 억울 할 것 같다.

solid하다는 개념도 참 애매하다.

단순히 W3로 css를 공부했다면 이런 개념을 알기 어렵다.

왜 이렇게 직관적으로 파악하기 힘든 개념이 만들어졌는지 모르겠다.

https://stackoverflow.com/questions/37910669/what-is-the-difference-between-never-and-void-in-typescript

function expression 과  function declaration 에서 void 와 never의 차이

https://stackoverflow.com/questions/40251524/typescript-never-type-inference

never를 이용한 타입 안정성 예시

https://basarat.gitbooks.io/typescript/docs/types/discriminated-unions.html