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


'FrontEnd > react' 카테고리의 다른 글

routing animation을 해보자  (0) 2018.10.04
react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16


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


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


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

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

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

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


'FrontEnd > react' 카테고리의 다른 글

routing animation을 해보자  (0) 2018.10.04
react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16

table cell word-wrap 문제

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

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


.react-grid-Cell__value div {
word-break: keep-all;
white-space: pre-line;
}



'FrontEnd > react' 카테고리의 다른 글

routing animation을 해보자  (0) 2018.10.04
react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16

<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


'FrontEnd > react' 카테고리의 다른 글

react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

<Route render>

render React Element

<Route component>

render React Component

<Route children>

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


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


'FrontEnd > react' 카테고리의 다른 글

react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

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

'FrontEnd > react' 카테고리의 다른 글

react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

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


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

'FrontEnd > react' 카테고리의 다른 글

react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

+ Recent posts

티스토리 툴바