useEffect는 여러번 사용 가능하다. state마다 efffect를 사용 할 수 있기 때문임.
[배열에는 꼭 useEffect를 다시 실행할 값만 넣어야 한다.
관련 없는 state를 넣으면 동작이 이상해진다.]
<reminder>
Hooks에서 부모 컴포넌트에서 child 컴포넌트를 가지고 있으면
부모 컴포넌트가 렌더링 될때마다 무조건 child도 무조건 변경된다.
따라서 => memo를 사용한다.
memo가 함수 컴포넌트를 감싸준다.
props가 바뀌면 리렌더링이 되는데 memo 를 사용하여
감싸줘야 re-rendering을 방지한다.
memo를 넣으면 pureComponent 역할을 한다.
렌더링 성능 최적화에도 도움된다.
useEffect를 조금 쉽게 이해하는 방법
=>
<result, imgCoord, score>
componentDidMount
componentDidUpdate
componentWillUnmount
====================================
useEffect 클래서에서의 사용!!!! **한꺼번에 모두 사용.
componentDidMount() {
this.setState({
imgCoord: 3,
score: 1,
result: 2,
})
}
useEffect hooks에서의 사용!!! 나눠서 사용 가능!!!
useEffect(() => {
setImgCoord();
setScore();
}, [imgCoord, score]);
useEffect(()=> {
setResult();
}, [result]);
***배열이 비어있으면, componentDidMount() 사용한다는 것***
** 배열이 들어가 있으면, componentDidMount() , componentDidUpdate() 둘다 사용
배열 componentDidUpdate() 사용시 조심해야 한다. 배열에 다시 시작 되는 부분을 적용해야함 or 문제가 생김.
return ( ) => {
// componentWillUnmount 사용 한다는 것.
timeouts.current.forEach( ( v ) => {
clearTimeout( v );
})
}
'TIL > REACT' 카테고리의 다른 글
contextAPI, provider 설정, createContext( ) (0) | 2019.10.17 |
---|---|
dispatch ( { } ), action 객체를 실행. reducer 기록 (0) | 2019.10.17 |
useEffect 간단한 내용. (0) | 2019.10.12 |
메서드 안에 있는 함수 호출, 함수 최적화 하기. (0) | 2019.10.12 |
componentDidMount() , componentDidUpdate(), componentWillUpdate() (0) | 2019.10.11 |
comment