나의 개발일지

react-memo memo(React.memo) : 컴포넌트를 캐싱 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트는 모두 리렌더링 되는데 자식 컴포넌트는 바뀐 것이 없는데 리렌더링이 된다면 너무 비효율적임 이러한 문제점을 돕는 게 바로 memo다 src > App.jsx import { useState } from "react"; import Box1 from "./components/Box1"; import Box2 from "./components/Box2"; import Box3 from "./components/Box3"; function App() { console.log("App 컴포넌트가 렌더링되었습니다"); const [count, setCount] = useState(0); const o..

useContext의 필요성 props-drilling의 문제점을 개선 하기 위해 필요하다 useContext는 전역 데이터 관리를 할 수 있게 되었다 주의할 점 useContext를 사용할 때, provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링이 되기 때문에 value부분을 항상 신경써줘야 한다! 할아버지가 손자에게 어떠한 정보를 주기 위해서 거쳐야 하는 과정은 App → GrandFather → Father → Child 이다 단순한 정보이면 모를까 전달해야 할 데이터가 100가지가 넘는다면 너무나도 복잡하고 비효율적일 것이다 Props-drilling 적용 코드 src > App.jsx import GrandFather from "./co..

//React 강의 복습 import React from "react"; function App() { const name = "상위컴포넌트이름"; return ; // 새로운 이름을 정하고 App에서 User로 정보를 전달한다 } //컴포넌트는 대문자 function User(props) { return {props.comp_name}; // props.로 정보를 전달받는다! {} 필수! } export default App; //------------------------------------------------------------------------------ import React from "react"; //부모 function App() { return 안녕하세요 //컴포넌트 사이에 낀 ..