Table of contents
- By default, setState triggers a re-render
- setState updates the local state asynchronously
- Component Lifecycle is important!
- Use componentWillReceiveProps
- Use React Developer Tools
- Use CRA(Create React App)
1. By default, setState triggers a re-render
기본적으로 setState 메소드는 해당 컴포넌트의 재렌더링(re-render)을 발생시킨다.
리액트의 기본 동작은 애플리케이션을 구성하고 있는 컴포넌트에서 발생하는 모든 변경사항에 대해서 다시 렌더링 하는 것이고 대부분의 경우 이 이러한 기본 동작에 맡겨도 정상적으로 동작합니다. 하지만 불필요한 re-render는 컴포넌트의 라이프 사이클 압장에서 봤을 때, Best practice일 수 없습니다.
각각의 컴포넌트들은 shouldComponentUpdate라는 메소드를 가지고 있고 이것은 state가 변경되거나 부모 컴포넌트로부터 새로운 props를 전달받을 때 실행됩니다. React는 이 메소드(shouldComponentUpdate)의 반환 값에 따라서 re-render를 할지에 대한 여부를 결정하게 됩니다.
기본적으로 shouldComponentUpdate 메소드는 true를 반환합니다. 하지만 React 개발자는 re-render를 원하지 않는 경우에, 이 return value를 false로 오버라이드 할 수 있습니다.
important notes:
- shouldComponentUpdate를 잘못 설정하거나 이러한 설정을 잊어 버리면 구성 요소가 예상대로 업데이트되지 않아 애플리케이션에 문제가 발생할 수 있습니다.
- shouldComponentUpdate에서 계산을 실행하는 것은 성능과 노력면에서 비용이 많이들 수 있으므로 그만한 가치가 있는지 확인해야합니다. React ‘s Performance Tools를 사용하여 shouldComponentUpdate 사용 전후에 낭비되는 사이클 수를 확인하는 것이 좋습니다. 아주 간단한 사용법이 있습니다.
2. setState updates the local state asynchronously
setState 메소드는 비동기로 state를 업데이트 한다.
setState메소드는 즉시 실행되는, 동기적으로 실행되는 것이 아니라 하나의 요청이라고 생각해야 합니다. 즉, setState를 통해 상태를 변경하더라도 해당 메소드가 실행된 직후에 변경된 상태가 적용되는 것이 아닙니다.
setState를 호출한 직후에 this.state에 접근하는 것은 흔한 실수 입니다. 일반적으로, setState메소드 내에서 this.state를 사용하는 것은 신뢰할 수 없습니다.
만약 이전의 상태에 기반하여 상태를 변경해야 한다면 가장 좋은 방법 중 하나는 updater 함수를 사용하는 것입니다. updater함수를 setState 메소드의 첫번째 인자로 넘기는 방식으로 사용할 수 있습니다. ( setState(updater, [callback]) ) 예제 코드입니다.
여기서 [callback]은 optional argument로 setState의 실행이 완료된 후 실행되며 해당 callback이 실행된 후에 해당 컴포넌트의 re-render가 이루어집니다. updater에 대한 보다 자세한 내용은 다음 링크를 참고하세요.
3. Component Lifecycle is important!
컴포넌트의 라이프 사이클이 중요하다!
React를 이해하는데 있어서 가장 첫번째로 이해해야 하는 부분이 바로 Component life cycle입니다. 각각의 React 컴포넌트는 component의 life cycle 안에서 특정 시간에 호출할 수 있는 메소드들을 내장하고 있습니다. 이 컴포넌트 내장 메소드들을 올바르게 사용하기 위해서는 해당 메소드들이 실행되는 순서를 이해해야만 합니다. 이 라이프 사이클을 세 부분으로 나눌 수 있습니다.
Mounting
React 컴포넌트의 인스턴스가 생성되고 DOM에 삽입되는 과정의 life cycle 입니다.
- constructor
- componentWillMount
- render
- componentDidMount
Updating
prop 또는 state의 변경으로 해당 컴포넌트가 re-render 되는 경우의 life cycle 입니다.
Props Change
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
State Change
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
Unmounting
- componentWillUnmount
Life Cycle과 관련된 좋은 Article
- React Lifecycle Methods - how and when to use them
- React Official Document
4. Use componentWillReceiveProps
componentWillReceiveProps 메소드를 사용해라.
만약 props의 변경에 따라서 상태를 변경해야 한다면, 이 componentWillReceiveProps 메소드가 필요합니다. this.props와 nextProps를 비교해서 중요한 변화(significant change)가 있다면 해당 메소드를 실행합니다.
Two important notes:
- props가 변경되지 않아도 componentWillReceiveProps는 실행하기 때문에 this.props와 nextProps를 비교하는 것이 중요합니다.
- componentWillReceiveProps은 해당 컴포넌트가 mounted 되기 전에 실행되어 새로운 props를 받습니다. 이것은 React가 mount 중에는 초기 props에 대해 componentWillReceiveProps를 호출하지 않는다는 것을 의미합니다.
추가 내용
React version 16에서 componentWillReceiveProps를 사용하여 상태를 변경할 때는 동기적으로 업데이트 해야 합니다.(dispatch request 또는 setTimeout과 같은 비동기적 요청은 해당 메소드에서 처리하면 안 됩니다.)
React Fiber 를 사용하면 라이프 사이클이 진행되기 전에 componentWill[*] 메서드가 여러 번 호출 될 수 있습니다. props이 변경될 때 상태를 비동기적으로 업데이트하려면 componentDidUpdate를 사용해야 합니다.
5. Use React Developer Tools
각종 React 개발자 도구를 사용해라.
React Developer Tools를 사용하면 애플리케이션을 구성하고 있는 React 컴포넌트의 계층, 컴포넌트의 props 및 state를 검사 할 수 있습니다. React는 모두 컴포넌트에 관한 것이기 때문에 많은 경우, 매우 유용합니다. 브라우저 확장 프로그램 (Chrome용 및 Firefox 용)과 독립 실행 형 앱으로 존재합니다.
6. Use CRA(Create React App)
CRA를 사용해라.
Facebook의 Create React App을 사용하면 빌드 구성없이 React 앱을 만들 수 있습니다. CRA는 사용하기가 매우 쉽고 잘 갖춰진 documentation을 가지고 있습니다. Node> = 6 만 있으면 되며 macOS, Windows 및 Linux에서 작동합니다. 개발 생산성을 높여주는 HRM도 해당 scaffolding 모듈에서 지원하고 있습니다. (개인적으로는 글로벌로 설치해도 아쉽지 않은 녀석입니다!)
역자 덧붙임
좋은 참고자료를 첨부합니다.
출처 : https://jaeyeophan.github.io/2018/01/02/React-tips-for-beginners/
원본 링크 : https://engineering.opsgenie.com/i-wish-i-knew-these-before-diving-into-react-301e0ee2e488
'React > 공부하기' 카테고리의 다른 글
| React.js란? (0) | 2019.09.06 |
|---|
