프론트엔드 첫걸음

import { useLocation } from "react-router-dom"; const location = useLocation(); console.log(location); hash : 주소의 # 문자열 뒤의 값 (주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용) key : location 객체의 고유 값, 초기에는 default 이고, 페이지가 변경될 때마다 고유의 값이 생성됨. pathname : 현재 주소의 경로 (쿼리스트링 제외) search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값 //http://경로?id=10&count=2022 인경우 'id=10&count=2022' URLSearchParam..

https://engineering.linecorp.com/ko/blog/line-securities-frontend-3/ [커스텀 훅 도입 이전] 원래 App 컴포넌트는 5개의 구성 요소를 가지고 있습니다. 상태 변수인 checkList와 이벤트 핸들인 handleCheckClick, isAllChecked를 계산하는 부분, 체크박스를 그리는 부분, 그리고 그 밖의 것을 그리는 부분입니다. 이 중에서 Checks 컴포넌트를 분리하는 과정에서 App에서 빠진 것은 체크박스를 그리는 기능뿐입니다. 나머지 4개의 기능은 여전히 App에 남아 있고, 재사용할 수 없습니다. 특히 checkList가 여전히 Checks가 아닌 App에 남아있는 것은 주목할 만합니다. App이 '다음' 버튼의 disabled 속성..

[출처] https://stackoverflow.com/questions/71540973/why-use-usequeryclient-from-react-query-library https://tkdodo.eu/blog/react-query-fa-qs#why-should-i-usequeryclient QueryClientProvider는 생성된 queryClient 를 React Context에 넣어 앱 전체에 배포한다. useQueryClient로 가장 잘 읽을 수 있다. 이렇게 하면 추가 구독이 생성되지 않으며 추가 재렌더링이 발생하지 않는다(클라이언트가 안정적인 경우). //클라이언트가 안정적인 경우 export default function App() { // ✅ this is stable const..

순회하는 element에 모두 ref를 달지 않고 상위 element에만 ref를 달아준 뒤에 상위 ref에서 Array.from(상위element.ref).map 을 사용해도 되지만- map으로 순회하는 component마다 ref를 달고 싶다면 ?? https://stackoverflow.com/questions/63059962/reactjs-map-with-a-ref-to-each-component ReactJS .map with a ref to each component Working on making it so when a user goes back a page in my react app they will be scrolled to the position on the page they were..

1. 루트경로에 jsconfig.json 만들고 (.gitignore, package.json과 같은 위치) 2. 아래와 같이 compilerOptions에 baseUrl추가 { "compilerOptions": { "baseUrl": "src" }, "includes": ["src"] } 3. ide를 껐다 켠다. 3번이 중요함. 아 왜 안되지 안되나보다 했는데 껐다 켜니까 잘됨 ^^ 껐다 켜시오. [참고] https://imkh.dev/react-absolute-path/

설치 npm install @react-oauth/google@latest npm install jwt-decode index.html /*중략*/ Sandwich 코드 function App() { //구글 로그인 const [user, setUser] = useState({}); function handleCallbackResponse(response) { console.log('Encoded JWT ID token : ' + response.credential); var userObject = jwt_decode(response.credential); console.log(userObject); setUser((prev) => { return { ...prev, userObject }; }); co..

코딩애플 강의 38강 batch - setState함수 맨 마지막것만 실행되는것 리액트 17에서는 ajax나 setTimeout 내부는 batch 없이 (맨마지막 setState만 실행되는것 없이) 모든 setStatet실행됐음 리액트 18에서는 ajax나 setTimeout 내부에서도 setState batch useTransition , useDeferredValue import {useState, useTransition, useDeferredValue } from 'react'; let a = new Array(7000).fill(0) function App() { let [name, setName] = useState('') let [isPending, startTransition] = useT..

리액트로 개발된 페이지는 기본적으로 SPA ~ 하나의 js ~ 처음 로딩 느림 로딩이 오래걸리는 페이지는 lazy import 하면 필요할때 import되어 처음 로딩속도를 줄일 수 있음 const OtherComponent = React.lazy(() => import('./OtherComponent')); lazy 임포트 된 컴포넌트는 별도의 js 파일로 발행됨 lazy 임포트 된 컴포넌트 로딩 시 보여줄 UI를 Suspense로 설정할 수 있음 import React, { Suspense } from 'react'; const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( ..

import Counter from '../components/Counter'; import { increase, decrease } from '../modules/counter'; const CounterContainer = ({ number, increase, decrease }) => { return ( ); }; const mapStateToProps = (state) => ({ number: state.counter.number, }); const mapDispatchToProps = (dispatch) => ({ increase: () => dispatch(increase()), decrease: () => { dispatch(decrease()); }, }); export default co..

리액트를 다루는 기술 17장 기본 리덕스 코드 작성하기 리덕스 코드는 1.액션타입, 2. 액션생성함수, 3.리듀서 코드를 작성해야한다. 코드를 작성하는 방법은 대표적으로 두가지가 있는데, 첫번째는 constants(액션타입), actions(액션생성함수),reducers(리듀서코드) 폴더 아래 각각의 기능별로 다른 파일을 만들어서 작성하는 방법이다. 두번째는 액션타입, 액션생성함수, 리듀서 코드를 기능별로 파일 하나에 몰아서 다 작성하는 방식이다. 이를 Ducks패턴이라고 한다. - 액션타입 정의하기 const INCREASE = 'counter/INCREASE' 액션타입은 대문자로 정의하고, 문자열 내용은 '모듈이름/액션이름'과 같은 형태로 작성한다. 문자열 안에 모듈 이름을 넣음으로써 프로젝트가 커졌..