콘텍스트 API로 데이터 전달하기
상위 컴포넌트 -> 하위 컴포넌트로 데이터 전달 시 속성값이 사용된다.
많은 수의 하위 컴포넌트로 속성값을 내려줄 때는 코드를 반복적으로 작성해야하는 문제가 있는데,
이 때 context API를 사용하면 컴포넌트의 중첩구조가 복잡한 상황에서도 비교적 쉽게 데이터를 전달할 수 있다.
context API를 사용하면 상위 컴포넌트에서 하위의 모든 컴포넌트로 직접 데이터를 전달할 수 있다.
예제
app.js의 UserContext를 Profile안의 Greeting컴포넌트로 전달하기
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Profile from "./Profile";
import React, { useState } from "react";
export const UserContext = React.createContext("");
function App() {
const [username, setUsername] = useState("");
return (
<div>
<UserContext.Provider value="mike">
<Profile />
</UserContext.Provider>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
);
}
export default App;
Profile.js
1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import Greeting from "./Greeting";
const Profile = React.memo(() => {
return (
<div>
<Greeting />
</div>
);
});
export default Profile;
Greeting.js
1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import { UserContext } from "./App";
function Greeting() {
return (
<UserContext.Consumer>
{(username) => <p>{`${username}님 안녕하세요`}</p>}
</UserContext.Consumer>
);
}
export default Greeting;
consumer안의 모든 컴포넌트 는 Provider 컴포넌트의 속성값이 변경되면 다시 렌더링된다.
위의 username의 수정할 때 Profile 컴포넌트가 불필요하게 렌더링되지 않게 넣은 것이 React.memo다.
컴포넌트의 props가 바뀌지 않았다면 리렌더링을 방지해서 컴포넌트의 리렌더링 성능 최적화를 할 수 있다.
- React.memo는 컴포넌트를 감싸주기만 하면 된다.
