• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

20.10.20 12:09 작성 조회수 142

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>;
}

답변 3

·

답변을 작성해보세요.

1

배정규님의 프로필

배정규

질문자

2020.10.20

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

1

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

1

배정규님의 프로필

배정규

질문자

2020.10.20

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