인프런 커뮤니티 질문&답변

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

inline style 관련

작성

278

인라인 스타일 정의시 새로운 객체로 인식하여 리렌더링이 계속되는 문제가 있어서

인라인 스타일을 지양하고 styled-components나 usememo를 쓰라고 하셨는데요

여기서 갑자기 헷갈리는 질문이 생겼어요

객체의 레퍼런스 값이 바뀌어야 리렌더링이 되는 걸로 알고 있는데 (불변성)

스타일 객체의 속성이 바뀌면 어떻게 알아채고 리렌더링을 하나요.

cosnt style = useMemo(() => ({ marginTop: 10; }), []);

or

cosnt style = { marginTop: 10; };

답변 1

지식공유자

스타일 객체의 속성이 어떨 때 바뀌나요?

질문자

스타일의 내용이 바뀐 경우를 상상하며 질문을 했는데요..

질문하면서 아래처럼 정리가 되었는데.. 맞다면 제가 쓸데없는 질문을 한 셈이네요. 죄송합니다;;

1. state가 변경되면 리렌더링이 되고 그때마다

1.1. 만약 인라인 스타일로 정의되었다면 그부분이 새로운 객체로 인식되어 virtualDOM이 달라진부분으로 인식하고 리렌더링을 한다.

1.2. styled-components나 usememo를 썼다면 값을 캐싱하여 해당 부분은 리렌더링하지 않는다.

2. style의 내용자체가 변경됐을 때는 refresh를 하여 초기 렌더링을 하는 거니까 (리렌더링이 아닌) 리렌더링 과정과 관계없다

지식공유자

네 맞습니다. 속성이 바뀌는 경우는 속성이 props나 state 값인 경우가 그럴 수 있는데 이 때도 어차피 props나 state가 바뀐 것이므로 리렌더링이 일어납니다.

작성한 질문수