React 사용하기

📒 왜? (React 사용 이유)

◼ Single Page Application을 만들 때, 사용한다.

   💬 Single Page Application은 새로고침 없이 돌아가는 페이지로 앱처럼 부드럽게 동작한다.

◼바닐라 JS로 웹 페이지를 만들 경우, 코드가 길어지고 너무 복잡해진다. 그래서 React 라이브러리를 사용한다.

◼ React를 사용하면 HTML 재사용이 편리해진다.

✨ React는 HTML, CSS, JavaScript 웹 개발을 편리하게 도와주는 라이브러리이다.

---

📒 개발 환경 세팅하기

1.  node js를 설치한다.

2.  터미널에서 원하는 경로로 이동한 뒤, npx create-react-app {프로젝트 폴더명} 명령어를 입력한다. 

   💬 create-react-app(cra)는 React로 개발 프로젝트를 시작할 때, 웹팩, 바벨 등 기본적인 프로젝트 세팅을 도와주는 라이브러리이다.

   💬 웹팩(webpack), 바벨(babel)의 역할은 ES 최신 버전의 코드들을 모든 브라우저에서 해석할 수 있는 코드로 바꿔주는 역할을 한다.

3. 개인 IDE로 프로젝트를 Open 하고, 터미널에서 npm start 명령어를 입력하면 localhost:3000에서 확인할 수 있다.  

✔ 프로젝트 구조

◼ node_modules 폴더는 프로젝트에 필요한 모든 라이브러리 코드 보관함이다.

◼ public 폴더는 static 파일을 보관하는 곳이다.

   💥 public 폴더 안에 있는 파일들은 bundling 작업이 진행될 때, 압축되지 않는다.

◼ src/App.js가 메인 페이지를 구성하고 있는 JS 파일이다.

   💥 보통은 HTML 파일로 페이지를 구성하는 것이 기본이지만, src 폴더 아래 html 파일이 없는 이유는 public 폴더 아래 index.html이 존재하고, App.js의 컴포넌트를 index.js에서 root에 render 하기 때문이다.

◼ package.json은 프로젝트 정보들이 기입되는 파일이다.

---

📒 JSX

◼ JavaScript 안에서 HTML를 쉽게 생성 및 사용할 수 있도록 도와주는 문법이다.

◼ 원래 React에서 div 태그를 만드는 방법은 React.createElement("{태그명}", null, "{값}") 함수를 사용하는 것이었는데, 이를 JSX를 사용하여 쉽게 태그를 만들어서 사용할 수 있도록 해준다.

 

✔ 사용법

import "./App.css";

function App() {
  return (
    <div className="App">
      <div className="black-nav">
        <h4>Nav</h4>
      </div>
    </div>
  );
}

export default App;

◼ css 파일의 스타일을 적용하기 위해서는 class="{클래스 명}"을 사용했었는데, JSX 에서는 className을 사용해야 한다.

◼ class는 이미 JavaScript에서 class 문법으로 있기 때문에, className을 사용해야 한다.

 

import "./App.css";

function App() {
  let title = "제목입니다.";

  return (
    <div className="App">
      <div className="black-nav">
        <h4>Nav</h4>
      </div>
      <h4>{title}</h4>
    </div>
  );
}

export default App;

◼ JSX에서는 중괄호 ( {} )를 사용해서 변수 값을 넣어줄 수 있다.

◼ 중괄호 안에서는 JavaScript의 if문, for문 등을 사용할 수 없다.

◼ 이러한 방법을 데이터 바인딩이라고 한다.

 

				...
<h4 style={ { color: "red", fontSize: "50px" } }>{title}</h4>
				...

◼ JSX에서 style 속성을 style={ {color : "red"} } 형식으로 사용할 수 있다.

◼ font-size의 경우 -는 JavaScript에서 빼기로 사용하므로, 카멜 표기법을 사용해서 기입해야 한다. 

 

import "./App.css";

function App() {
  let title = "제목입니다.";

  return (
    <div></div>
    <div></div>
  );
}

export default App;

◼ return () 안에는 병렬로 태그 2개 이상을 기입하면 에러가 발생한다.

◼ 최상위 부모 태그는 1개로 통일시켜야 한다.

 

