2020년 1월 8일 수업

import React, { useEffect } from 'react';

let count = 1;

function SubCallbackTest() {
  useEffect(() => {
    count += 1;
  });

  return <>SUB: {count}</>;
}

export default SubCallbackTest;

 

import React, {
  usestate,
  useState,
  useMemo
} from 'react';
import Sub from './SubCallbackTest';

function CallbackTest(props) {
  const [count, setCount] = useState(1);
  const up = () => setCount(prev => prev + 1);
  const memoizeSub = useMemo(() => {
    return <Sub />;
  }, []);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={up}>증가</button>
      <Sub /> <br />
      {memoizeSub}
    </div>
  );
}
export default CallbackTest;

 

최초로 렌더링 시 1 1 1 로 찍히는데 사실 알고보면 Sub에 있는 useEffect에 있는 componentDidMount효과에 의해 

두번째 증가 버튼 오른쪽에 있는 SUB:2가 되어야 하는게 맞다. (랜더링이 안되서 111로 보이는거임)

 

그래서 증가 버튼을 누르게되면 갑자기 231 이 된다. 

 

 

 

redux와 useReducer를 사용하는 이유

기존 상태의 보존이 필요하고 그것을 유지하면서 어떤 액션이 취해졌을때 그 상태를 가지고 뭐를 해야할때 필요

 

 

useCallback과 useReducer에 관한 예제

github주소

https://github.com/sunnykim91/react-frontend-school/tree/master/%EC%8B%A4%EC%8A%B5

sunnykim91/react-frontend-school