inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

실전 리액트 프로그래밍

콘텍스트 API로 데이터 전달하기

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

해결된 질문

143

taylous

작성한 질문수 26

0

안녕하세요.

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

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

 

📌 강의는 "콘텍스트 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)가 새로 만들어지는 것 아닌가요? 제가 잘 못 이해를 하고 있는건지 혼동이 옵니다.

 

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

redux react

답변 1

1

이재승

안녕하세요

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

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

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

자동완성기능이 안되네요 ..

0

499

3

화면에 에러가나네요 ...

0

515

2

setValue 함수 질문 있습니다.

0

840

1

찾아야한다 실습 문의

0

469

1

훅 기초 익히기 - 배치 처리와 순차적 처리의 차이

0

470

1

cra, next.js 관련 질문 드립니다!

0

605

1

useState 배열 비구조화 문법 질문!

0

252

1

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

1

1081

2

Saga 오류 이거 혹시 왜이런지 알수 있을까요?

0

370

2

http://localhost:3001/user/search?keyword=u 이걸로 데이터를 보는데 저는 사이트에 연결할 수 없다고 나오네요

0

656

1

match

1

494

1

버튼이 생성되지 않습니다 .

0

286

1

혹시 import 옆에 파일 사이즈 표시 어떻게 하나요?

0

262

1

saga 문제

0

248

1

에러가 발생하는데 이유가뭘까요..?

0

388

2

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

0

202

1

컴포넌트와 컨테이너의 기준

0

315

1

커스텀훅의 개념과 함수차이

1

1197

1

useEffect 실전 활용법(1) 강의에서 질문있습니다.

0

337

1

리덕스, 사가파일들의 관리

0

207

1

useImperativeHandle 질문 입니다.

0

280

1

컴파일 문의드립니다.

0

202

1

React.memo 관련 질문이 있습니다.

0

373

1

Context API vs Redux 사용 빈도

0

211

1