return (
  <>
    <div></div>
    <div></div>
  </>
)

◼ return() 안에 하나의 태그가 루트여야 하기 때문에, 여러 태그를 묶기 위해서 의미 없이 사용하는 태그를 <></>와 같이 사용할 수 있다.

---

📒 useState

◼ 자료를 잠깐 저장할 때는 변수를 사용해도 되지만, 관리가 필요한 데이터는 useState를 사용해서 저장해야 한다.

 

✔ 변수와 State의 차이점

◼ 변수를 사용해서 HTML에 반영해서 화면에 출력된 이후, 해당 변수 값을 수정해도 화면의 값은 변경되지 않는다.

◼ 반면, State를 사용하고 State 변수 값을 변경하면, 수정 부분의 재렌더링이 발생하여 화면의 값도 변경된다.

💥 즉, 값을 변경할 때, HTML에 반영되게 만들고 싶으면 State를 사용한다.

✔ 기본 사용법

import { useState } from "react";
import "./App.css";

function App() {
  let [title, setTitile] = useState("제목입니다.");
  return (
    <div className="App">
      <div className="black-nav">
        <h4>Blog</h4>
      </div>

      <div className="content-list">
        <h4>{title}</h4>
      </div>
    </div>
  );
}

export default App;

◼ [{사용할 변수명}, {변경 함수명}] = useState("{초기화 값}")으로 사용할 수 있다.

◼ state 값을 등호로 변경하면 HTML에 반영되지 않는다. 따라서 재렌더링이 가능하도록 등록한 변경 함수를 사용해야 한다.

◼ 여기서 title 값을 변경하고 싶다면, setTitle("{원하는 값}") 코드를 사용하면 된다.

💥 set~~~ 함수는 늦게 실행된다. 그래서, set~~ 함수를 만나면 아래 코드 부터 다 실행한 뒤, set~~ 함수를 실행한다.

 

						...
let [title, setTitile] = useState(["제목1", "제목2", "제목3"]);
<div className="content-list">
  <h4>{title[0]}</h4>
  <p>2월 28일 발행</p>
</div>
<div className="content-list">
  <h4>{title[1]}</h4>
  <p>2월 28일 발행</p>
</div>
<div className="content-list">
  <h4>{title[2]}</h4>
  <p>2월 28일 발행</p>
</div>
						...

◼ 위와 같이 배열을 담고, 인덱스 접근으로도 사용할 수 있다.

✔ state 변경 함수 특징

const [titles, setTitile] = useState(["제목1", "제목2", "제목3"]);

const changeTitle = (idx, title) => {
    titles[idx] = title;
    setTitile(titles);
  };

◼ 기존 state와 신규 state가 같을 경우(기존 state == 신규 state) 변경하지 않는다.

◼ 따라서 위의 코드를 실행하면 변경되지 않는다.

 

const [titles, setTitile] = useState(["제목1", "제목2", "제목3"]);

// 1번
const changeTitle = (idx, title) => {
    const copy = [...titles];
    copy[idx] = title;
    setTitile(copy);
  };
  
 // 2번
 const changeTitle = (idx, title) => {
    titles[idx] = title;
    setTitles([...titles]);
  };

◼ 위와 같이 1번, 2번 방법으로 새로운 Array를 만들어서 state를 변경해야 적용된다.

◼ 즉, state가 Array나 Object이면서 state를 변경할 때, 독립적인 카피본을 만들어서 수정해야 한다. 

---

📒 Component

◼ div 태그의 한 덩어리를 하나의 단어로 사용할 수 있도록 도와주는 문법

 

✔ Component만드는 방법

1. function을 만든다.

2. return () 안에 html을 담는다.

3. <함수명></함수명>으로 작성해서 사용한다.

 

✔ Component 어떤 경우에 사용할까?

1. 반복적인 HTML을 축약할 때

3. 자주 변경되는 HTML인 경우

 

function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세 내용</p>
    </div>
  );
}

◼ 위와 같이 Component를 만들고, <Modal></Modal> or <Modal /> 형식으로 사용할 수 있다.

---

📒 반복문

◼ 중괄호 안에 JavaScript 문법을 사용할 수 없기 때문에, for문 대신, map()을 사용해서 반복되는 HTML을 처리할 수 있다.

 

