TIL/REACT13 PureComponent & props 사용 방법 import React, { PureComponent, memo } from 'react'; class Try extends PureComponent { shouldComponentUpdate(nextProps, nextState, nextContext){ } render(){ const { tryInfo } = this.props; return ( {tryInfo.try} {tryInfo.result} ) } } // hooks 에서는 PureComponent도 없고, shouldComponentUpdate도 없다. // memo를 써준다. const Try = memo(({ tryInfo }) => { return( {tryInfo.try} {tryInfo.result} ) }) export defa.. 2019. 10. 11. 리액트 렌더링 & push(X) & shouldComponentUpdate(nextProps, nextState, nextContext) & {PureComponent} 리액트 사용시 push 사용 하면 안된다.const array = [ ]; array.push(1)=>1array;=>[1] const array2 = [ ... array, 2] 기존 배열 복사해놓고, 새로운 것 넣어주기 array === array2 => false 리액트 렌더링 기준, 이전 state, 현재 state 랑 다르면 렌더링을 한다. 참조가 바껴야 된다. 알아 차릴 수 있도록 해야한다. STATE or PROPS 바뀌었을 때, 렌더가 발생한다. but setState만 호출해도 렌더링이 된다. 그래서 내장함수를 사용하여 렌더링 할 경우를 설정해줘야 한다. ex) shouldComponentUpdate(nextProps, nextState, nextContext){ if(this.state.. 2019. 10. 11. 리액트 Component & props export => import 를 써주면서 코드를 간결하게 만들 수 있다. 리액트 컴포넌트를 쓰는 이유는 *재사용성. - 해당되는 컴포넌트를 어디든지 가져다가 쓸 수 있음. - 가독성도 좋아진다. (코드가 길어질 수록 컴포넌트로 빼는 것도 좋다.) - 성능 최적화 할 때 좋다. **** 컴포넌트를 사용해야 할 때 주의할 점!!! 중요 부분. (V, i)를 따로 읽지 못한다.(key 값) (상대방 입장도 들어봐야 된다.) => ex) * props를 사용한다. // HTML에서는 Attribute라고 함. { this.props.value.fruit } - { this.props.index } *라고 쓸 수도 있음. { this.props.v.fruit } - { this.props.i } Tip => 탑.. 2019. 10. 11. prev 1 2 3 4 5 next