개발일지

리엑트js의 이벤트 정리(es5)

react.js의 컴퍼넌트에는 생성 및 소멸주기가 있고, 이벤트 핸들러를 정의해서 후킹할 수 있습니다.
다음 예제의 이벤트 핸들러는 호출 순서대로 정의되어 있습니다.

See the Pen React의 이벤트 정리 by cinos (@shoveller) on CodePen.

리엑트js의 이벤트 정리(es6)

최근 airbnb의 react.js 코딩 스타일 가이드에는 “가능한 es6의 클래스로 작성할 것” 이 기본 지침인 모양입니다.
위에서 React.creatClass 로 작성한 코드를 es6로 고쳐 보았습니다.
es5코드를 es6로 고치던 와중에 발견한 변경점은 다음과 같습니다.

1. getDOMNode, isMounted, replacreProps, replaceState, setProps 메소드 삭제

따라서 props를 외부에서 할당할 수 있는 방법이 완전히 사라졌습니다.
props를 바꿀 생각이라면 아예 컴퍼넌트를 다시 랜더링하라고 하네요.
아래에서 희미하게 보이는 항목들이 deprecated 된 것입니다.
2. getDefaultProps 프로퍼티와 getInitialState 프로퍼티 삭제
state를 초기화시키는 역활이 생성자로 이동했습니다.
또한 props 를 동적으로 조작할 수 있는 수단이 아예 사라졌기 때문에 props를 처음에 랜더링 할때 주입하거나,
DummyComponent.defaultProps = { value: $('#inputModel').val() }
처럼 defaultProps라는 스태틱 메소드를 사용해서 전달해야 합니다.
전 개인적으로 랜더링 할 때부터 주입하는 것이 깔끔해 보이네요.

See the Pen es6로 작성한 React의 라이프사이클 by cinos (@shoveller) on CodePen.