프레임워크/React.js6 [React] Spring Boot, React, Redux 회원가입 구현 (프론트) Frontend redux // 사용자 정보 관리 모듈 import { createAction, handleActions } from "redux-actions"; // 불변성 관리 패키지 import { produce } from "immer"; // axios import axios from 'axios'; // Actions const LOG_OUT = "LOG_OUT"; const SET_USER = 'SET_USER'; // Action Creators const setUser = createAction(SET_USER, (user) => ({ user })); const logOut = createAction(LOG_OUT, (user) => ({ user })); // Initial stat.. 2022. 4. 27. [React] React 라우팅 처리 라우팅 그러면 페이지가 한개인데 어떻게 페이지 이동을 하여 화면을 전환하는건가 html은 딱 한개를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있다 이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 것을 라우팅이라고 한다 import React from 'react'; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import App from './App'; ReactDOM.render( , document.getElementById("root") ); BrowserRouter는 웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨준다 Route 사용방법 props.. 2022. 4. 16. [React] React 화면 전환 Link 링크 링크는 리액트 내에서 페이지 전환해준다 import {Route, Link} from "react-router-dom"; import Home from "./Home"; function App() { return( Home으로 //실제 연결 ); } history Link 컴포넌트를 클릭하지 않고 페이지를 전환하는 방법 props로 history 객체를 받아 이동 import React from 'react'; const Home = (props) => { return ( { props.history.push("/"); }} > 화면 ); }; export default Home props를 받지 않고 useHistory 훅을 사용하기 import React from "react"; imp.. 2022. 4. 15. [React] Redux 란? https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org Redux에 대해 구글해보면 Component를 사용해서 하나의 훌륭한 프로젝트를 만들어 내는 React는 비동기와 동기를 함께 사용하는 라이브러리인데, 문제는 기반이 되는 자바 스크립트가 1 쓰레드 형식으로 흘러간다는 것이다 이것을 해결하기 위해서 React에서 많은 함수를 지원했는데 Redux는 끝판왕이라고 할 수 있다 React에서 지원한 많은 함수들을 사용하면 동기, 비동기 형태를 처리할 수는 있는데 컴포넌트끼리 대화하게 하면 나도 모르는 오류가 생긴다는게 문제여서 꼭 app.js를.. 2022. 4. 15. [React] axios 로그인 로그아웃 스프링 + React 로그인 구현을 했다 JWT를 사용해서 로그인, 회원가입을 성공시키고 React에서 값을 보내줘야하는데 axios, fetch 2가지 방법을 공부했다 일단 axios는 node.js와 브라우저를 위한 HTTP 통신 라이브러리인데 비동기로 HTTP 통신을 가능하게 해주며, return을 promise 객체로 해주기때문에 데이터를 다루기 쉽다 이때문에 fetch보다 Axios를 선호한다 axios( { method : 'post', url: '/user/12345', data: { aa : "aa", bb : "bb" } }); 두번째로 fetch인데 axios와 마찬가지로 promise 객체로 반환되고, 내장 라이브러리라서 쓰기가 편하다 하지만 많은 사람들이 axios를 사용하는 이유는.. 2022. 4. 14. [React] 배열을 사용한 일기 데이터 추가, 삭제 위와 같이 생긴 일기를 생성하면서 배열의 데이터 추가, 삭제를 공부해보자 일단 이 조그마한 화면을 위해서 5가지의 페이지가 필요하다 1. 이벤트 처리를 담당하는 코드, 2. 화면을 띄워주는 코드, 3. 일기가 몇개인지 알려주는 코드 4. 작성한 글의 내용을 알려주는 리스트 코드 5. css코드 그러면 직접 코드를 보면서 알아보자 import { useRef, useState } from "react"; const DiaryEditor = ({onCreate}) => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1.. 2022. 4. 11. 이전 1 다음
