[React] Hooks & Context - 3
1. Component간 통신Permalink
- 하위 Component를 변경하기Permalink
// src/components/A.jsx
export default function A() {
const [value, setValue] = useState("아직 안바뀜");
return (
<div>
<B value={value} />
<button onClick={click}>E의 값 바꾸기</button>
</div>
);
function click() {
setValue("E의 값 변경");
}
}
function B({ value }) {
return (
<div>
<p>여긴 B</p>
<C value={value} />
</div>
);
}
function C({ value }) {
return (
<div>
<p>여긴 C</p>
<D value={value} />
</div>
);
}
function D({ value }) {
return (
<div>
<p>여긴 D</p>
<E value={value} />
</div>
);
}
function E({ value }) {
return (
<div>
<p>여긴 E</p>
<h3>{value}</h3>
</div>
);
}
// src/App.js
import logo from "./logo.svg";
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="logo" alt="logo" />
<A />
</header>
</div>
);
}
export default App;
- 상위 Component를 변경하기Permalink
// src/components/A.jsx
export default function A() {
const [value, setValue] = useState("아직 안바뀜");
return (
<div>
<p>{value}</p>
<B setValue={setValue} />
</div>
);
}
function B({setValue}) {
return (
<div>
<p>여긴 B</p>
<C setValue={setValue} />
</div>
);
}
function C({setValue}) {
return (
<div>
<p>여긴 C</p>
<D setValue={setValue} />
</div>
);
}
function D({setValue}) {
return (
<div>
<p>여긴 D</p>
<E setValue={setValue}/>
</div>
);
}
function E({setValue}) {
return (
<div>
<p>여긴 E</p>
<button onClick={click}>클릭</buttin>
</div>
);
function click() {
setValue('A의 값을 변경');
}
}
2. Context APIPermalink
하위 Component 전체에 데이터를 공유하는 법Permalink
- 데이터를 Set 하는 것
- 가장 상위 Component => 프로바이더
- 데이터를 Get 하는 것
- 모든 하위 Component에서 접근 가능
- 컨슈머로 하는 방법
- Class Component의 this.context로 하는 방법
- Functional Component의 useContext로 하는 방법
- 모든 하위 Component에서 접근 가능
@1. 데이터를 Set 하기Permalink
- 일단 컨텍스트를 생성
- 컨텍스트.프로바이더를 사용
- value를 사용
// src/contexts/PersonContext.js
import React from "react";
const PersonContext = React.createContext();
export default PersonContext;
// src/index.js
const persons = [
{id: 0, name: 'Mark', age: 39},
{id: 1, name: 'Hanna', age: 28}
]
ReactDOM.render(
<React.StrictMode>
<PersonContext.Provider value={persons}>
<App />
</PersonContext.Provider>
</React.StrictMode>
document.getElementById("root")
);
@2. 데이터를 Get 하기 - ConsumerPermalink
- 컨텍스트를 가져옴
- 컨텍스트.컨슈머를 사용
- value를 사용
// src/components/Example1.jsx
import PersonContext from "../contexts/PersonContext";
export default function Example1() {
return (
<PersonContext.Consumer>
{(persons) => (
<ul>
{persons.map((person) => (
<li>{person.name}</li>
))}
</ul>
)}
</PersonContext.Consumer>;
);
}
// src/App.js
import logo from "./logo.svg";
import "./App.css";
import Example1 from "./components/Example1";
function App({ hasMounted }) {
const width = useWindowWidth();
const hasMountedFromHooks = useHasMounted();
console.log(hasMounted, hasMountedFromHooks);
return (
<div className="App">
<header className="header">
<img src={logo} className="logo" alt="logo" />
<Example1 />
</header>
</div>
);
}
export default App;
@3. 데이터를 Get 하기 - classPermalink
- static contextType에 컨텍스트를 설정
- this.context => value
// src/components/Example2.jsx
import React from "react";
import PersonContext from "../contexts/PersonContext";
export default class Example2 extends React.Component {
static contextType = PersonContext;
render() {
const persons = this.context;
return (
<ul>
{persons.map((person) => (
<li>{person.name}</li>
))}
</ul>
);
}
}
// src/App.js
import logo from "./logo.svg";
import "./App.css";
import Example1 from "./components/Example1";
import Example2 from "./components/Example2";
function App({ hasMounted }) {
const width = useWindowWidth();
const hasMountedFromHooks = useHasMounted();
console.log(hasMounted, hasMountedFromHooks);
return (
<div className="App">
<header className="header">
<img src={logo} className="logo" alt="logo" />
<Example1 />
<Example2 />
</header>
</div>
);
}
export default App;
@4. 데이터를 Get 하기 - functionalPermalink
- useContext로 컨텍스트를 인자로 호출
- useContext의 return이 value
// src/components/Example3.jsx
import PersonContext from "../contexts/PersonContext";
export default function Example1() {
const persons = useContext(PersonContext);
return (
<ul>
{persons.map((person) => (
<li>{person.name}</li>
))}
</ul>
);
}
// src/App.js
import logo from "./logo.svg";
import "./App.css";
import Example1 from "./components/Example1";
import Example2 from "./components/Example2";
import Example3 from "./components/Example3";
function App({ hasMounted }) {
const width = useWindowWidth();
const hasMountedFromHooks = useHasMounted();
console.log(hasMounted, hasMountedFromHooks);
return (
<div className="App">
<header className="header">
<img src={logo} className="logo" alt="logo" />
<Example1 />
<Example2 />
<Example3 />
</header>
</div>
);
}
export default App;
댓글남기기