51강_220718_React(useContext, useMemo 활용_TODOLIST 제작)

 

 

 

 

---

과제내용

TODO LIST

• 컴포넌트
  • 부모 컴포넌트
  • 내용 컴포넌트
    • 전역으로 내용관리
  • 작성 컴포넌트(팝업)
• 가능
  • 게시판 제목과, 사용자 이름은 변경이 가능하다.
    • 제목과 이름 변경 시, 리스트는 리렌더링 되지 않는다.
  • 리스트가 렌더링 되는 경우는 리스트의 내용이 추가되었을 때만이다.
  • 신규 작성 시, 작성 버튼으로 팝업이 열려서 작성 컴포넌트에서 수행한다.

 

 

 

 

---

결과물

 

💻 App.js_useContext를 사용할 수 있도록 Provider를 설정한다.

• createContext를 실행하는 Global객체를 선언하여, Provider로 state객체를 초기값으로 설정한다.
  • 루트 컴포넌트인 App 컴포넌트 상위에 Global.Provider를 감싸 context를 사용할 수 있도록 설정하였다.

import { createContext } from "react";
import "./App.css";
import { useState } from "react";
import { Lists } from "./components/layout/Lists";
import WriterContext from "./components/hooks/context/WriterContext";
import PostCreDiv from "./components/hooks/reducer/PostCreDiv";
import Postrender from "./components/hooks/memo/Postrender";
import { Postbox } from "./components/layout/Postbox";
import { Popbox } from "./components/layout/Popbox";
import PopBtn from "./components/PopBtn";
import PopDispaly from "./components/PopDispaly";
const Global = createContext();

function App() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [writer, setWriter] = useState("User");
  const [list, setList] = useState([]);

  const state = {
    list,
    setList,
    title,
    setTitle,
    content,
    setContent,
    writer,
    setWriter,
  };
  return (
    <Global.Provider value={state}>
      <div className="App">
        <Postbox>
          <WriterContext></WriterContext>
          <Lists>
            <Postrender></Postrender>
          </Lists>
          <PopBtn></PopBtn>
        </Postbox>
        <PopDispaly></PopDispaly>
      </div>
    </Global.Provider>
  );
}

export { App, Global };

 

💻 WriterContext.js_useContext에서 선언한 writer와 title의 상태값을 업데이트 한다.

• input에 입력한 값으로 button을 클릭하면 상태값에 업데이트되고 reder시켜 확인할 수 있다.

import React from "react";
import { useContext } from "react";
import { Writer } from "../../layout/Writer";
import { Global } from "../../../App";

const WriterContext = () => {
  const { writer, setWriter, title, setTitle } = useContext(Global);

  const HandleClick1 = () => {
    const inwriter = document.getElementById("writer");
    setWriter(inwriter.value);
  };
  const HandleClick2 = () => {
    const intitle = document.getElementById("title");
    setTitle(intitle.value);
  };
  return (
    <Writer>
      <div>
        <p>작성자 : {writer}</p>
        <p>제목 : {title}</p>
      </div>
      <div>
        <input
          type="text"
          placeholder="사용자명을 입력하세요"
          id="writer"
        ></input>
        <button
          onClick={() => {
            HandleClick1();
          }}
        >
          변경
        </button>
      </div>
      <div>
        <input
          type="text"
          placeholder="제목을 입력하세요"
          id="title"
        ></input>
        <button
          onClick={() => {
            HandleClick2();
          }}
        >
          변경
        </button>
      </div>
    </Writer>
  );
};

export default WriterContext;

 

💻 PostCreDiv.js_할 일을 작성하는 컴포넌트이다. 해당 컴포넌트를 팝업으로 띄우고 작성한 내용을 상태값 list에 저장한다.

import React, { useReducer } from "react";
import { PostDiv } from "../../layout/PostDiv";
import { Global } from "../../../App";
import { useContext } from "react";
import { useDispatch } from "react-redux";
import { useMemo } from "react";
const PostCreDiv = () => {
  const { content, setContent, list, setList } = useContext(Global);

  const HandleClick = () => {
    const input = document.getElementById("posts");
    setList([...list, input.value]);
    document.querySelector("#post").style.display = "none";
  };

  const Pop = () => {
    const post = document.querySelector("#post");
    post.style.display = "none";
  };

  return (
    <PostDiv>
      <input
        type="text"
        placeholder="할 일을 입력하세요."
        id="posts"
      ></input>
      <div>
        <div
          onClick={() => {
            HandleClick();
          }}
        >
          등록
        </div>
        <div
          onClick={() => {
            Pop();
          }}
        >
          닫기
        </div>
      </div>
    </PostDiv>
  );
};

export default PostCreDiv;

 

💻 Postrender.js_list 상태값을 불러오는 컴포넌트이다. useMemo를 사용하여 list값이 변할때만 리렌더링된다.

import React from "react";
import { Post } from "../../layout/Post";
import { Global } from "../../../App";
import { useContext } from "react";
import { useEffect } from "react";
import { useMemo } from "react";
const Postrender = () => {
  const { list, setList } = useContext(Global);

  const view = useMemo(() => {
    return list.map((el, index) => {
      return (
        <div key={index}>
          <div>{index + 1}</div>
          <div>{el}</div>
        </div>
      );
    });
  }, [list]);

  return (
    <Post>
      <div>{view}</div>
    </Post>
  );
};

export default Postrender;