목록react (3)

비실이의 개발 성장기

class 문법으로 react 개발 시, 이벤트 함수에 바인딩을 해주는 이유

ES6 class 문법으로 react 컴포넌트 개발 시, 이벤트핸들러 메소드를 선언하고 반드시 constructor 내부에서 바인딩을 해줘야 한다. 만약, 이벤트핸들러 메소드에 바인드를 해주지 않으면 이벤트콜백이 발생했을 시 메소드 내부 this 는 예상과는 다른 곳을 참조하게 된다. 아래는 버튼을 누르면 handleClickIncrement 이벤트 함수가 호출되어 count 값을 1씩 증가시키는 간단한 react 컴포넌트다. 12345678910111213141516171819202122232425262728class Application extends React.Component { constructor(props) { super(props); this.state = { count: 0 } } han..
프론트엔드/react.js 2018. 12. 8. 14:19
getDerivedStateFromProps() / getSnapshotBeforeUpdate() 메서드 확인

getDerivedStateFromProps() 와 getSnapshotBeforeUpdate() 메서드는 React v16.3.0 에서 새로 추가된 lifecycle 메서드다. 새로 추가 된 getDerivedStateFromProps(), getSnapshotBeforeUpdate() 메서드와 deprecated 예정 인 componentWillMount(), componentWillUpdate(), componentWillReceiveProps() 메서드를 혼용하여 사용하면 warning이 발생하게 된다. componentWillMount(), componentWillUpdate(), componentWillReceiveProps() 에서 처리하던 로직은 getDerivedStateFromProps..
프론트엔드/react.js 2018. 8. 31. 20:07
componentDidCatch() 함수 확인

React 릴리즈 버전이 16.4.x 버전까지 올랐다는 걸 React 공식페이지나 여러 기술블로그를 통해 알고 있었다. 하지만, 변경 된 사항들에 대해 글을 읽기만 했을 뿐 간단한 예를 만들어서 해보지는 않았다. 최근 이직 준비로 인한 시간이 생겨 변경 된 사항들을 직접 해보고 있다. 오늘은 React v16.0 에 새로 추가 된 componentDidCatch() 함수에 대해 알아보고 이 함수를 어떠한 경우 사용하면 좋을지에 대해 알아보려한다. React 프로젝트는 수 많은 UI 컴포넌트 트리로 구성되어 있다. 화면 렌더링이 시작되면 수 많은 UI 컴포넌트 들이 각자 역할에 맞게 수행되며 가장 마지막에 위치한 컴포넌트의 역할이 끝나면 페이지 렌더링이 완료된다. 만약 렌더링 도중 어떠한 컴포넌트에서 런타..
프론트엔드/react.js 2018. 8. 30. 21:20
Prev 1 Next