163. 자식 컴포넌트 재평가 자세히 살펴보기

 

 

태그 자체를 보이게 하는 것과 
태그 안에서 문자열을 보이게 하는 것의 차이를 확인해본다.

 

문자열에 조건을 주었을 때는 단락 구문이 깜빡이게 되는데 텍스트의 추가와 삭제가 요소 안에서만 이루어지기 때문이다. 

 

 

실제 변경은 DemoOutput에서 발생하지만 이에 대한 상태를 관리하고 있는 App 컴포넌트 역시

다시 실행된다는 것을 기억해두자

다시 언급하지만, 상태나 props, 또는 컨텍스트를 가지고 있고 이러한 것들이 변경되는 컴포넌트는 재실행, 재평가된다

 

 

부모 컴포넌트들이 변경되었고 자식 컴포넌트는 부모 컴포넌트의 일부분이기 때문에 부모 컴포넌트 함수가 재실행되면

마찬가지로 자식 컴포넌트 함수도 재실행된다. 따라서 props의 값은 여기서는 상관이 없이 부모 컴포넌트가 재실행될 경우 자식 컴포넌트도  다시 렌더링하게 된다. 

따라서 props의 변경은 실제 DOM의 변경으로 이어질 수는 있지만

함수에서, 재평가를 할 때는 부모 컴포넌트가 재평가 된다는 뜻일 수 있다.
자손 컴포넌트 props가 변경되었다는 것을 의미하는 것이 아닐 수 있다.

DemoOutput이 재실행된다고 해서 이것이 실제 DOM이 변경된다는 것은 아니다

 

즉 App.js에서 재평가가 일어나면 그 하위에 있는 모든 컴포넌트들이 재평가 된다는 것인데 
이거 성능적으로 괜찮을까 싶은 의문이 들 수 있다

결론은 '괜찮다' App.js 하위의 컴포넌트 내의 코드가 변경되었다는 것을 의미하는 것이 아니기 때문에 하위 컴포넌트들에서는 재평가, 재실행이 이루어지지 않는다.