리액트 렌더링 최적화 (styled component)

Question

렌더링 최적화를 위해 크롬 개발자 도구로 확인하며 개발하던 도중 질문이 있어서 남겨봅니다.const Container = React.memo(styled.div` position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; `); const FlexDiv= React.memo(styled.div` position: relative; width: 100%; display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; `); const Comp = () => { return ( ({ justifyContent: 'flex-start' }), [])}> {useMemo(() => 타이틀, []} ({ justifyContent: 'center' }), [])}> {useMemo(() => , []} ); };렌더링 결과를 확인하며 코딩하다 보니 위와 같이 코딩하게 되었는데요... 보통 저렇게 useMemo를 다 넣어주나요??다른 잘 짜진 코드를 볼 곳이 없어서 이렇게 해도 되나 싶어서 질문 남기게 되었습니다.이렇게 모두 useMemo를 사용해야 하는지 다른 방법이 있는지 다양한 조언 부탁드립니다. 감사합니다!

Hee Sung Son · Accepted Answer

예전에 본글에 useMemo vs no use 에 대한 글이 있었는데요 결론은 특정 상황(리렌더링이 계속발생하는 상황)이 아니면 쓰지않는게 더 성능에 좋다 라는 내용이였습니다. 참고하셔요~

컴포지트 · Answer

객체나 문자열, 숫자를 바로 집어넣을 경우는 useMemo 쓰는것 자체가 손만 아플 뿐입니다.어자피 재랜더링 해봐야 똑같은 값이고, 메모이제이션(캐시) 할 만한 건더기도 없어요.

리액트 렌더링 최적화 (styled component)

2개의 답변

Q&A 목록