선생님과 똑같이 했는데 다 rendering 됩니다.

선생님 말씀에 의하면 

아래와 같이 넣으면 greeting 컴포넌트는 랜더링이 안된다고 하셨는데요. 

<UserContext.Provider value ={user}>

콘텍스트 API로 데이터 전달하기 강의에서 

선생님과 똑같이 했는데 다 프로파일 컴포넌트와 그리팅 컴포넌트가 다 rendering 됩니다. 

무엇이 잘못 된 것일까요? 

길지 않아 소스를 아래에 넣습니다. 

=======소스 =========

import './App.css';
import {createContext, useContext, useState} from "react";

export const UserContext = createContext({username:'unknown', age:0});

export default function App() {
    const [user, setUser] = useState({username:'scmoon',age:19})
    const [count, setCount] = useState(0);
    console.log('app render')
  return (
      <div>
          <UserContext.Provider value ={user}>
              <Profile/>
              <button onClick={()=>{setCount(count+1)}}> 증가 </button>
          </UserContext.Provider>

      </div>
  );
}

function Profile(){
    console.log('profile render..')

    return (
        <div>
            <Greeting/>
        </div>
    );
}

function Greeting(){
    console.log('greeting render..');
    const {username} = useContext(UserContext);
    return `${username} 님 안녕하세요. `
}

=====console 결과 ========

app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render..

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