-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
선생님과 똑같이 했는데 다 rendering 됩니다.
22.03.21 20:32 작성 조회수 99
0
선생님 말씀에 의하면
아래와 같이 넣으면 greeting 컴포넌트는 랜더링이 안된다고 하셨는데요.
<UserContext.Provider value ={user}>
콘텍스트 API로 데이터 전달하기 강의에서
선생님과 똑같이 했는데 다 프로파일 컴포넌트와 그리팅 컴포넌트가 다 rendering 됩니다.
무엇이 잘못 된 것일까요?
길지 않아 소스를 아래에 넣습니다.
=======소스 =========
import './App.css';
import {createContext, useContext, useState} from "react";
export const UserContext = createContext({username:'unknown', age:0});
export default function App() {
const [user, setUser] = useState({username:'scmoon',age:19})
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>
);
}
function Profile(){
console.log('profile render..')
return (
<div>
<Greeting/>
</div>
);
}
function Greeting(){
console.log('greeting render..');
const {username} = useContext(UserContext);
return `${username} 님 안녕하세요. `
}
=====console 결과 ========
app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render..
답변을 작성해보세요.
0
이재승
지식공유자2022.03.21
안녕하세요
말씀하신 내용은 Profile 컴포넌트를 React.memo 로 래핑해야 동작합니다
영상 5:07 부분의 코드를 참고하시면 될 것 같아요
답변 1