오늘 한 일
- Navigation/SearchItem의 검색 키워드를 어떻게 App의 Context API로 올려보낼지 고민중이었는데, 중첩 context로 전달할 수 있다는 것을 알게 되었다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Profile from "./Profile";
import React, { useState } from "react";
export const UserContext = React.createContext({ username: "", helloCount: 0 });
//하위 컴포넌트의 콘텍스트 데이터
export const SetUserContext = React.createContext(() => {});
//데이터를 수정하는 함수를 전달하기 위한 콘텍스트
function App() {
const [user, setUser] = useState({ username: "Ariana", helloCount: 0 });
//사용자 데이터를 하나의 상탯값으로 관리. 상태값변경 함수 setUser는 SetUserContext로 전달
return (
<div>
<SetUserContext.Provider value={setUser}>
<UserContext.Provider value={user}>
<Profile />
</UserContext.Provider>
</SetUserContext.Provider>
</div>
);
}
export default App;
Profile컴포넌트 안의 Greeting
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from "react";
import { UserContext, SetUserContext } from "./App";
function Greeting() {
return (
<SetUserContext.Consumer>
{(setUser) => (
<UserContext.Consumer>
{({ username, helloCount }) => (
<>
<p>{`${username}님 안녕하세요`}</p>
<p>{`인사 횟수: ${helloCount}`}</p>
<button
onClick={
() => setUser({ username, helloCount: helloCount + 1 })
//App컴포넌트로부터 전달된 setUser함수 이용. 버튼 클릭시 콘텍스트 데이터 수정
}
>
인사하기
</button>
</>
)}
</UserContext.Consumer>
)}
</SetUserContext.Consumer>
);
}
export default Greeting;
위의 코드는 helloCount속성만 변경할 때도 사용자 데이터를 만들어서 setUser함수에 입력해야한다는 단점이 있는데, 이를 useReducer로 개선할 수 있다고 한다. 이제 useReducer를 사용해봐야겠다.
