개발자
안녕하세요, 스타트업에서 프론트엔드 개발 업무를 맡고있는 주니어 개발자입니다. 리액트의 렌더링 원리에 대하여 공부하던 도중, 어떤 아티클을 발견하였습니다. https://jaehyeon48.github.io/react/react-as-a-ui-runtime/ 해당 아티클을 읽고 난 후, 제 머릿속에 있는 개념과 충돌이 일어났습니다.. 저는 이 아티클의 조건 섹션의 내용을 읽고 리액트는 바뀐 부분이 있다면 변경된 부분의 컨텐츠만 javascript 코드를 통해 변경하는 방식으로 작동한다고 이해하였습니다. 그렇다면 React에서 부모 컴포넌트의 state가 변경되었을 때, 해당 state와 관련이 없는 자식 컴포넌트도 리렌더링이 되지 않아야 하는 것이 맞지 않나요? 저 아티클의 내용대로라면, React.memo같은 메모이제이션도 사용할 필요가 거의 없어보이는데.. 제가 저 아티클의 내용을 잘못 이해한 것일까요?
답변 2
인기 답변
해당 부분은 리액트의 가상돔 렌더링 과 실제 dom렌더링이 다르다는점에서 발생한 오해인 것 같습니다. 리액트의 동작 원리를 간단하게 나타내면 상태변경 => 가상DOM렌더링 => 가상DOM과 실제 DOM비교 => 실제DOM렌더링 이러한 방식으로 동작되게 됩니다. 여기서 상태가 변경되면 리액트는 부모 컴포넌트가 변경될 시 자식 컴포넌트는 따로 memoization을 해주지 않는이상 변경되었다고 가정하고 가상DOM을 그리게됩니다. 이 때가 rendering이 발생하게 됩니다. 말을 렌더링이라고 하지만 실제로는 가상돔을 그린것이고 실제 화면과는 무관하게 메모리상에서만 변경이 된거죠. 그리고 이렇게 렌더링된 가상DOM과 실제 DOM을 비교하여 변경된 부분을 업데이트하는 작업이 발생하게 됩니다. 이 때에는 자식 컴포넌트가 리렌더링은 되었지만 실제 DOM과 차이는 없을것이기 때문에 변경되지는 않습니다. 실제로 간단한 예제를 만들어서 DOM이 변경되는지 확인해보시면 console 에는 render! 라고 찍히게 되지만 실제 dom은 아무련 변화가 없는것을 확인하실 수 있습니다. 다시한번 정리하면 리엑트에서 말하는 렌더링이란 가상돔 렌더링을 말하는 것이고 질문자님께서 말씀해주신 "리액트는 바뀐 부분이 있다면 변경된 부분의 컨텐츠만 javascript 코드를 통해 변경하는 방식으로 작동한다고 이해하였습니다." 이부분은 가상돔 렌더링 후에 실제 DOM을 렌더링하는 과정을 말하는 차이가 있습니다.
익명
작성자
2023년 12월 18일
답변 감사합니다! 실제 dom을 변경하는 렌더링과 가상돔 렌더링을 분리해서 생각해야겠네요 :)
무조건 부모 컴포넌트의 상태가 변경된다고 자식 컴포넌트들이 리렌더링 되는 것이 아니라 말씀하신 것처럼 변경된 부분만 리렌더링 됩니다. 만약 부모와 자식이 같은 상태를 공유하고 있다고 했을 때 부모 컴포넌트에서 상태 변경이 일어나면 공유하고 있는 자식에서도 값이 변경되기 때문에 리렌더링이 발생합니다! 또한 부모와 자식이 공유하고 있지 않다고 해도 부모의 상태 변경이 자식에 영향을 끼친다면 리렌더링이 발생하지 않을까요? 이처럼 부모와 자식 관계에서는 부모의 상태가 변경됐다고 하더라도 이와 관련된 자식만 리렌더링이 발생할 뿐 관련되지 않은 자식 컴포넌트는 리렌더링이 발생하지 않는 것으로 알고 있습니다! 잘못된 정보가 있으면 댓글 부탁드려요!
김태우
zzambbong developer • 2023년 12월 18일
다시 읽어보니 이 글에는 크게 도움이 되지 않는 답변인 거 같네요! 죄송합니다😅😅
익명
작성자
2023년 12월 18일
안녕하세요! 답변 주셔서 감사드립니다. 부모와 자식이 같은 상태를 공유하고있지 않더라도 부모 컴포넌트에 선언된 state값이 변경되면 자식 컴포넌트도 리렌더링되지 않나요? 그렇기 때문에 그를 방지하기 위해 react.memo같은 메모이제이션 기법도 활용되고 있는 것으로 알고있습니다. https://velog.io/@mogulist/understanding-react-rerender-easily 혹시 여기에 대해서 어떻게 생각하시는지 답변 달아주시면 큰 도움이 될 것 같습니다!
익명
작성자
2023년 12월 18일
부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 됩니다. 자식 컴포넌트의 props나 state에 변경 사항이 있었느냐는 무관합니다. 답글에 있는 아티클의 요약입니다! 어떤게 맞는 내용인지 헷갈리네요..
김태우
zzambbong developer • 2023년 12월 18일
저도 무조건 부모 상태가 변경되면 자식 컴포넌트는 리렌더링되는 줄 알고 있었는데 프로젝트를 하다가 부모 컴포넌트의 상태가 변경되더라도 상태 변화로 인해 자식이 영향을 받지 않으면 리렌더링 되지 않아서 이렇게 알고 있었는데 무조건 되나보군요...하하 죄송합니다😅
김태우
zzambbong developer • 2023년 12월 18일
React 렌더링 방식을 좀 더 공부해봐야겠네요 ㅠㅠ
익명
작성자
2023년 12월 18일
넵 저도 공부가 더 필요할 듯 하네요ㅠㅠ 감사합니다~
김태우
zzambbong developer • 2023년 12월 18일
아 근데 제가 생각한 것이 맞는 거 같네요 부모의 상태와 상관없는 props만 참조하고 있으면 부모의 상태가 변경되더라도 자식 컴포넌트는 재렌더링 되지 않을 수 있네요! 컴포넌트의 재렌더링 여부가 reconciliation 알고리즘에 따라 결정되는데 관련 글 찾아보고 다시 답변 드려볼게요!
김태우
zzambbong developer • 2023년 12월 18일
https://ko.legacy.reactjs.org/docs/reconciliation.html 관련된 공식문서 글입니다 한 번 읽어보세요!
김태우
zzambbong developer • 2023년 12월 18일
https://choyeon-dev.tistory.com/m/entry/React-re-evaluation%EA%B3%BC-re-rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-optimization 위 글이 질문에 대한 답변을 확실히 알 수 있을 거 같아서 공유드려요!
익명
작성자
2023년 12월 18일
아하! re-rendering과 re-evaluation을 분리해서 생각하니 개념이 이해가 되네요. 큰 도움이 됐습니다. 감사합니다~
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!