17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook

[utterances-bot]

17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook

https://react.vlpt.us/basic/17-useMemo.html

[bbaktaeho]

혹시 콘솔에 로그가 두 번씩 찍히는 경우는 어떻게 디버깅할 수 있을까요?

[HandsomeChoco]

bbaktaeho, 컴포넌트의 내용이 업데이트 되면 기존의 값을 언마운트하고 새로운 값을 다시 쓰니까 두 번씩 찍히는게 정상 아닐까요?

[C17AN]

bbaktaeho index.js 의 를 지워 보세요

[fdsa09876]

countActiveUsers을 App 밖에 선언한 이유는 무엇입니까?

App안으로 들이니 Functions are not valid as a React child~ 가 콘솔에 출력되네요

가르쳐주실 분 있으신가요??

[gold24park]

@fdsa09876 App 안으로 선언하시려면 아래 코드처럼 하면 됩니다.

const countActiveUsers = () => {
    console.log('count active users..');
    return users.filter(user => user.active).length;
}

[fdsa09876]

@lx5475 고맙습니다

[k312]

useMemo 사용 전 예시에서 input 의 값을 바꿀 때 countActiveUsers 함수가 호출되는 이유가 궁금합니다. input은 <createUser / > 컴포넌트에 들어있고, 활성사용자 수를 나타내는 컴포넌트는 <createUser / >의 자식 컴포넌트가 아닌데 어째서 함께 리렌더링 돼서 input값 변경마다 호출이 되는 건지 이해가 잘 안되네요. 제가 어떤 부분을 놓치고 있는지 설명 좀 부탁드립니다 ㅜㅜ

[jerome-geek]

@k312 예를 들어, 이메일을 입력한다고 치면 CreateUser 컴포넌트의 email이라는 속성(props)가 바뀌게 되는데 이 값은 원래 App 컴포넌트의 state입니다. 결국 input에 입력하는 행위는 App Component의 state를 바꾸게 되는 행위죠. App의 State가 변경됐으니 App Component가 다시 렌더링되면서 countActiveUsers가 실행되면서 호출이 됩니다.

[choipd]

좋은 내용 감사합니다. useMemo 이해하는데 큰 도움이 되었습니다.

[wenodev]

useMemo

• 성능을 최적화할 때 사용한다.
• memo는 memorized의 약자이다.
• 첫번째 인수에는 함수, 두번째 인수에는 배열을 넣어주면 된다.
  • 두번째 인수에 넣어준 배열의 값이 바뀔때만 함수가 실행된다.
  • 그렇지 않다면 이전의 값을 재사용한다.

[jody96]

감사합니다!!!

[sshusshu]

Memo 는 "memoized" (이전에 계산 한 값을 재사용) useMemo 의 첫번째 파라미터 함수, 두번째 파라미터에는 deps 배열 (변경X-> 이전에 연산한 값을 재사용)

[gyu0714]

@lx5475 객체안에 users를 넣어줘야할거 같아요!

[pyozz]

deps가 바뀔 때만 함수가 호출된다고하니 뭔가 useEffect랑 헷갈리는거같네요 ㅜ 수를 세는 연산을 하니까 useMemo를 사용했다고 이해하면될까요??

[DoK6n]

@premiuncarrotshop 크롬확장프로그램 react devtools의 랜더링 하이라이팅 옵션 키시면 실시간으로 랜더링되는 애들 확인가능합니다.

useEffect랑 useMemo 간단한 예제로 마구 테스트 해보고 직접 눈으로 랜더링되는 차이를 확인하시는게 빠르실듯

[yongyonghw]

useMemo, useEffect 좋은 내용 감사합니다

[josunyjostar]

createUser값이 변경되어도 값이 변경되지 않는 UserList 렌더링 안되게도 알고싶습니다

[yjyjyj1991]

App 컴포넌트 안이랑 밖에 선언하는것에 어떤 차이가 있나요?

[Chaemin-L]

count를 useState 변수로 관리하고, users 배열에 의존성을 두어 useEffect를 사용하여 구현해도 같은 결과가 나옵니다. 이 예제에서 useMemo와 useEffect 성능의 우열을 가릴 수 있나요?

[TonakaCoder]

@Chaemin-L 더미데이터를 한 2000건 정도 만들어서 돌려보세요.

[SOONG-E]

감사합니다~!~!~!~!~!~!~!~!~!