inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

실전 리액트 프로그래밍

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

caution.js 렌더링 확인 좀 부탁드립니다.

315

배정규

작성한 질문수 5

1

import React, { createContext, useState, useContext } from "react";

const UserConText = createContext({ username: "unknown", age: 0 });

export default function App() {
  const [user, setUser] = useState({ username: "마이크", age: 23 });
  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>
  );
}

const Profile = React.memo(function () {
  console.log("Profile render");
  return (
    <div>
      <Greeting />
    </div>
  );
});

function Greeting() {
  console.log("Greeting render");
  const { username } = useContext(UserConText);
  return <p>{`${username}님 안녕하세요`}</p>;
}

redux react

답변 3

1

배정규

네 맞아요! StrictMode 지우고 하니까 한 번씩 렌더링 되네요 ㅎㅎ 빠른 답변 감사합니다! 

1

이재승

안녕하세요
혹시 create-react-app 인가요?
맞다면 index.js 쪽을 보면 아마 StrictMode 컴포넌트가 있을거에요
StrictMode 를 지우고 해보시겠어요?
참고로 StrictMode 가 있으면 concurrent mode 대응을 위해 리액트가 고의로 두 번씩 렌더링 합니다

1

배정규

App render 가 콘솔로그에 2번씩 찍히면서 렌더링이 2번씩 발생되고 있는데 이유를 알 수 있을까요? 

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

0

500

3

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

0

517

2

setValue 함수 질문 있습니다.

0

841

1

찾아야한다 실습 문의

0

470

1

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

0

473

1

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

0

606

1

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

0

252

1

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

1

1082

2

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

0

371

2

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

0

658

1

match

1

495

1

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

0

288

1

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

0

263

1

saga 문제

0

249

1

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

0

389

2

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

0

203

1

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

0

316

1

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

1

1199

1

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

0

338

1

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

0

208

1

useImperativeHandle 질문 입니다.

0

281

1

컴파일 문의드립니다.

0

204

1

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

0

374

1

Context API vs Redux 사용 빈도

0

213

1