리액트에서 상위 컴포넌트와 부모 컴포넌트는 다르다

리액트 수업 중 얼핏 알았지만, 정확히는 몰랐던 개념이 나왔다.

 

아래 코드에서 RouterProvider, div의 부모 컴포넌트는 ?

 

감싸고 있는 Wrapper? App?

나 또한 확신있게 말하지 못했다

 

정답은 App이다

 

누가 부모 컴포넌트인지 확인하는 가장 빠르고 정확한 방법은 props 전달이다

Wrapper에서 div로 props 전달이 가능한가?  아니다

 

props로 내려줄 수 있는 건 App 컴포넌트에서 가능하다

 

Warpper 는 상위 컴포넌트, App은 부모 컴포넌트이다

 

결론

- 부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달할 수 있다 (props 형태로)

- 부모가 바뀔 때 자식이 리렌더링된다