본문 바로가기
카테고리 없음

[React] Context | UseContext Hook 실행

by CodeMia 2022. 6. 20.

다음과 같이 기본 화면이 있었다가

 

 

버튼을 누르면 화면이 어둡게 바뀌는 웹 페이지가 있다. 

 

 

Props를 사용하는 경우 

위 웹 페이지를 props를 사용해서 코드를 짜보면 다음과 같다. 

 

 

App.js 

isDark, setIsDark를 useState에 저장하고 

기본값을 false로 설정한다. 

import React, { useState } from "react";
import "./styles.css";
import Page from "./components/Page";

export default function App() {
const [isDark, setIsDark] = useState(false);
return (
<div>
<Page isDark={isDark} setIsDark={setIsDark} />
</div>
);
}

 

Page.jsx

import React from "react";
import Header from "./Header";
import Content from "./Content";
import Footer from "./Footer";

const Page = ({ isDark, setIsDark }) => {
return (
<div>
<Header isDark={isDark} />
<Content isDark={isDark} />
<Footer isDark={isDark} setIsDark={setIsDark} />
</div>
);
};

export default Page;

 

 

Header.jsx

import React from "react";

const Header = ({ isDark }) => {
return (
<div
className="header"
style={{
backgroundColor: isDark ? "black" : "lightgray",
color: isDark ? "white" : "black"
}}
>
<h1>안녕하세요 여러분</h1>
</div>
);
};

export default Header;

 

 

Content.jsx

import React from "react";

const Content = ({ isDark }) => {
return (
<div
className="content"
style={{
backgroundColor: isDark ? "black" : "white",
color: isDark ? "white" : "black"
}}
>
<h1>좋은 하루 되세요 </h1>
</div>
);
};

export default Content;

 

 

Footer.jsx

버튼을 누르면 IsDark를 false-> true로 true -> false로 바꿔준다.

import React from "react";

const Footer = ({ isDark, setIsDark }) => {
const toggleTheme = () => {
setIsDark(!isDark);
};

return (
<div
className="footer"
style={{
backgroundColor: isDark ? "black" : "lightgray"
}}
>
<button className="button" onClick={toggleTheme}>
Dark Mode
</button>
</div>
);
};

export default Footer;

 

 

context  

 

이제는 props가 아닌 context를 이용해서 코드를 짜보자. 

 

context : context는 데이터 저장소. 

데이터를 원하는 여러 컴포넌트들에 바로 데이터를 전달할 수 있다.

context를 사용하면 컴포넌트를 재사용 할 수 없으니 필요할 때만 사용한다. 

prop drilling을 피하고자 한다면 component composition도 방법이 된다. 

 

 

1. context를 만들기 

react에서 createContext를 불러와서 함수를 실행해 준다.

 

 

2. context로 App 전체 감싸주기

app.js에 가서

만들어 놓은 context를 context.jsx에서 import 한 후 

context으로 전체 태그를 감싸준다.

 

 

 

3. 전달하고자 하는 데이터를 value 안에 넣어주기 

지금 같은 경우는 isDark와 setIsDark를 모든 하위 컴포넌트에 전달해야하니 

{ } 감싸서 오브젝트로 만들어 넣어준다. 

 

 

 

ThemeContext로 감싸는 모든 하위 컴포넌트는 props를 사용하지 않고 

isDark, setIsDark 를 접근 할 수 있게 되었다. 

 

 

 

그럼 확인하기 위해 이 전에 적어준 page 태그에 있는 props를 지우고 

 

 

 

Page.jsx에 가서도 props를 지운다. 

 

 

 

연습 ) page에 useContext로 데이터 받아오기 

 

그럼 이제 context로 전달한 데이터를 받아와 보자. 

이 때 useContext 훅을 사용한다. 

1: useContext 훅을 불러온다.

2: context 파일에서 만든 context를 불러온다. 이름은 ThemmeContext

3: useContext 함수에 ThemeContext를 불러와서 data 이름으로 데이터를 받아 놓는다 

 

 

콘솔에 보니 object가 하나 나온다. 

 

 

app에 있는 useState 내용이 page 컴포넌트로 이동한 것이다. 

<page />태그를 보면 알다시피

props 전달 없이 context로만 받은 것이다. 

 

 

 여기서 page 컴포넌트는 데이터가 필요 없기 때문에 context를 사용하지 않는다. 

대신 Header, Content, Footer 가 data를 필요로 한다. 

그래서 page에 있는 context 관련 내용은 전부 지워준다. 

 

 

 

 

4. 데이터가 필요한 페이지에서 context를 실행 시키기 

 

4-1 Header 

Header로 가서 isDark와 setIsDark 중에서 

setIsDark는 필요로 하지 않으니 destructuring 하지 않는다. 

prop은 지운다. 

 

 

4-2 Content.jsx 

 

 

4-3 Footer.jsx

 

 

 

context 초기값을 null이 아니라 'hello'로 하면? 

 

 

App에서 value가 없이 Provider로 감싸주지 않는 경우 ... 

 

 

 

-- 출처 --

댓글

티스토리툴바