react-tutorial
react-tutorial copied to clipboard
velopert
17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook
#bbaktaeho, 컴포넌트의 내용이 업데이트 되면 기존의 값을 언마운트하고 새로운 값을 다시 쓰니까 두 번씩 찍히는게 정상 아닐까요?
countActiveUsers을 App 밖에 선언한 이유는 무엇입니까?
App안으로 들이니 Functions are not valid as a React child~ 가 콘솔에 출력되네요
가르쳐주실 분 있으신가요??
@fdsa09876 App 안으로 선언하시려면 아래 코드처럼 하면 됩니다.
const countActiveUsers = () => {
console.log('count active users..');
return users.filter(user => user.active).length;
}
useMemo 사용 전 예시에서 input 의 값을 바꿀 때 countActiveUsers 함수가 호출되는 이유가 궁금합니다. input은 <createUser / > 컴포넌트에 들어있고, 활성사용자 수를 나타내는 컴포넌트는 <createUser / >의 자식 컴포넌트가 아닌데 어째서 함께 리렌더링 돼서 input값 변경마다 호출이 되는 건지 이해가 잘 안되네요. 제가 어떤 부분을 놓치고 있는지 설명 좀 부탁드립니다 ㅜㅜ
@k312 예를 들어, 이메일을 입력한다고 치면 CreateUser 컴포넌트의 email이라는 속성(props)가 바뀌게 되는데 이 값은 원래 App 컴포넌트의 state입니다. 결국 input에 입력하는 행위는 App Component의 state를 바꾸게 되는 행위죠. App의 State가 변경됐으니 App Component가 다시 렌더링되면서 countActiveUsers가 실행되면서 호출이 됩니다.
useMemo
- 성능을 최적화할 때 사용한다.
- memo는 memorized의 약자이다.
- 첫번째 인수에는 함수, 두번째 인수에는 배열을 넣어주면 된다.
- 두번째 인수에 넣어준 배열의 값이 바뀔때만 함수가 실행된다.
- 그렇지 않다면 이전의 값을 재사용한다.
Memo 는 "memoized" (이전에 계산 한 값을 재사용) useMemo 의 첫번째 파라미터 함수, 두번째 파라미터에는 deps 배열 (변경X-> 이전에 연산한 값을 재사용)
deps가 바뀔 때만 함수가 호출된다고하니 뭔가 useEffect랑 헷갈리는거같네요 ㅜ 수를 세는 연산을 하니까 useMemo를 사용했다고 이해하면될까요??
@premiuncarrotshop 크롬확장프로그램 react devtools의 랜더링 하이라이팅 옵션 키시면 실시간으로 랜더링되는 애들 확인가능합니다.
useEffect랑 useMemo 간단한 예제로 마구 테스트 해보고 직접 눈으로 랜더링되는 차이를 확인하시는게 빠르실듯
count를 useState 변수로 관리하고, users 배열에 의존성을 두어 useEffect를 사용하여 구현해도 같은 결과가 나옵니다. 이 예제에서 useMemo와 useEffect 성능의 우열을 가릴 수 있나요?