{titles.map((title, idx) => {
    return (
      <div className="content-list" key={idx}>
        <h4
          onClick={() => {
            modal ? setModal(false) : setModal(true);
          }}
        >
          {title + " "}
          <span
            onClick={(event) => {
              addLikeCount(idx);
              event.stopPropagation();
            }}
          >
            🤞{" "}
          </span>
          {likeCounts[idx]}
        </h4>
      </div>
    );
  })}

 

◼ map 함수를 사용해서 글 제목 개수만큼, div 태그를 만들어서 화면에 출력한다.

◼ HTML을 반복 생성하면, key 속성을 통해 Unique 함을 보장해야 한다.

---

📒 Props

◼ 변수의 Scope에 의해서, 부모 Component의 변수를 사용할 수 없어 지원하는 문법이다.

◼ 부모 Component의 state를 복사해서 전달해, 자식 Component에서 사용할 수 있도록 도와주는 문법이다.

◼ 형제 Component나, 자식 Component에서 부모 Component로의 전달은 불가능하다.

 

<Modal titles={titles} days={days} contentIdx={contentIdx} />

const Modal = ({ titles, days, contentIdx }) => {
  return (
    <div className="modal">
      <h4>{titles[contentIdx]}</h4>
      <p>{days[contentIdx]}</p>
      <p>상세 내용</p>
    </div>
  );
};

◼ 위 코드와 같이 Modal Component의 속성으로 전달한 Props 변수명을 선언, 할당을 하고, Modal 함수에서 { {Props 변수명} }으로 받아서 사용할 수 있다.

---

📒 이미지 첨부하기

✔ src 폴더 아래 존재하는 이미지 첨부하기

import mainBg from "./img/shopping.png";

