sm 기술 블로그

state를 배열로 선언하여 이전값을 기억하면서 새로운 값을 추가하는 방법이다. 예를 들어 이렇게 A가 들어있다고 할 때, A는 기억하고 B를 추가하고 싶을 수 있다. 그 때 다음과 같은 방법을 사용할 수 있다. setTest(prev => ([ ...prev, content ])); 혹은 배열 ([ ]) 상태이기 때문에 concat을 사용할 수 도 있다. setMsg((prev) => prev.concat(newMsg)); concat은 새로운 배열을 만들어서 저장하는 것으로 주소가 중복되지 않는다. 위와 같은 방법을 사용하면 이전 내용인 A와 새로운 내용인 B를 잘 담을 수 있을 것이다.

리액트를 이용하여 프론트를 제작할 때 우리는 로그인한 상태에서만 보여주고 싶은 페이지가 있을 것이다. 이때 PrivateRoute를 통해 문제를 해결할 수 있다. App import "./App.css"; import MainPage from "./Router/MainPage.jsx"; import MessengerPage from "./Router/Messenger.jsx"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import PrivateRoute from "./Router/PrivateRoute.jsx"; function App() { const access = localStorage.getItem("To..

Redux : state를 관리하는 라이브러리이다. Redux의 기본 개념 1.Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 2. State is Read-Only 리엑트에서는 setState 메소드를 활용해야 상태 변경이 가능하다. 리덕스에서는 액션이라는 객체를 통해서 상태를 변경할 수 있다, 3. Changes are made with pure function 변경은 순수함수로만 가능하다. Store - Action - Reducer - store : 상태가 관리되는 하나의 공간 - action : 앱에서 스토어에 운발할 데이터 (js객체 형식으로 되어 있다.) - reducer : action을 보고 store에 상태를 업데이트 한다. action을 red..

로그인 혹은 회원가입이나 아님 다른이유로 페이지 이동이 필요한 경우가 있을 것이다. 이 경우 Navigate를 사용하면 손쉽게 이동할 수 있다. Install npm i react-router-dom Navigate는 리액트 라우터에 있는 라이브러리이다. 때문에 라우터가 없다면 설치가 필요하다. import import { useNavigate } from "react-router-dom"; 다음과 같이 사용하고자 하는 곳에 import를 해준다. 변수 선언 const navigate = useNavigate(); 통신 후 사용 const onSubmit = async (e) => { e.preventDefault(); const joinData = await axios({ url: `http://loc..