리엑트 - Context API

songmin jeon·2024년 4월 26일

클라우드기반 인공지능서비스 엔지니어링과정

목록 보기

135/138

Context

Component

상위에서 하위로 전달

각 변수들을 사용하려면 최상층에 선언해야 전역변수로 사용할 수 있음 (지역변수로는 모든 곳에 부를 수 없음..)

Context API

전역 형태로 만들어서 모든 곳에 사용가능하게 함

꼭 필요할때만 쓰자!

Context 파일 생성 (저장소)

상위

Component 와 Context API 차이

Component
Context API

Context 기초 실습1

Context 기초 실습2

Ex01.js

import React from "react";
import ParentComponent from "./components/ParentComponent";
import { useState } from "react";
import { InputContext } from "./context/InputContext";

const Ex01 = () => {
  const [content, setContent] = useState("");

  console.log(content);

  return (
    <div>
      <InputContext.Provider value={{ content, setContent }}>
        <ParentComponent />
      </InputContext.Provider>
    </div>
  );
};

export default Ex01;

ParentComponent.jsx

import React from "react";
import ChlidComponent1 from "./ChlidComponent1";
import { useContext } from "react";
import { InputContext } from "../context/InputContext";
import Counter from "./Counter";

const ParentComponent = () => {
  console.log("ParentComponent 방문");
  const { setContent } = useContext(InputContext);

  return (
    <div>
      <ChlidComponent1 />
      <input type="text" onChange={(e) => setContent(e.target.value)} />
    </div>
  );
};

export default ParentComponent;

ChlidComponent1.jsx

import React, { memo } from "react";
import ChlidComponent2 from "./ChlidComponent2";

// memo() : 컴포넌트의 랜더링 결과를 저장하고 이후 데이터 변화가 생겼을 떄
//          랜더링 결과를 이전 결과와 비교해서 업데이트
export const ChlidComponent1 = memo(() => {
  console.log("ChlidComponent1 랜더링");
  return (
    <div>
      <ChlidComponent2></ChlidComponent2>
    </div>
  );
});

export default ChlidComponent1;

ChlidComponent2.jsx

import React from "react";
import { useContext } from "react";
import { InputContext } from "../context/InputContext";

const ChlidComponent2 = () => {
  console.log("ChlidComponent2 랜더링");
  const { content } = useContext(InputContext);

  return <div>{content}</div>;
};

export default ChlidComponent2;

InputContext.js

import { createContext } from "react";

export const InputContext = createContext("");

컴포넌트 총 4개

라우트

라우트 사용시 초기 세팅 및 주의사항!

설치 코드
- 라우터 사용하는 거라면 꼭 설치하기!

npm i react-router-dom

BrowserRouter 태그 감싸주기
라우트 주의사항!
- <Routes.> 태그 사용시 영역을 분리 해주자 !

라우트 실습1

App.js

import { Routes, Route, Link } from "react-router-dom";
import "./App.css";
import Home from "./component/Home";
import About from "./component/About";
import Product from "./component/Product";

function App() {
  return (
    <div>
      {/* 
        Routes 컴포넌트 : Route에 연결된 컴포넌트 중 
        요청 URL과 일치한 Rote만 랜더링 해주는 컴포넌트

        Route 컴포넌트 : URL을 정의하고 컴포넌트를 매핑해주는 컴포넌트
        path속성 : 매핑할 컴포넌트
        element속성 : 매핑할 컴포넌트
      */}
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
        <Route path="/product" element={<Product />}></Route>

        {/* 
          Product 페이지로 이동할 수 있는 Route 컴포넌트 만들기 
          1. Product 컴포넌트 생성
          2. Route 컴포넌트로 경로 지정 및 컴포넌트 연결
            - 경로 : /product
          3. Home 페이지에서 Product 페이지로 이동할 수 있는 Link 컴포넌트 생성
        */}
      </Routes>
    </div>
  );
}

export default App;

Home.jsx

import React from "react";
import { Routes, Route, Link, useNavigate } from "react-router-dom";

