react devTools

크롬 확장프로그램으로 react를 보는데 F12의 element에 비해 더 좋다.

사용결과

이런식으로 컴포넌트를 확인할 수 있고 오른쪽에 state에 대한 것도 확인이 가능하다.

렌더링 확인하기

해당 톱니바퀴를 누르고 Highlight를 체크하면
렌더링에 대한 바뀐 부분들을 확인 할 수 있다.

예를들어 input 부분에 값을 입력하면 렌더링 되는 부분을 확인 할 수 있다.
(현재는 렌더링이 누를때마다 다른곳에도 영향을 끼치므로 좋지않다)

shouldComponentUpdate

렌더링은 기본적으로 상태가 변하면 발생한다고 알고있다.
하지만 상태가 변하지않아도 발생할 수 있다.
ex) this.setState({}) 와 같이 아무것도 변하지 않아도 영향을 받는다.

해당 함수는 리턴된 값에 따라 렌더링을 할지 안할지를 골라주는 역할을 한다.
true일 경우 렌더링을 진행하고 false일 경우 렌더링을 진행하지 않는다.

React.PureComponent

React.PureComponent는 React.Component와 비슷합니다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교를 구현한다는 차이점만이 존재
=> 간단히 Component와 비슷하나 shouldComponentUpdate를 내부적으로 구현해놓은 상태이다.

• Component + shouldComponentUpdate vs `PureComponent

• hook에서는 해당 부분을 memo라는 것이 담당한다.
  (컴포넌트 전체를 memo(컴포넌트 내용)로 묶어서 처리한다. )

state props

자식이 받은 props가 수정이 필요한 경우
따로 useState로 그 state를 바꿔야 한다.

jsx 삼항연산자

false , undefined ,null로 아무것도 없음을 처리할 수 있다.

• && 앞이 틀리다(false)면 뒤가 실행되는 방법도 가능하다.