function App() {
  return (
    <div className="App">
      <Nav></Nav>
      <div
        style={{
          backgroundImage: `url(${mainBg})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          height: "300px",
        }}
      ></div>
    </div>
  );
}

◼ src 폴더 내에 있는 사진들은 import를 사용해서 src 아래 경로를 기준으로 경로를 기입하고 사용한다.

 

✔ public 폴더 아래 존재하는 이미지 첨부하기

function App() {
  return (
    <div className="App">
      <Nav></Nav>
      
      <div className="container">
        <div className="content">
          <img src="/car.png" width="50%"></img>
          <h4>Car</h4>
          <p>자동차이다.</p>
        </div>
        <div className="content">a</div>
        <div className="content">a</div>
      </div>
    </div>
  );
}

◼ src="/{파일명}" 형식으로 작성하면 사용할 수 있다.

   💥 .com에 발행하는 것이 아닌. com/{서브 경로}/ 에 React 프로젝트를 발행하게 되면 문제가 발생한다.

   💥 위와 같은 경우에는 src={process.env.PUBLIC_URL + "/car.png"} 형식으로 코드를 작성해야 한다.

---

📒 Router

◼ React는 SPA로 index.html 파일 하나만을 사용한다.

◼ 따라서, Router는 설정한 uri 마다 페이지를 비우고, 등록한 컴포넌트를 보여준다. (라우팅)

◼ npm install react-router-dom으로 설치해서 사용할 수 있다.

 

✔  react-router-dom 라이브러리 사용하기

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Routes, Route } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/detail" element={<div>상세 페이지</div>} />
      <Route path="*" element={<div>없는 페이지</div>}></Route>
    </Routes>
  </BrowserRouter>
);

◼ index.js 파일에서 <BrowserRouter> -> <Routes> -> <Route>로 사용한다.

◼ Routes, Route를 import 한다.

◼ Route 컴포넌트는 uri 별로 페이지를 나눌 때, 사용한다.

◼ path는 uri 설정, element는 해당 uri로 이동했을 때, 보여줄 element를 작성할 수 있다.

◼ path를 "*"로 설정하면, 위에 설정한 path 제외 다른 uri를 입력 시, 해당 element가 출력된다.

 

import { Link } from "react-router-dom";

const Item = ({ item }) => {
  return (
    <div className="content">
      <img src={item.imageSrc} width="50%" alt="error"></img>
      <h4>{item.title}</h4>
      <p>{item.price}</p>
      <Link to="/detail">상세페이지</Link>
    </div>
  );
};

◼ Link 컴포넌트를 사용해서 눌렀을 때, 원하는 uri로 이동하게 한다.

◼ to를 사용해서 눌렀을 때, 이동할 경로를 작성한다.

◼ Link 컴포넌트를 사용하면 a 태그가 생성된다.

 

import { useNavigate } from "react-router-dom";

const Item = ({ item }) => {
  const navigate = useNavigate();
  return (
    <div
      className="content"
      onClick={() => {
        navigate("/detail");
      }}
    >
      <img src={item.imageSrc} width="50%" alt="error"></img>
      <h4>{item.title}</h4>
      <p>{item.price}</p>
    </div>
  );
};

◼ useNavigate()는 페이지 이동을 도와주는 Hook이다. 

   💥 Hook은 유용한 기능을 제공하는 함수이다.

◼ Link 컴포넌트를 사용하면 a 태그가 생성되므로, useNavigate()로 생성한 함수를 사용하여 onClick 속성에 넣어줄 수 있다.

◼ navigate 함수에 인자로 숫자를 넣으면, 해당 숫자만큼 이동하고, 경로를 넣으면 해당 경로로 이동한다.

◼ BrowserRouter 컴포넌트 아래에서만 사용할 수 있다.

 

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
    <BrowserRouter>
      <Routes>
        <Route path="/detail" element={<Detail />}>
          <Route path="one" element={<div>1입니다.</div>}></Route>
          <Route path="two" element={<div>2입니다.</div>}></Route>
        </Route>
      </Routes>
    </BrowserRouter>
  </>
);

◼ Route 컴포넌트 안에 Route를 또 정의하면, nested routes를 사용할 수 있다.

◼ nested routes를 사용하면, 부모 elements도 화면에 출력된다.

◼ /detail/one, /detail/two로 동작한다.

   💥 nested routes의 path 앞에는 "/"를 붙이면 안 된다.

◼ nested routes는 부모 element와 큰 차이가 없을 때, 사용한다.

 

import { Outlet } from "react-router-dom";

const Detail = ({ imageSrc, title, content, price }) => {
  return (
    <div>
      <div>
        <img src={imageSrc} alt="error" width="100%"></img>
        <h4>{title}</h4>
        <p>{content}</p>
        <p>{price}</p>
        <Outlet></Outlet>
        <button>주문하기</button>
      </div>
    </div>
  );
};

◼ nested routes의 element는 부모 element의 어디에 보여줄지 작성해야 한다.

◼ 따라서, Outlet을 사용하면, 해당 자리에 nested routes의 element가 적용된다.

 

✔  URL 파라미터 사용

import "./detail.css";
import { useParams } from "react-router-dom";
import { useState } from "react";
import data from "../../data";

const Detail = () => {
  const [items] = useState(data);
  const { id } = useParams();

  return (
    <div className="container">
      <img src={items[id].imageSrc} alt="error" width="100%"></img>
      <h4>{items[id].title}</h4>
      <p>{items[id].content}</p>
      <p>{items[id].price}</p>
      <button>주문하기</button>
    </div>
  );
};

export default Detail;

◼ useParams를 사용해서 파라미터 값을 받을 수 있다.

---

📒 Styled Component

◼ npm install styled-compnents로 설치해서 사용할 수 있다.

◼ css 파일로 가지 않고, JavaScript 내에서 간편하게 Componenet로 스타일링을 사용할 수 있다.

 

✔ 사용법

import styled from "styled-components";

const Detail = () => {
  return (
    <DetailBtn bg="black">주문하기</DetailBtn>
  );
};

const DetailBtn = styled.button`
  background: ${(props) => props.bg};
  color: ${(props) => (props.bg === "black" ? "white" : "black")};
  padding: 10px;
`;

export default Detail;

◼ styled.{태그}`{style}` 문법을 사용해서 스타일 된 태그 Component를 생성해서 사용할 수 있다.

◼ Styled Component는 다른 js 파일로 오염되지 않는 장점을 가진다.

   💥 React는 모든 css 파일을 bundling 작업에서 하나로 합치기 때문에 오염될 수 있다.

   💥 Styled Component를 사용하지 않으면, 오염을 방지하기 위해 {컴포넌트}.module.css로 파일명을 지어야 했다. 

◼ style 태그로써 스타일을 적용하기 때문에, 페이지 로딩 시간이 단축된다.

◼ props를 사용해서 style을 변경할 수 있다.

◼ 간단한 프로그래밍 가능하다.

 

✔ 애니메이션

const fadeInOut = keyframes`
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
`;

const DetailBtn = styled.button`
  background: ${(props) => props.bg};
  color: ${(props) => (props.bg === "black" ? "white" : "black")};
  padding: 10px;
  animation: ${fadeInOut} 1s;
`;

◼ keyframes``로 애니메이션을 구성하고, 원하는 곳에서 animation: ${변수명} {시간}으로 적용할 수 있다.

---

📒 useEffect

💬 Component Lifecycle

   ◼ Component의 생명주기: mount, update, unmount

   ◼ Component가 화면에 보이는 것을 mount 되었다고 한다.

   ◼ 개발자가 상태에 따라 간섭할 수 있고, useEffect Hook을 사용해서 쉽게 간섭할 수 있다.

 

✔ 기본 코드와의 차이점

import { useEffect } from "react";

const Detail = () => {
  useEffect(() => {
    console.log("Hello"); // 1번
  });

  console.log("Hello"); // 2번
  return (
  <div />
  );
};

◼ useEffect는 적용된 Component의 mount, update 시점에 실행된다.

◼ 1번 코드나, 2번 코드 둘 다 Detail Component의 mount, update 시점에 실행된다. 그러나 이 둘의 차이는 1번 코드는 Html 렌더링이 다 된 시점에서 실행된다.

◼ 따라서, useEffect 안에 적는 코드들은 어려운 연산이나 서버에서 데이터를 가져오는 작업 같이 오래 걸리는 작업에 사용한다. Html 보여주는 것보다 덜 중요한 작업들...

 

✔ 사용법

import { useEffect } from "react";

const Detail = () => {
  const [showAlert, setShowAlert] = useState(true);
  
  useEffect(() => { 
    console.log(1); // 1번
    setTimeout(() => {
      setShowAlert(false);
    }, 2000);
  }, []);
  
  useEffect(() => {
    console.log(2); // 2번
  }, [showAlert]);

  return (
    {showAlert ? <div>2초 이내 구매시, 할인!!!!</div> : null}
  );
};

◼ useEffect({콜백 함수}, {실행 조건})으로 사용한다.

◼ 실행 조건을 추가하면, Component가 mount 될 때, 실행 조건이 update 될 때, 실행된다.

◼ 실행 조건을 빈 Array로 넣으면, Component가 mount 될 때만 실행된다.

◼ 즉, 1번 코드는 한 번만 실행되고, 2번 코드는 Component가 mount 될 때와 showAlert 값이 변화되면서 총 2번 실행된다.

 

import { useEffect } from "react";

const Detail = () => {
  useEffect(() => { 
    setTimeout(() => {
      setShowAlert(false);
    }, 2000);
    
    return () => {} // 1번
  }, []);
  
  return (
    <div />
  );
};

◼ 1번 코드처럼 return () => {}을 사용하여 useEffect에 등록한 콜백 함수가 실행될 때, 가장 먼저 실행되도록 설정할 수 있다.

◼ 또한, 1번 코드는 mount 될 때는 실행되지 않고, unmount 될 때 실행된다.

---

📒 axios

◼ node 환경에서 Promise 객체를 반환해 주는 Http Client이다.

 

✔ 사용법

import axios from "axios";

<button
  onClick={() => {
    axios
      .get("https://codingapple1.github.io/shop/data2.json")
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }}
>
  더보기
</button>

◼ axios.get({uri}) 를 입력하여 새로고침 없이, 서버로부터 데이터를 Promise 객체로 받을 수 있다.

◼ then()을 통해 응답 데이터를, catch()를 통해 오류를 처리할 수 있다.

 

axios.post("uri", {key: "value"})
.then()
.catch()

◼ 위와 같은 형식으로 post 요청을 할 수 있다.

 

Promise.all([axios.get("uri1"), axios.get("uri2")])
.then()
.catch()

◼ 위와 같은 형식으로 uri1과 uri2에 동시에 요청을 보낼 수 있고, 모든 요청에 응답이 오거나, 에러가 발생하면 then(), catch()에서 처리한다.

 

✔ async 함수

<button onClick={()=>{
  setCount(count + 1);
  if (count < 10) {
    setLimitCount(limitCount + 1);
  }   
}}></button>

◼ 해당 버튼을 누르면, count가 증가하고 count의 값이 10보다 작을 때만 limitCount 값이 증가하도록 코드를 작성했지만 실제로는 limitCount 값은 10을 넘을 수 있다.

◼ state 변경 함수는 async하게 동작되는 함수이기 때문에, 어떤 함수가 먼저 처리 완료될지 모른다.

◼ 따라서, useEffect를 사용해서, count를 실행 조건에 넣어서 count가 변경되면 useEffect에 등록한 콜백 함수가 동작하게 하는 방법이 있다.

 

✔ async/await

  let [limit, setLimit] = useState(1);
  const add = async () => {
    let data = 0;
    await axios.get("url").then((res) => {
      data = res.data;
    });

    if (data < 10) {
      setLimit(0);
    } else {
      setLimit(100);
    }
  };

◼ axios 함수는 async로 동작하기 때문에, axios 함수의 결과 값을 바탕으로 어떤 값을 변경해야 하거나, 작업을 진행해야 할때 async, await을 사용해서 실행을 순차적으로 진행할 수 있다.

---

📒 Automatic batching

◼ React 18 버전 이후에 추가된 기능으로, 하나의 이벤트 안에 두 개의 state 변경 코드가 존재하면, state를 다 변경시킨 후, 한 번 재렌더링을 시켜준다.

◼ 재렌더링을 state 변경마다 주기 위해서는 state 변경을 setTimeout 안에 설정해, 일정 시간 뒤에 변화하게끔 한다.

---

📒 Redux Toolkit

✔ Single Page Application 단점

◼ Component 간의 state 공유가 어렵다.

◼ 부모-자식 1 Depth 관계면 props로 해결할 수 있지만, 다른 관계의 Component 간 데이터 공유는 어렵다. 

◼ Component 간의 State 공유 문제는 React의 기본 문법인 Context API 사용이나 Redux 등의 외부 라이브러리를 사용함으로써 해결할 수 있다.

   💥 Context API는 잘 사용하지 않는다. (성능 이슈(자식 Component는 해당 State를 사용하지 않아도 재렌더링된다.), Component 재활용이 어렵기 때문)

 

✔ Redux 사용 이유

◼ Redux를 사용하면, 컴포넌트들이 props 없이 state를 공유할 수 있다.

   💬 Redux Store용 자바스크립트를 만들어서 state를 보관하고, 모든 Component들이 해당 js 파일에서 state를 가져다가 쓸 수 있다.

 

✔ 설정

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: {},
});

◼ npm install @reduxjs/toolkit react-redux로 설치한다.

◼ src 아래, store.js 파일을 생성한 뒤, 위 코드를 붙여 넣는다.

 

import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
  	<App />
  </Provider>
);

◼ index.js 파일에서 <Provider> Component를 root component로 만들어 준다.

 

✔ 저장하기

import { configureStore, createSlice } from "@reduxjs/toolkit";

const {변수명} = createSlice({
  name: "{state 변수명}",
  initialState: "{state 변수값}",
});

export default configureStore({
  reducer: {
    {변수명}: {변수명}.reducer,
  },
});

◼ store.js 파일에서 코드를 작성한다.

◼ createSlice를 사용해서 사용할 전역 state를 선언한다. (useState랑 비슷한 역할)

◼ 만들어진 state를 reducer 안에 위와 같은 형식으로 보관한다.

 

✔ 값 가져오기

const Test = () => {
  const states = useSelector((state) => {
    return state;
  });
  
  return (<div />);
}

◼ useSelector Hook을 사용해서 Redux Store의 저장된 모든 state 값을 가져올 수 있다.

◼ useSelector((state) => { return state.{원하는 state 변수명}; } 으로 원하는 값만 가져올 수 있다.

◼ states.{저장된 state 변수명}으로 원하는 값을 찾아서 사용할 수 있다.

 

✔ Store 값 변경하기

import { configureStore, createSlice } from "@reduxjs/toolkit";

const {변수명} = createSlice({
  name: "{state 변수명}",
  initialState: "{state 변수값}",
  reducers: {
    changeName(state, data) { // state는 기존 값을 의미하고 data는 입력 받은 파라미터를 의미한다.
      return state + data.payload;
    }
  }
});

export let { changeName } = {변수명}.actions;

export default configureStore({
  reducer: {
    {변수명}: {변수명}.reducer,
  },
});

◼ reducers 아래 state 수정해주는 함수를 만들고, 해당 함수를 이용해서 수정한다.

◼ 받은 파라미터는 .payload로 접근해서 사용한다.

◼ 만든 함수를 export 해서 사용해야 한다.

 

import { useDispatch } from "react-redux";
import { addData } from "../store";

function App() {
  const dispatch = useDispatch();
  
  dispatch(addData());
  
  return ( <div /> );
}

◼ useDispatch Hook을 사용해서, store.js으로 요청을 보내 값을 수정한다.

💥 Redux 데이터를 수정하고, 새로고침을 누르거나 Route 이동이 아닌 href로 페이지를 이동하면 데이터가 초기 값으로 다시 돌아간다.

 

💬 redux-persist 라이브러리를 사용하면, Redux Store에 저장되어 있는 모든 State 들을 localStorage에 자동으로 저장해서 영구히 사용할 수 있다. 

---

📒 useQuery

◼ ajax 성공/실패 시 html 보여주기, 몇 초마다 자동으로 ajax 요청하기, 실패 시 몇초 후 요청 재시도, prefetch 등 다양한 기능을 쉽게 작성할 수 있도록 도와주는 라이브러리이다.

◼ npm install react-query로 설치한다.

 

✔ 설정하기

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

◼ index.js 파일에서 QueryClient를 만든 후, QueryClientProvider Component를 root component로 작성한다.

 

✔ 사용하기

import { useQuery } from "react-query";

function App() {
  const result = useQuery({queryKey}, () => {
    return axios.get("{uri}").then((res) => {
      return res.data;
    });
  });
  
  console.log(result.data); // 응답 데이터 출력
  console.log(result.isLoading); // 로딩 중이면 true
  console.log(result.error); // 에러 데이터 출력
  
  return (
    <div>
      { result.isLoading && <Loding />
      { result.data && <Page data={result.data.data}/> }
      { result.error && <ErrorPage data={error} />
    </div> 
  );
}

◼ ajax 요청이 성공인지, 실패인지, 로딩 중인지 쉽게 파악할 수 있다.

◼ 로딩 페이지, 성공 페이지, 실패 페이지를 구분해서 출력할 때, 유용하다.

◼ useQuery 안의 ajax 요청이 성공하면, 계속 refetch한다.

◼ useQuery 안의 ajax 요청이 실패하면, 알아서 retry한다.

◼ 캐싱 기능을 제공하기 때문에, 캐싱된 응답 결과를 우선 반환하고 refetch 한다.

---

📒 PWA (Progressive Web Apps)

◼ 모바일 앱처럼 설치해서 사용할 수 있는 웹 사이트

◼ 앱 스토어를 거치지 않고 방문만으로 설치하게 유도할 수 있어, 설치 비용이 적다.

◼ html, css, js 만으로 앱으로 사용하게 할 수 있고, 푸시 알림, 센서 등을 사용할 수 있다.

 

✔ 생성 방법

◼ npx create-react-app {프로젝트명} --template cra-template-pwa로 프로젝트를 생성할 수 있다.

◼ manifest.json 파일과 service-worker.js 파일이 중요하다. 두 파일이 존재하면, 앱으로 다운 받아서 사용할 수 있다.

◼ manifest.json 파일은 만들어져 있으며, 앱 정보를 나타내고 앱 정보를 설정할 수 있다.

◼ service-worker.js 파일은 index.js 파일에서 serviceWorkerRegistration.register()로 변경하고 빌드해야 생성된다.

◼ service-worker.js 파일은 오프라인에서도 사이트를 열 수 있게 도와준다. 구동에 필요한 모든 html, js ,css 파일을 하드에 저장해서 사용할 수 있도록 한다.