-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
caution.js 렌더링 확인 좀 부탁드립니다.
20.10.20 12:09 작성 조회수 154
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>;
}
답변을 작성해보세요.
1
1
이재승
지식공유자2020.10.20
안녕하세요
혹시 create-react-app 인가요?
맞다면 index.js 쪽을 보면 아마 StrictMode 컴포넌트가 있을거에요
StrictMode 를 지우고 해보시겠어요?
참고로 StrictMode 가 있으면 concurrent mode 대응을 위해 리액트가 고의로 두 번씩 렌더링 합니다
1
답변 3