[TIL] 리액트를 이용한 CRUD구현하기(1)

김의진·2023년 7월 26일

CRUD React

TIL/WIL

목록 보기

33/44

💻리액트를 이용한 CRUD구현하기(1)

과제의 조건은 아래와 같다.

필요한 기능을 확인하고 파일 구조를 파악해야한다.
그리고 구현하기 위해서 어떤 기능들이 필요한지 생각해야함 .

👩🏼‍💻구현하기

( 참고로 과제로 기본 css는 제공되어 따로 스타일 컴포넌트 분리는 하지 않았다. )

1. Router 구조 만들기

npm install react-router-dom
(yarn add redux react-redux)

import { Routes, Route } from "react-router-dom";
혹은, import { BrowserRouter, Route, Routes } from "react-router-dom";
확인하기

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>				
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

Router 라는 함수를 만든다.
BrowserRouter를 Router로 감싸는 이유는,
SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어주기 때문이다.

					Routes안에 Route작성,
                    Route에는 react-router-dom에서 지원하는 props들이 있음.
					path= "주소"
					element=해당 주소로 이동했을 때 보여주고자 하는 컴포넌트

2. useState로 데이터 저장해서 컴포넌트로 전달

import { useState } from "react";

useState ?
리액트에서는 값이 변하여 화면에 랜더링이 되어야 할때 useState를 사용한다 ( 변수를 사용하지 않는다.)

const=[value,setValue]= useState('');

형태로 사용한다.

상위 컴포넌트에서 저장하여 하위로 전달 해야 하기 때문에 App.js에서 useState로 저장, 하위컴포넌트에 props 형태로 전달하였다.

2. useState로 데이터 저장해서 Main에서 보여주기

Main컴포넌트에서는 이런식으로 받아 올 수 있다.

memoData && 를 통해 부분에서 memoData가 있을 때만 실행 되도록 하였다.

useNavigate

const navigate = useNavigate();

선언 해준 뒤 사용함
페이지 이동시에 사용함,함수 호출을 통해서 특정 조건을 충족 할 때 페이지 이동을 하도록 할 수 있음

삭제 구현하기

내가 클릭한 것만 제외하고 나머지를 보여주도록 구현하면 된다

3. 추가하기 버튼 구현

1) 추가 버튼 클릭시 create 페이지로 이동 되도록
useNavigate를 이용하여 작성함

<button
            onClick={() => {
              navigate("/create");
            }}

2) Create 컴포넌트에서 title과 content 추가하면 Main에서 보여지게 만들기
역시 memoData를 프롭스로 받는다

Ui 가 바뀌는 title과 content는 useState로 선언해주고

새로운 배열을 선언하고, 이전 배열에 추가 되도록 한다.

form, input,button에 각각 기능을 넣어주면된다 .

4. 수정하기 버튼 구현

수정하기 클릭시 클릭한 데이터만 보이도록 구현하기.

내가 클릭한것 id= memoid일때
새로운 객체를 만들어 기존 메모의 속성을 그대로 유지하면서
title과 content 속성만 새로운 값으로 바꾸기.
이렇게 하면 특정 id의 메모만 업데이트되고, 나머지 메모들은 그대로 유지됨.
또한 return memo; 를 통해서 업데이트할 필요가 없는 메모들은 그대로 유지

input의 value와 onChange이용하기