[React] memo와 react hook

PureComponent 클래스와 같은 역할을 한다.
props 데이터가 변경되었을 때만 컴포넌트를 업데이트한다.

memo 사용법

import React, { memo } from 'react'; //memo를 import 한다.

const Card = memo(props => { // props를 전달해준다.
... // 코드 작성
}
);

react hook

함수에서도 라이프 사이클을 사용할 수 있게 해주는 것.
state를 선언할 때 useState를 사용하면 된다.

const [count, setCount] = useState(0);

useState는 아무리 호출돼도 동일한 값을 메모리에 저장해놓기 때문에 걱정하지 않아도 된다.

클래스와 함수의 차이점

클래스는 한 번 만들어지면 멤버 변수는 처음에만 생성된다.
state나 props가 변경되면 render 함수만 계속 호출이 된다.

반면에 함수는 컴포넌트가 변경되면 이 함수 전체가 호출되어야 한다.

레퍼런스 재사용하기

const inputRef = useRef();

ref를 사용할 때 createRef로 레퍼런스를 만들면
컴포넌트가 호출될 때마다 새로운 레퍼런스를 만든다.

useRef를 쓰면 메모리에 레퍼런스를 저장해놓기 때문에
값이 변하지 않았는데 다시 렌더링 되는 걸 방지할 수 있다.

콜백 함수 재사용하기

const callbackFunction = useCallback(() => { ... });

useCallback을 사용하면 자동으로 리액트가 캐시를 해서 동일한 콜백 함수를 가져온다.

함수에서 라이프 사이클

useEffect : 컴포넌트가 마운트 또는 업데이트되었을 때 호출된다.

useEffect(() => { ... }, [업데이트, 마운트 기준이 되는 값] );

위처럼 콜백 함수를 전달하면, 마운트나 업데이트 시 콜백 함수가 실행된다.
두 번째 파라미터로 넘긴 값이 있으면, 그 값이 변경되었을 때만 호출된다.
비어있는 배열을 전달하면 처음에만 호출된다.