react

인증 체크하기 회원이 접근할 수 있는 페이지는 권한이나 상태에 따라 다를 수 있다. 이러한 페이지에 대한 통제는 HOC를 이용한다. HOC란 다른 컴포넌트를 받아 새로운 컴포넌트를 return 하는 fuction이다. 위와 같이 상태를 check해 페이지를 통제하는 방식이다. hoc디렉터리에 auth.js라는 파일을 만들자. import { response } from 'express'; import React,{ useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { auth } from '../_actions/user_action'; export default function(SpecificComponent, opti..

로그아웃 만들기 로그아웃은 다른 기능보다 간단하게 구현할 수 있다. LandingPage에 버튼을 하나 만들어 로그아웃을 하게 만들면 된다. import React, { useEffect } from 'react' import axios from 'axios' function LandingPage(){ useEffect(() => { axios.get("/api/hello").then((response) => { console.log(response); }); }, []); return( 시작 페이지 로그아웃 ) } export default LandingPage 우선 뷰를 만들었다. button에 핸들러를 달아 axios로 logout request를 요청하면 마무리된다. import React, { ..

회원 가입 페이지 만들기 위와 같은 레이아웃으로 회원가입 페이지를 만들어 보자. 이번에도 Redux를 적용하여 구현할 예정이다. 우선 다음과 같이 뷰를 짜 보자. return ( Email Name Password Confirm Password 회원 가입 ) state와 setState를 작성해서 타이핑까지 가능하게 만들자. const [Email, setEmail] = useState("") const [Name, setName] = useState("") const [Password, setPassword] = useState("") const [ConfirmPwd, setCofirmPwd] = useState("") const onEmailHandler = (event) => { setEmail(e..

로그인 페이지 만들기 LandingPage부터 하나하나 만들어보자. 우선 스타일부터 바꿔보자. import React from 'react' function LoginPage(){ return( Email Password Login ) } export default LoginPage Email과 Password를 타이핑하고 싶지만 아직은 되지 않는다. state를 정의하고 setState함수를 이용하여 값이 변했을 때 적용시켜 주면 된다. import React, { useState } from 'react' function LoginPage(){ const [Email, setEmail] = useState("") const [Password, setPassword] = useState("") cons..

React Component react component에는 크게 두 가지로 나뉜다. Class Component와 Functional Component로 구분이 되는데 이를 비교해보자. Class Component: 더 많은 기능을 제공한다. 하지만 code가 길어지고 복잡해지며 성능이 좋지 않다. Functional Component: 제한된 기능을 제공한다. code가 짧고 간단하며 성능이 좋다. 다음은 lifrcycle이다. 이러한 lifecycle은 Fuctional Component에서는 사용이 불가능했다. 하지만 react 16.8 이후에 Hook이 발표되면서 Functional Component에서도 사용 가능하게 되었다. 사용법은 다음과 같다. useState 메서드를 이용하여 state..

Redux redux는 상태 관리 라이브러리이다. 여기서 상태(state)란 다음과 같다. props은 부모에서 자식 방향으로 값을 보내 변하지 않는 값을 의미하며 생성할 때 전달하는 값이다. state는 컴포넌트 안에서 데이터를 전달하는 방식이며 컴포넌트 안에서도 충분히 값을 변경할 수 있다. state가 변화면 re-rendering 되는 특징이 있다. redux는 이러한 state를 관리해 주는 tool이다. redux의 유무에 대한 차이를 살펴보자. 만약 데이터를 공유하는 컴포넌트들이 계층적으로 존재한다면 첫 번째 그림과 같이 계속해서 부모와 자식 사이를 지나가며 상태를 유지해야 한다. 하지만 redux를 사용한다면 store하나를 만들어 컴포넌트들의 상태를 관리할 수 있다. Action: 어떤 ..

Data Flow client에서 원하는 요청을 보내면 서버에서 처리한 후 DB에 접근하여 응답을 보내는 구조이다. client가 없을 때는 postman을 사용하여 테스트해봤다. 이제 AXIOS를 이용하여 구현해 보자. 우선 axios를 설치하자. npm install axios --save 간단하게 LandingPage에서 확인해보자. import React, { useEffect } from 'react' import axios from 'axios' function LandingPage(){ useEffect(() => { axios.get('api/hello') }, []) return( LandingPage ) } export default LandingPage 엔드포인트를 api/hello로..

rehttps://reactrouter.com/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com React 화면 이동 react에서 화면 이동을 하려면 app.js(또는 다른 파일)에서 설정한 routing으로 화면 이동을 설정할 수 있다. 이때 사용하는 것이 'react-router-dom' 이다. npm을 이용하여 설치하자. npm install react-router-dom --save 설치가 완료되면 위의 사이트에 Usage를 참고하여 다음과 같이 코드를 작성해보자. import './App.css'; import { BrowserRouter as Ro..

디렉토리 구조 변경 현재 프로젝트는 react를 create 하면 생성되는 구조이다. 이를 그대로 사용해도 괜찮지만 디렉토리 구조를 변경하여 나중에 추가될 기능이나 모듈에 대해 관리하기 쉽게 만들어 주는 것이 좋다. Redux를 위한 _actions, _reducer Components/Views Page가 들어가는 디렉토리이다. 즉, 화면에 대한 파일이 들어간다. Components/Views/Sections css파일이나 component들이 들어가는 디렉토리이다. App.js routing 관련 작업을 처리한다. Config.js 환경 변수를 저장한다. hoc(Higher Order Component) 권한을 검사하여 접근할 수 있는 component를 가지는 component이다. utils 여러..

React facebook에서 개발한 라이브러리이다. Component를 기반으로 만들어져 module과 비슷하게 재사용성이 매우 좋다. 또한 Virtual DOM을 사용한다. Virtual DOM과 Real DOM의 차이는 다음과 같다. Virtual DOM Real DOM 로컬에서 Virtual DOM을 생성한 뒤 렌더를 요청하기 전 단계에서 변경 사항을 적용하여 요청하는 방식으로 동작한다. 따라서 어떠한 Component가 변경이 된다면 해당 Component만을 업데이트하면 된다. html 문서를 읽어와 DOM Tree를 생성한 뒤 Rander Tree를 생성한다. 그 후 렌더링을 하는 구조이다. 따라서 어떠한 Component가 변경이 된다면 전체 페이지에 대한 Tree들을 다시 작성하여 렌더링..