what about purecomponent

리엑트는 virtual dom 을 사용해서 redering을 사용할 떄 실제로 컴퍼넌트 내부 값이 변하지 않는 이상 모두 데이터를 새롭게 부르지 않는다.
하지만 특정 컴퍼넌트 값이 변경되는 경우에 렌더링시 자동으로 호출되는 componentdidUpdate() 가 불필요하게 자동실행되는데 이렇게 되면 크게 느리게 되지는 않으나 깜빰임과 같은 불편함으로
성능개선이 필요한 시점이 온게된다.
이런부분의 오류를 크롬 리액트 툴을 이용해서 컴퍼넌트 업데이트 상태창을 검색해서 확인할 수 있고 이 부분은 리엑트의 메모나 purecomponent 를 사용해서 개선할 수 있다.
퓨어 컴퍼넌트에 대한 공식 문서는 아래와 같다

https://reactjs.org/docs/react-api.html#reactpurecomponent

PureComponent

퓨어컴퍼넌트는 공식문서에 적혀있지만 간략히 요약설명하면 shallow comparison 으로 간단 설명이 가능할 거 같다. 구체적으로 설명하면 가장 자식이 되는 컴퍼넌트에서 이벤트가 발생할떄 해당 자식이 되는 state 값이나 혹은 prop 값의 오브젝트가 변경이 되었는지 깊히 체크 하는 것을 말하는데 component를 purecomponent로 이름을 바꿔주는 것만으로 오브젝트를 검사해서 빈번한 리랜더링이 발생되는 것을 막아준다.
하지만
퓨어 컴퍼넌트를 사용시 예를 들면

HandleReset () => {
const habits = this.state.habits.map( habit => {habit.count = 0; 
return habit})
setState({habits}) }

위의 코드로 되어 있는 경우 habit.count 값이 변경이 되는 경우 해당 오브젝트는 같은 값으로 취급하여 변경사항을 리랜더링 되지 않아 업데이트가 안되는 현상이 발생하는 경우가 있다.
위 부분을 해결 할 수 있는 방법은 스프레드오퍼레이터를 사용하여 클로닝 된 오브젝트로 변경된 값을 비교 업데이트 하는 경우 리엑트가 shallow comparison을 실행하여도 변경된 값을 식별하는 것이 가능하게 된다.
예시 코드는 아래와 같다. 포인트는 {…habit, count: 0} 다.

HandleReset () => {
const habits = this.state.habits.map( habit => 
 { if(habit.count !== 0){ return{…habit, count: 0}; }return habit;})
setState({habits}) }

Lifecycle 메써드

componentDidMount(){}
componentWillMount(){}
위에 메써드가 리엑트에 내장이 되어있는데, 각각 컴퍼넌트 작동하는 상황에 따라 자동으로 호출시키는 라이프사이클 메써드이다.
상황에 따라 여러라이프 사이클 메써드가 있는데, 어플리케이션이 제대로 작동하는 지 여부를 아래 함수를 입력하고 console.log를 사용하여 디테일한 오류를 캐치하는데 사용이 가능하다.