Memoization
이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키게 하는 방법
ex) 문제 A
- 처음 만난 문제
- 할수 있는 모든 방법을 시도
- 해결 후 답을 기억해 둔다.
똑같은 문제를 만나면 기억해 둔 값을 다시 적는다.
그럼 React에선 어떻게 사용할까??
useMemo
첫번째 인자로 콜백 함수를 받아서 콜백 함수가 리턴하는 값 즉, 연산을 최적화 하는 기능
이후 배열을 전달해야 하는데 useEffect와 같다.
그럼 배열로 전달한 값이 변할 때마다 useMemo로 전달한 콜백함수가 실행된다.
만약 다른 곳에서 아무리 호출한다 하더라도 배열로 전달한 값이 변하지 않으면 계산하지 않고 똑같은 return 값을 반환한다.
주의
함수를 useMemo로 감싸서 만들었는데 다른 곳에 함수를 사용한다?
바로 에러를 만날 수 있다.
useMemo로 감쌀 경우 그건 더이상 함수가 아니게 된다.
이유는 useMemo는 어떤 함수를 인자로 받아서 콜백 함수가 리턴하는 값을 그대로 리턴하기 때문에 값이 저장된 변수랑 같다.
useEffect
React Lifecycle 제어
리액트의 라이프 사이클은 컴포넌트가 마운트(처음 나타났을 때) 와 업데이트(특정 값이 바뀔 때), 언마운트(사라질때)인데 useEffect는 이런 라이프 사이클에서 특정 잡업을 처리할 수 있게 해준다.
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
return () => {
console.log('컴포넌트가 화면에서 사라짐');
};
}, []);useEffect를 사용할 땐 첫 번째 파라미터론 함수, 두번재 파라미터론 의존값이 들어있는 배열(deps)를 넣는다.
여기서 deps배열을 비우게 된다면 컴포넌트가 처음 마운트 될 때만 useEffect가 동작한다.
그리고, useEffect는 함수를 반환할 수 있는데 이른 cleanup 함수라고 부른다.
이 cleanup함수는 useEffect의 뒷정리를 해주는 녀석인데 deps가 비어있을 경우 컴포넌트가 사라질 때 cleanup함수가 호출된다.
주로 사용할 때
마운트
props로 받은 값을 컴포넌트의 로컬 상태로 설정- 외부 API 요청 (REST API등)
- 라이브러리 사용 (D3, Video.js 등..)
- setInterval을 통한 반복 작업 혹은 setTimeout 을 통한 작업 예약
언마운트 시
- setImterval, setTimeout 을 사용하여 등록한 작업들 clear 하기(clearInterval, clearTimeout)
- 라이브러리 인스턴스 제거
useEffect(() => {
console.log('user 값이 설정됨');
console.log(user);
return () => {
console.log('user 가 바뀌기 전..');
console.log(user);
};
}, [user]);이런식으로 deps에 특정 값을 넣게 될 경우 컴포넌트가 처음 마운트 될 때에도 호출이 되고 , 지정한 값이 바뀔 때도 호출이 되며 deps안에 특정값이 있으면 언마운트시에도 호출되고 값이 바뀌기 직전에도 호출이 된다.
seEffect안에서 사용하는 상태나, rops가 있다면, eEffect의 deps 에 넣어주어야 한다.
만약 useEffect 안에서 사용하는 상태나 props 를 deps 에 넣지 않게 된다면 useEffect 에 등록한 함수가 실행 될 때 최신 props / 상태를 가르키지 않게 됨
생략한다면?
useEffect(() => {
console.log(user);
});deps파라미터를 생략한다면, 컴포넌트가 리렌더링 될 때마다 호출이 된다.
참고
리액트 컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트 또한 리렌더링 된다.
바뀐 내용이 없다 할지라도 리렌더링!
실제 DOM에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당하지만 Virtual DOM에는 모든걸 다 리렌더링 하고 있는 것이다.
