bind, call, apply 는 자바스크립트 함수를 부르는 강력한 방법이다.


하지만 지금 프로젝트에서는 context를 넘겨준다는 것에 대한 혼란스러움 때문에 지양되고 있다.


바인드로 함수를 부르면 일단 코딩을 줄 일 수 있다.


그런데 이렇게 하는 것이 얼마나 큰 효율을 얻을 수 있는 지는 생각해 봐야한다.


https://github.com/davidmarkclements/v8-perf


함수 콜에 대한 성능 이슈 관련링크인데 읽어볼만 하다


한줄 요약하면 arrow function 짱짱맨

'javascript' 카테고리의 다른 글

javascript] bind vs wrapper  (0) 2018.11.17
callback 패턴 함수를 await로 쓰는 방법  (0) 2018.05.01
nodeJs require  (0) 2018.04.13
함수형 프로그래밍 : reduce  (0) 2018.04.07
promise 대신 async, await를 사용하자  (0) 2018.03.22
let의 필요성  (0) 2018.03.20

after도 안먹는다.

focus, placeholder는 되는데

before, after는 왜 수도 코드가 안먹을까....

'CSS, HTML' 카테고리의 다른 글

input tag는 before가 안먹는다.  (0) 2018.10.10
css 마진의 비밀  (0) 2018.09.16

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

+ Recent posts

티스토리 툴바