FrontEnd/React 4

[NextJs] redirect, rewrite 페이지 강제 이동시키기

redirect : 특정 url을 입력했을 때 지정된 다른 url로 이동시키는 기법 rewrite : redirect와 같은 역할을 하지만 사용자에게 url의 변경을 알리지 않고 내부적으로 이동시키는 기법 NextJs 프로젝트를 생성하고 next.config.js 파일을 보면 버전에 따라 차이는 있겠지만 아래와 같은 형태로 파일이 존재할 것이다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, } module.exports = nextConfig 첫째로 redirect 기능을 사용하기 위해서 nextConfig 안에 redirects라는 함수를 추가해 주어야 한다. /** @type {import('n..

FrontEnd/React 2023.03.07

[react] react router dom v6 - github pages 업로드

> npm i gh-pages > npm run bulid package.json 맨 마지막에 homepage 추가 https://본인 github id.github.io/레파지토리 명 이후 빌드 -> push 작업 편의성을 위해 scripts에 deploy, predeploy를 작성해 준다. predeploy : deploy 실행 전 먼저 실행할 명령어 deploy 명령어 실행 전, 프로젝트 폴더가 git에 remote 된 상태여야 한다. > git remote add origin {repository url} > git remote -v 정상적으로 remote 된 상태라면 -v 옵션으로 아래와 같이 확인 가능하다. 이제 deploy 명령어를 실행하면 자동으로 git push 및 자동으로 github ..

FrontEnd/React 2023.02.22

[react] 공부 메모

- useState 표현 const [counter, setCounter] = React.useState(0); 위와 같이 정의된 counter라는 state 값이 있을 때 1. 특정 값으로 바꾸는 경우 setCounter(12345); 2. 기존의 index 값을 기준으로 바꿀 경우 아래와 같이 써주는 것이 안정성 면에서 우수하다. setCounter(curIndex => curIndex + 1); - React Memo React는 state 변경이 일어나면 내부 컴포넌트 전체를 re-render 한다. 그러나 memo를 통해 만들어진 컴포넌트는 본인의 props가 변경되지 않으면 state 변경이 일어나더라도 re-render 하지 않도록 하다. - PropType 컴포넌트에 전달 받는 props ..

FrontEnd/React 2023.02.17