useContext
useContext로 상위 컴포넌트가 전달한 props에 접근 할 수 있다.
useContext 사용하기
훅을 사용할 땐 문서 가장 위에 아래와 같이 적어주어야 한다.
import { createContext, useContext } from "react"
그리고 const AuthContext = createContext();라고 작성하여 사용할 준비를 한다.
(함수 바깥에 적어준당.)
useContext를 활용하여 아주아주 간단한 인스타 같은 화면에
환영합니다 [유저이름]님!과 같은 멘트를 띄워볼거다.
- Snippet 컴포넌트
총 4개의 컴포넌트를 만들어줄거다! 가장 상위는 Snippet이고 아래처럼 묶어주었다.
Snippet 안의 만들 컴포넌트는 아래와 같다.
AuthProvider: 유저데이터를 관리하는 컴포넌트Layout: 환영합니다 문구를 렌더링할 컴포넌트Article: 게시글 컴포넌트
구조는 아래처럼 AuthProvider가 자식 컴포넌트들을 감쌀 수 있도록 해준다.
function Snippet() {
return (
<AuthProvider>
<Layout />
<Article />
</AuthProvider>
)
}- AuthProvider 컴포넌트
위에서 선언한 AuthContext를 사용하였다.
children props로 자식컴포넌트에게 정보를 전달 할 수 있다.
전달해 줄 값은 const value = { username: 'bunny', userlevel: '프리미엄' }; 이다.
{children}를 AuthContext.Provider로 감싸준 형태로 작성하면
자식 컴포넌트들이 정보를 사용할 수 있다.
function AuthProvider({ children }) {
const value = { username: 'bunny', userlevel: '프리미엄' };
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
);
}- Layout 컴포넌트
여기까지 했으면 이제 완전 짱 다 했다!
이제 AuthProvider의 정보를 useContext(AuthContext)로 자식 컴포넌트에서 사용할 수 있다.
지금 useContext(AuthContext)에 담겨있는 정보는 const value = { username: 'bunny', userlevel: '프리미엄' }; 이다!
아래와 같이 작성해 보자
function Layout() {
return (
<>
<h1>Instagram</h1>
<nav>
<ul>
<li>Home</li>
<li>Posts</li>
<li>Profile</li>
</ul>
</nav>
<p>안녕하세요, {useContext(AuthContext).username}님! </p>
<p>{useContext(AuthContext).username}님은
<b>{useContext(AuthContext).userlevel}</b>회원입니다.
</p>
</>
)
}- Article 컴포넌트
이건 그냥 모양만 만든거니까 빠르게 넘어가자
function Article() {
return (
<section>
<img
src="https://..."
width="500px"
/>
<p>
<b>snoop_bunny_s2</b> 주인나감 😥<br />
<small>1일전</small>
</p>
</section>
)
}🔽 완성된 화면:
