provider1 [React] 컴포넌트간 통신 / Context API / provider / consumer / useContext 기존 구린 방법 1. 하위 컴포넌트 변경하기 (A의 버튼을 눌러서 B, C, D를 거쳐 E에 있는 값을 변경) 2. 상위 컴포넌트 변경하기 (E의 버튼을 눌러 역으로 D,C,B 를 거쳐 A에 있는 값을 변경) 각 함수들에 props를 인자로 받아서, B,C,D,E로 넘겨주어야 했다. 이문제를 해결하기 위해 useContext를 사용하기로 했다. 1. 하위 컴포넌트 전체에 데이터를 공유하는 방법 데이터를 set 하는 놈 = 가장 상위 컴포넌트 => provider 데이터를 get 하는 놈 = 모든 하위 컴포넌트에서 접근 가능 1) consumer import PersonContext from "../contexts/PersonContext"; export default function Example1() .. 2021. 11. 16. 이전 1 다음 반응형