본문 바로가기

React

React/react 활용하기 2020. 7. 1. react + redux를 활용한 로그인및 회원가입 만들기 - auth(접근방지, 허용) 기능 구현하기 auth(접근 방지및 허용) 을 위해서 HOC (High Order Component) 를 적용해야한다. HOC는 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수를 의미한다. 주로 로딩 화면이나 Auth 등에 사용된다고 한다. Auth를 위해서 auth.js를 만들어준다. 또한 aciton및 reducers에 auth 로직을 사용할수 있도록 만들어준다. type.js export const REGISTER_USER = "REGISTER_USER"; export const LOGIN_USER = "LOGIN_USER"; export const LOGOUT_USER = "LOGOUT_USER"; export const AUTH_USER = "AUTH_USER"; userAction.j..
React/react 활용하기 2020. 7. 1. react + redux를 활용한 로그인및 회원가입 만들기 - 로그인및 로그아웃 구현하기 로그인을 구현하기 로그인을 진행하기위해서는 form 에서 submit을 통해 현재 name과 비밀번호를 dispatch를 통해 액션을 실행해줘야한다 그러므로 액션관련 함수들을 생성해줘야한다. type.js export const REGISTER_USER = "REGISTER_USER"; export const LOGIN_USER ="LOGIN_USER"; userAction.js import { REGISTER_USER, LOGIN_USER } from "./types"; import { request } from "../utils/axios"; const USER_URL = "/api/user"; export function registerUser(dataToSubmit) { const data = r..
React/react 활용하기 2020. 6. 30. react + redux를 활용한 로그인및 회원가입 만들기 - 회원가입만들기 https://github.com/loy124/express-mongodb-template loy124/express-mongodb-template express 와 mongodb를 연동해서 회원가입및 로그인을 구현해둔 예제입니다. Contribute to loy124/express-mongodb-template development by creating an account on GitHub. github.com 해당 게시글을 통해 backend를 구축하고 해당 백엔드와 연동하는 프론트를 React로 구축을한다 https://github.com/loy124/react-user-template loy124/react-user-template react + redux(redux thunk, redux pro..
React/react 기초 공부하기 2020. 6. 16. react styled-components 사용해보기 import React from "react"; import "./App.css"; import styled from "styled-components"; const color = "red"; const Component = styled.div` display: ${(props) => (props.isLoaded ? "block" : "none")}; color: ${color}; `; // 컴포넌트 상속받기 const Wrapper = styled(Component)` background-color: gray; margin: 20px; `; function App() { return ( complete ); } export default App; Styled-Components를 활용하면 컴포넌트를 생..
React/react 기초 공부하기 2020. 6. 14. redux 공부 하기(순수 리덕스만 사용해보기) https://velog.io/@velopert/Redux-2-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%97%86%EC%9D%B4-%EC%93%B0%EB%8A%94-%EB%A6%AC%EB%8D%95%EC%8A%A4-cijltabbd7 Redux (2) 리액트 없이 쓰는 리덕스 리덕스는 리액트에 종속되지 않습니다. 리액트에서 사용하려고 만든거긴 하지만, 실제로 다른 UI 라이브러리나 프레임워크와 함께 사용 될 수도 있습니다 (예: angular-redux, ember-redux...) 물론, 바닐 velog.io 해당글을 참고해서 개념 파악하는데 사용하였습니다. import { createStore } from "redux"; const lightDiv = document.getElemen..
React/react 기초 공부하기 2020. 6. 13. useEffect + axios를 활용하여 API 호출하기 class 기반 React에서는 lifeCycle 메소드들을 통해 관리하지만 https://loy124.tistory.com/230?category=784079 React LifeCycle 컴포넌트 생성 constructor (생성, setState 사용X), -> componentWillMount(렌더 되기전) -> render(그리는경우, setState 사용X) -> componentDidMount(렌더가 그려졌을때) 컴포넌트 제거 componentWillUnmount.. loy124.tistory.com react hooks 기반에서는 useEffect를 사용해서 lifeCycle을 관리한다. useEffect는 omponentDidMount와 componentDidUpdate, component..
React/react 기초 공부하기 2020. 5. 18. react setState와 useState 비교하기 간단한 카운트 함수 먼저 class 기반으로 생성된 setState를 활용한 카운트 증가함수이다 import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } setCount = () => { this.setState({ count: this.state.count + 1 }); }; render() { const { count } = this.state; return ( {count} ); } } 다음은 함수형을 기반으로 생성된 useState를 활용한 카운트 증가함수이다 useState를 import 한후 const [값, 값을변경할수있는..
React/react 기초 공부하기 2020. 5. 18. react setState this.setState를 활용하여 state내 내용을 바꿔준다 vue와 다른점이 있다면 vue는 data() { return { heart: require("../../assets/heart.png"), fillHeart: require("../../assets/fillHeart.png"), recentDatas: [] }; }, 해당방식으로 선언하여 this.recenDatas = "넣을값" 방식으로 바로 값을 대입해주는 반면 react는 setState를 활용해서 값을 대입해주고 또한 두번째 인자로 콜백함수로 받아오는 다른점이 있었다. import React from "react"; class App extends React.Component { constructor(props) { super(pr..

티스토리툴바