인라인 스타일 리렌더링 관련

Question

인라인 스타일 사용 시 style이라는 객체 prop이 매번 달라져 리렌더링이 발생한다고 해주신 부분 관련하여 질문드립니다   부모가 리렌더링되는 상황이라 이와 무관하게 자식의 리렌더링도 유발하게 될텐데요 자식 컴포넌트 자체에 memo를 적용하는 경우가 아니라면, useMemo를 쓰더라도 최적화 효과가 없을 것으로 보이는데 맞을까요?

제로초(조현영) · Answer

네, 적어주신게 모두 맞습니다!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. Eric J님께서 말씀하신 것처럼, 인라인 스타일을 사용할 때마다 style 객체가 새로 생성되기 때문에 부모 컴포넌트가 리렌더링될 때마다 자식 컴포넌트도 영향을 받아 리렌더링됩니다. 이를 최적화하기 위해 여러 가지 방법이 있는데요. 질문 주신 내용과 관련하여 자세히 설명드리겠습니다. 인라인 스타일 사용 시 리렌더링을 최소화하기 위해 useMemo 를 사용하여 style 객체를 캐싱할 수 있습니다. 이렇게 하면 동일한 스타일 객체를 재사용할 수 있으므로 불필요한 리렌더링을 방지할 수 있습니다. 그러나 이 경우에도 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트 역시 리렌더링되기 쉽습니다. React의 memo 는 자식 컴포넌트의 불필요한 리렌더링을 방지하는 데 유용할 수 있습니다. 부모 컴포넌트가 리렌더링되더라도, React.memo 를 사용하여 자식 컴포넌트의 props가 변하지 않으면 해당 자식 컴포넌트의 리렌더링을 막을 수 있습니다. 이는 useMemo 와 결합하여 사용하면 더욱 효과적입니다. 다음 게시물에서 유사한 최적화 전략과 관련된 질문과 답변을 확인하실 수 있습니다: React 인라인 스타일 DOM 업데이트 관련해서 질문드립니다 이 질문에서는 인라인 스타일과 관련된 리렌더링 최적화에 대해 깊이 있는 논의가 이루어졌습니다. usememo 자식컴포넌트 리렌더링 질문 이 게시물에서는 useMemo 와 React.memo 를 조합하여 자식 컴포넌트를 최적화하는 방법에 대해 설명하고 있습니다. 이와 관련하여 더 궁금하신 점이 있으시면, 주저하지 말고 추가로 질문해 주세요. 지식공유자께서 꼼꼼히 답변해 주실 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.