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

https://adazzle.github.io/react-data-grid/#/examples/filterable-sortable-grid

심플하고 커스터마이징이 쉬운 것 같아서 선택했다.

소팅이나 필터링 알고리즘은 직접 구현하게 되있다.

하지만 react-data-grid-addons에 구현 되있는 것들이 있다.

그런데 문제는 사용법 설명이 없다. 그냥 예제 보고 분석해야한다.

이쪽은 커스터마이징이 쉬워 보이지 않는다. 그냥 직접 구현하는게 나을 지도

table cell word-wrap 문제

컴포넌트로 컨트롤 하는 방법은 없다.

css로 찾아서 해결해야 한다.

<input autofocus type='text' />

하니 에러가 발생한다.

autoFocus로 대소문자 구분을 한다.

다른 방법으로는

ref={input=>input.focus()}

관련링크

https://stackoverflow.com/questions/28889826/react-set-focus-on-input-after-render

http://www.jackcallister.com/2014/11/25/autofocus-in-react-js.html

<Route render>

render React Element

<Route component>

render React Component

<Route children>

패스 매칭에 상관없이 무조건 표현

render는 인라인 렌더링이 가능하다는데 tslint에는 인라인 렌더링 하지 말라고 나온다.

create-react-app typescript-react-tutorial --scripts-version=react-scripts-ts

react에서 class를 쓰는 경우와 상태가 없는 함수를 쓰는 경우

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0