왕가's history

useContext 2023.06.23 - [Front-End/React] - React] Hook : useContext 앞 게시글에서 얘기했던 useContext의 단점은 리렌더링이 자주 발생하게 된다는 것입니다. 이를 개선하고자 합니다. 예 HTML 삽입 미리보기할 수 없는 소스 앞에 예를 들었던 마트 코드에서는 2층 과일, 3층 음료수로 변경하였습니다/ 만약 addDrink뿐만 아니라 addFruit를 context추가하여 사용하고, 이를 Emart2F라는 컴포넌트를 새로 만들어서 사용한다고 생각하면, addFruit 하게 될 때 Emart3F도 리렌더링 되는 현상을 볼 수 있을 것입니다. 이를 해결하려고 몇 가지 수정했습니다. Emart.js import React, { useState, use..

useContext 개발하다 보면 props를 여러 번 넘길 때가 찾아오곤 합니다. 증조부모 → 조부모 → 부모 → 자식 → ... 이렇게 props를 계속 넘기다 보면 엄청난 노가다를 해야 될 수도 있고, 유지보수 측면, 가독성 등 안 좋은 점이 많습니다. 이를 개선하기 위해 전역적으로 데이터를 관리할 수 있는 Context를 사용하면 됩니다. Context를 사용하면 증조부모에서 자식까지 한 번에 데이터를 전달할 수 있습니다. (사용하기에 다른 hook보다 복잡할 수 있습니다.) createContext(initialValue) context객체 생성 createContext호출 시, Provider와 Consumer 반환 Context.Provider 생성한 context를 하위 컴포넌트에 전달 u..