const Home = () => {
  // 페이지를 이동할때 사용하는 함수
  // 로직 처리 후에 페이지 이동을 해야할 경우 => useNavigate
  // 단순히 페이지 이동 -> Link 컴포넌트
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate("/about");
  };

  return (
    <div>
      Home
      <h1>Home</h1>
      <p>Home</p>
      {/* Link 컴포넌트 : 다른 페이지 컴포넌트로 이동할 수 있게 동작하는 컴포넌트
              -> App에 있는 Routes 컴포넌트가 요청경로 확인
              -> 요청 경로에 맞는 Route 컴포넌트를 실행

           to 속성 : 요청할 경로 정의 
        */}
      <Link to={"/product"}>product로 이동</Link>
      <br></br>
      <Link to={"/about"}>about으로 이동</Link>
      <button onClick={goToAbout}></button>
    </div>
  );
};

export default Home;

About.jsx

import React from "react";
import { Routes, Route, Link } from "react-router-dom";

const About = () => {
  return (
    <div>
      About
      <h1>About</h1>
      <p>About</p>
      {/* Home 페이지 컴포넌트로 이동하는 Link 컴포넌트 만들어보기 ! */}
      <Link to={"/"}>home으로 이동</Link>
    </div>
  );
};

export default About;

Product.jsx

import React from "react";
import { Routes, Route, Link, useNavigate } from "react-router-dom";

const Product = () => {
  return (
    <div>
      Product
      <h1>Product</h1>
      <p>Product</p>
      <Link to={"/"}>home으로 이동</Link>
    </div>
  );
};

export default Product;

라우트 실습 2

내 방식

AppMember.js

import React, { useState } from "react";
import { Routes, Route, Link } from "react-router-dom";
import "./App.css";
import Join from "./component/Join";
import Login from "./component/Login";
import Main from "./component/Main";
import { LoginContext } from "./context/LoginContext";

function AppMember() {
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");
  const [nick, setNick] = useState("");
  return (
    <div>
      <LoginContext.Provider value={{ id, setId, pw, setPw, nick, setNick }}>
        <Routes>
          <Route path="/" element={<Join />}></Route>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/main" element={<Main />}></Route>
        </Routes>
      </LoginContext.Provider>
    </div>
  );
}

export default AppMember;

LoginContext.js

import { createContext } from "react";

export const LoginContext = createContext("");

Join.jsx

import React from "react";
import { useNavigate } from "react-router-dom";
import { useContext, useRef } from "react";
import { LoginContext } from "../context/LoginContext";

const Join = () => {
  const nav = useNavigate();
  const { id, setId, pw, setPw, nick, setNick } = useContext(LoginContext);

  const putId = useRef();
  const putPw = useRef();
  const putNick = useRef();

  const goToJoin = () => {
    setId(putId.current.value);
    setPw(putPw.current.value);
    setNick(putNick.current.value);
    nav("/login");
  };

  return (
    <div>
      <h1>회원가입 페이지 입니다.</h1>
      ID:
      <input type="text" ref={putId} />
      <br></br>
      PW:
      <input type="text" ref={putPw} />
      <br></br>
      NICK:
      <input type="text" ref={putNick} />
      <br></br>
      <button onClick={goToJoin}>join</button>
      <button type="reset">초기화</button>
    </div>
  );
};

export default Join;

import React from "react";
import { useNavigate } from "react-router-dom";
import { useContext, useRef } from "react";
import { LoginContext } from "../context/LoginContext";

const Login = () => {
  const nav = useNavigate();
  const { id, setId, pw, setPw, nick, setNick } = useContext(LoginContext);

  const inputId = useRef();
  const inputPw = useRef();

  // 확인용
  console.log({ id });
  console.log({ pw });
  console.log({ nick });

  const goToMain = () => {
    if (inputId.current.value === id && inputPw.current.value === pw) {
      nav("/main");
    } else {
      alert("비번 아디 틀림!");
    }
  };

  return (
    <div>
      <h1>Login 페이지</h1>
      ID:
      <input type="text" ref={inputId} />
      <br></br>
      PW:
      <input type="text" ref={inputPw} />
      <br></br>
      <button onClick={goToMain}>join</button>
    </div>
  );
};

export default Login;

Main.jsx

import React from "react";
import { useNavigate } from "react-router-dom";
import { useContext } from "react";
import { LoginContext } from "../context/LoginContext";

const Main = () => {
  const nav = useNavigate();
  const { id, setId, pw, setPw, nick, setNick } = useContext(LoginContext);
  return (
    <div>
      <h1>Home</h1>
      {nick}님 환영합니다.
    </div>
  );
};

export default Main;