My devlog

방법 1 router.beforeEach(async (to, from) => { const dir = to.path.split("/")[2]; if (dir != "login" && !session.isLoggedIn()) { alert('로그인을 해주세요') await router.push("/m/login") } })방법 2 router.beforeEach(async (to, from) => { if (!to.path.startsWith("/m/login") && !session.isLoggedIn()) { alert('로그인을 해주세요') await router.push("/m/login") } })

function Component() { var 현재상태 = 'info'; return ( { { info : 상품정보, shipping : 배송관련, refund : 환불약관 }[현재상태] } ) } ▲ 원래 JSX 상에서 html 태그들은 저렇게 object에 담든, array에 담든 아무 상관없습니다. 암튼 이렇게 object 자료형으로 HTML을 다 정리해서 담은 다음 마지막에 object{} 뒤에 [] 대괄호를 붙여서 "key값이 현재상태인 자료를 뽑겠습니다" 라고 써놓는겁니다. 그럼 이제 현재상태라는 변수의 값에 따라서 원하는 HTML을 보여줄 수 있습니다. 만약에 var 현재상태가 'info'면 info 항목에 저장된 태그가 보여질 것이고 만약에 var 현재상태가 'refund'면 refun..

styled-components css가 컴포넌트에 종속 되게끔 컴포넌트.module.css props로 배경색 바꾸기 import styled from 'styled-components'; let YellowBtn = styled.button` background : ${ props => props.bg }; color : black; padding : 10px; `; function Detail(){ return ( 오렌지색 버튼임 파란색 버튼임 ) } useEffect html이 렌더링 된 다음 실행됌 1. 이러면 재렌더링마다 코드를 실행가능합니다. useEffect(()=>{ 실행할코드 }) 2. 이러면 컴포넌트 mount시 (로드시) 1회만 실행가능합니다. useEffect(()=>{ 실행할코..

import React from 'react' export default () => Auth 자동으로 import 하기 위해선 하단 처럼 해야함 import React from 'react' const Auth = () => Auth export default Auth;

redux install npm i react-redux yarn add react-redux store 생성 import {createStore} from 'react'; const store = createStore(); Reducer function reducer(state, action) { //state의 기본값 if(state === undefined){ return { number: 1, } } //데이터의 불변성을 위한 복사 const newState = {...state}; return newState } redux가 제공하는 기능 4가지 import {Provider, useSelector, useDispatch, connect} from 'react-redux' Provider cre..

useMemo 값을 재활용하기 위해 메모리에 값을 캐싱하는 Hook const value = useMemo(()=>{ return 캐싱해서 기억하고 있을 값 },[dependency]) useReducer state가 바뀔 때마다 화면을 렌더링 해줌 Reducer : state 를 변경하는 함수 Dispatch : reducer에게 state를 변경해달라는 요구 dispatch를 호출하면 reducer가 호출됌 Action : Dispatch 의 내용 useReducer 사용 const [state, dispatch] = useReducer(reducer, 상태의 초기값); reducer 사용 const reducer = (state, action) => { //보통 if 나 switch 사용 } dis..

react map() 는 key 이 있어야 한다. App.js import { ThemeProvider } from 'styled-component' // import Refs from './component/220727/Refs' // import Test from './component/220726/Test' import Button from './component/220729/Button' import theme from './styles/theme' import GlobalStyle from './styles/globalStyle' function App() { return ( {/* */} {/* */} ) } export default App

useContext 컴포넌트 재사용이 어려워 진다. 전역적인 데이터 전달 context 생성 //UserContext.js import {createContext} from react export const UserContext = createContext(context에 아무것도 제공되지 않았을때 사용할 값) context 에 data 제공하기 //App.js import {UserContext} from 'UserContext' return ( context 사용 import React, {useContext} from 'react' import {UserContext} from 'UserContext' const user = useContext(UserContext)

React npm yarn : 페이스북에서 만든 패키지 매니저 nvm 으로 node 최신 버전 설치 nvm install --lts yarn 으로 리액트 프로젝트 시작 yarn create react-app 폴더명 Props 부모 function Intro({ name = 'Jini', age }) { return ( 이름 : {name} 나이 : {age} ) } 기본값* function Intro({ name = 'Jini', age }) Intro.defaltProps = { name: 'Jini', } moment import React, { useState } from 'react' import moment from 'moment-timezone' function Clock(props) { co..

- Vue team Project React - 전체 함수는 항상 동기적이어야 한다. 따라서 async await 를 사용하면 안됌 - useEffect() 코드가 실행되는 것을 제한하고 실행 조건을 걸 수 있다. - label 에 for 라는 속성이 있다..! 사용하면 label로 input으로 감싸는 것과 같은 효과! Redux store : 정보를 담는 곳 state : 정보 reducer : redux 생성 시 필수 인자 / state 값을 변경 render : state 를 참조해서 ui를 만들어주는 개발자가 작성하는 코드 getState() : state 를 가져와서 render 해주는 함수 dispatch() : state 를 변경 subscribe() : state 값이 바뀔 때마다 ren..