본문 바로가기

개발공부_Blog154

React router - useNavigate useNavigate useNavigate는 Link컴포넌트를 사용하지 않고 다른 페이지로 이동할 수 있다. 파라미터가 숫자 타입이면 앞으로 가거나 뒤로 간다. navigate(-1) 뒤로가기 / navigate(-2) 뒤로 2번가기 페이지 이동 시, replace 옵션이 있는데, 이 옵션은 페이지 이동 기록이 남지 않아 뒤로가기 버튼을 눌러도 이전 페이지로 이동하지 않고 정해진 페이지로만 이동한다. import { Outlet, useNavigate } from "react-router-dom"; const LayOut = ()=> { const navigate = useNavigate() const goBack = ()=> { //이전페이지로 이동 navigate(-1) } const goArticl.. 2022. 8. 28.
Router - URL파라미터/ 쿼리스트링 URL파라미터와 쿼리스트링 리액트에서 페이지 주소를 정의할 때 유동적인 값을 사용해야 하는 경우가 있다. URL파라미터와 쿼리스트링을 사용하면 된다. URL 파라미터 : /profile/velopert URL파라미터는 주소의 경로에 유동적인 값을 넣는 형태이다. URL파라미터가 여러개인 경우에는 /profiles/:username/:filed형태로 사용가능하다 const App = () => { return ( ) } export default App; 쿼리스트링 : /articles?page=1&keyword=react 쿼리스트링은 주소 뒷부분에 ?문자열 이후에 key=value형태로 값을 넣고 &로 구분하는 형태이다. useLocation Hook 사용 쿼리스트링 값을 사용하려면 ?을 지운 뒤, &로.. 2022. 8. 28.
Router 적용, 기본사용법 Router 설치, 적용 yarn add react-router-dom 프로젝트에 라우터 적용 src/index.js파일에서 컴포넌트를 적용해 전체적으로 router를 사용할 수 있게 한다. import React from 'react'; import ReactDOM from 'react-dom/client'; import {BrowserRouter} from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기 Route컴포넌트를 통해 라우트 설정을 해야 하며, Route컴포넌트는 Routes컴포넌트 내부에서 사용되.. 2022. 8. 28.
SPA = Single Page Application MPA = Multi Page application 전통적인 웹 애플리케이션 방식이다. 멀티페이지 애플리케이션 : 사용자가 다른 페이지로 이동할 때마다 새로운 HTML을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 화면에 보여준다. 새로운 페이지를 보여줄 때마다 서버 측에서 모든 준비를 하기 때문에 트래픽이 더 많이 발생한다 SPA = Single Page Application MAP의 단점을 개선하는 웹 애플리케이션 방식 싱글페이지 애플리케이션 : 하나의 페이지로 이루어진 애플리케이션 리액트 라이브러리를 사용해 뷰 렌더링은 사용자의 브라우저가 담당하게 한다. HTML을 처음 한번만 받아와서 웹애플리케이션을 실행한 후, 사용자의 요청에 따라 필요한 데이터만 서버에서 받아와 화면에 업데이트.. 2022. 8. 28.
React의 불변성이란 무엇인가? React의 불변성 "불변성의 의미는 메모리 영역에서 값을 변경할 수 없다는 의미입니다." 간단 설명 let string = 'data1'// 1. string: 'data1'가 메모리 1에 등록됩니다. string = 'data2'// 2. string: 'data2'가 메모리 2에 등록됩니다. 위 예시에서 메모리 영역을 총 2개 사용합니다. 변수 string은 'data1' 였고, 여기에 'data2'를 재할당하였는데 기존 메모리 영역 1에 있는 'data1'의 값은 그대로 두고, 메모리 영역2에 'data2'를 새로 할당했습니다. 즉, 메모리영역에서 'data2'는 'data1'을 대체하는 것이 아니라 새로운 영역에 할당됩니다. 이것이 불변성입니다. 왜 React에서 불변성을 지켜야 하나 리액트에서.. 2022. 8. 21.
immer_불변성 유지 immer란 무엇인가 react에서 불변성을 유지하는 코드를 작성하기 쉽게 해주는 라이브러리다. produce 함수를 사용하는데, 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어준다. 보통 produce(state, draft) 형태로 사용한다 immer는 어떤 원리로 작동하는가 React는 기본적으로 부모로부터 내려받는 Props나 내부 상태인 State가 변경되었을 때 컴포넌트를 다시 렌더링 하는 리렌더링 과정이 일어난다. React는 이 Props와 State의 변경을 불변성을 이용해서 감지한다. '불변성을 지킨다'는 것은 기존의 값을 수정하지 않으면서 새로운 값을 만들어내는 것을 말한다. 이러한 불변성이 지켜지지 않으면 내부의 값이 새로.. 2022. 8. 21.
config.json jsconfig.json이 무엇인가요? 디렉토리에 jsconfig.json파일이 있으면 해당 디렉토리가 JavaScript 프로젝트의 루트 디렉토리임을 나타냅니다. 선택적으로 프로젝트에 속한 파일, 프로젝트에서 제외할 파일 및 컴파일러 옵션을 나열할 수 있습니다 jsconfig 옵션 option Description noLib Do not include the default library file (lib.d.ts) target Specifies which default library (lib.d.ts) to use. The values are "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext"... 2022. 8. 15.
Prettier설정_코딩스타일 통일하기 Prettier는 코드스타일 자동정리도구이다. 공식문서 : https://prettier.io/docs/en/options.html Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io 여러 개발자가 한 팀에서 일하게 되는 경우, 사소한 코딩 스타일 차이로 의견 충돌이 일어날 수 있다. Prettier를 사용하여 표준 코딩 스타일을 정해놓은 뒤 작업을 하는 것이 좋다. Prettire는 전체 코드베이스에서 일관된 코드 스타일을 적용하며 프로젝트의 최상위 디렉터리(root)에 파일을 생성하면 된다. { "singleQuote" : true, "semi" : true, "useTabs" : false, "useWidth" :.. 2022. 8. 15.
useMemo, React-hooks(4) 8-4 useMemo 함수 컴포넌트 내부에서 발생하는 연산을 최적화 시키는 Hook이다. 리액트에서 컴포넌트의 렌더링은 state업데이트, 부모컴포넌트 업데이트 등으로 인해 수시로 일어날 수 있다. 이러한 경우에 불필요한 중복 연산이 발생할 수 있으며 memoization을 활용한 useMemo로 연산을 최적화 시킬 수 있다. Memoizatioin 이란? 기존에 수행하던 연산의 결과물을 어딘가에 저장해두고 동일한 값이 들어오면 재활용하는 기법이다. 랜더링마다 호출되는 컴포넌트 함수 일반적으로 React의 함수형 컴포넌트는 다음과 같은 구조로 작성이 됩니다. function MyComponent(props) { // 어떤 로직 (JavaScript) return; /* 어떤 화면 (JSX) */ } fu.. 2022. 8. 10.

티스토리툴바