Context API 관련 질문이 있습니다.

안녕하세요.

얼마전에 수강등록 하여 열심히 듣고 있습니다.

(좋은 강의 감사드립니다. 👍)

📌 강의는 "콘텍스트 API로 데이터 전달하기" 입니다. 여기서 부터 질문입니다.

1️⃣ 'username'과 같이 Consumer에서 받을 때는 아무 이름이나 사용해도 상관없는건가요?

강의 '콘텍스트 API로 데이터 전달하기'를 보게 되면 'Greeting' component에서 'App' 컴포넌트의 'Provider'가 보낸 'value="mike"' 값을 'username'이라는 naming된 변수(?)로 받던데요. 이름이 다르지만 연동이 되는건가요?

2️⃣ (강의 12분대) Provider의 value 값을 객체 상태값으로 바꾸게 되면 왜 Consumer가 rendering 되지 않는건가요?

강의에서 부모 컴포넌트에서 'count' 값에 변화를 주게되었을 때, 하위 컴포넌트(Greeting)는 해당값(count)을 사용하지 않지만 가상돔에서 변경감지를 하여 부모 컴포넌트가 다시 rendering되기 때문에 'React.memo'를 사용하지 않는 하위 컴포넌트(Greeting)도 rendering이 된다고 이해했습니다.

그래서 이에대한 해결책으로 부모 컴포넌트의 Provider의 value를 아래처럼 바꾸셨습니다.

const [username, setUsername] = useState('mike');
const [age, setAge] = useState(0);
<UserContext.Provider value={{username, age}}>...

const [user, setUser] = useState({username: 'mike', age: 0});
<UserContext.Provider value={user}>...

이전에 'Provider'를 가지고 있는 컴포넌트가 rendering 될 때마다 value도 새로 만들어진다고 말씀하셨는데, 그렇다면 각각 상태를 가지던 username, age를 user 라는 하나의 객체상태값으로 바꿔도 어차피 rendering 되면 객체(user)가 새로 만들어지는 것 아닌가요? 제가 잘 못 이해를 하고 있는건지 혼동이 옵니다.

답변주시면 감사하겠습니다.

안녕하세요

각 객체는 내용이 같다고 하더라도 참조값(레퍼런스)은 다릅니다
아래 코드를 개발자모드를 켜고 콘솔에 입력해보면 false 가 출력됩니다
{username: 'mike'} === {username: 'mike'}

그래서 아래처럼 코드를 작성하면 value 에는 매번 새로운 참조값이 입력되고 그게 문제가 됩니다
<UserContext.Provider value={{username: 'mike'}}>

useState 가 반환하는 값은 setter 를 호출하지 않으면 변하지 않습니다.
setUser 를 호출해야만 user 값이 변합니다.
따라서 컴포넌트 함수가 아무리 호출(렌더링)되어도 setter 를 호출하지 않으면 Provider 의 value 에는 항상 같은 값(user)이 입력됩니다.

Inflearn Community Q&A