React Study [#3] - 숫자야구

제로초님의 "웹 게임을 만들며 배우는 React"을 보고 학습하는 스터디 입니다.

React Dev Tools

chrome webstore에 들어가서 React Developer Tools를 다운받으면 개발자 콘솔에서 react의 흐름을 볼 수 있는 'Component'와 'Profiler' 창이 생긴다.

React를 사용하는 웹 사이트를 알려주며 관련된 컴포넌트를 볼 수 있다.

---

PureComponent와 React.memo

React.PureComponent는 React.Component와 비슷합니다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교를 구현한다는 차이점만이 존재합니다.

ETC

• array, obj 등 참조형 변수는 state 변경을 알아차리지 못한다.

    class Try extends PureComponent {
        render(){
            return <></>
        }
    }

---

React.Memo

React.memo는 고차 컴포넌트(Higher Order Component)입니다.

컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다.

ETC

    const Try = memo({tryInfo})=> {
        return (<></>)
    }