보뇨 다이어리

setState 로 값이 변화할때 재렌더링막기 본문

프론트엔드/React 정보

setState 로 값이 변화할때 재렌더링막기

보뇨 2020. 9. 7. 20:27
반응형

컴포넌트가 재렌더링 되는 조건은 props 가 들어올때, state 값이 바뀔때, 또 뭔가 있었는데...무튼 이런경우에 재렌더링이 발생함.
근데 별상관없는 값이 변경되었는데도 계속 재렌더링이 발생하니깐 뭔가 꼴보기싫음;
찾아보니 애초에 setState 메소드를 실행시키면 이후에 재렌더링이 발생한다고하는데...역시나 막는 방법은 존재한다
그게 바로 useMemo를 사용하는건데 jsx값은 같기떄문에 값을 저장하여 보여주는(vue 에서 computed랑 비슷한 느낌..)것이당!

...
  const mainContext = useMemo(() => {
      return (
    <div>
      { check ? (
      <div>
        {results.map((result, index) => (
          <div key={index}>
            <p>{result.name}</p>
            <p>{result.url}</p>
          </div>
        ))}
      </div>) : (
        <div>
          Loading...
        </div>
      )}
    </div>
  )
  }, [results, check])

  return mainContext;

출처

재렌더링이 왜 일어나는지

반응형