Search for a command to run...
Props 타입 정의 : React.FC type TProps = { studentList: TStudent[]; isFetching: boolean; totalCount: number; setPage: React.Dispatch<React.SetStateAction<number>>; }; const TableStudentListByStatus: React.FC<TProps> = ({ studentList,...
![[Typescript + React] props값 전달 시, 타입지정](https://cdn.hashnode.com/res/hashnode/image/upload/v1693879886512/665150f0-12ad-47ab-8bad-d5ea482c0be5.jpeg)
라우팅은 네트워크 용어로서 네트워크상의 주소로 이동하여 해당 주소에 연결되어있는 데이터를 사용하는 일련의 과정을 의미 라우터는 라우팅을 수행할 수 있는 장치 pages (혹은 src/pages) 폴더 아래에 파일을 추가하는 방식으로 각 컴포넌트에 URL을 부여 install - 리액트에서는 라우터를 제공하지 않기 때문에 react-router-dom이라는 패키지를 설치 router 객체 확인 가능 동적 라우팅(Dynamic Rout...
https://hjk329.github.io/react/react-query-queries/ fetching, cashing, 서버 데이터와의 동기화를 지원해주는 라이브러리 axios + react-query fetch + react-query React application에서 비동기 데이터를 불러오는 과정 중 발생하는 문제들을 해결해줌 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있음 최신 데이...
리액트 문법쓰는 프론트 + 백엔드 프레임워크 문법 변경 로딩중일 때 loading.js 파일 만들기 데이터 서버에서 가져올 때 getServerSideProps() 썼는데 이제 안씀 그냥 함수명 작성 후, import use from "react" fetch 문법 쓸 때, cache: 'no-store'쓰면 예전에 쓰던 getServerSideProps()와 비슷 이미지 태그 기능 향상(Layout Shift ...
UI Library / Design Framework
Redux와 기능은 같지만, 표현법이 쉬워짐. 세팅 문법 필요 없음. 설치 npm install zustand 컴포넌트들 간에 변수를 공유하고 싶을 때 import create from 'zustand' import { devtools } from "zustand/middleware"; //state 보관함 -> 보통 변수에 담아서 사용(useStore) const useStore = create(()=> { count : 0, ...
![[React] Redux 대신 Zustand!](https://cdn.hashnode.com/res/hashnode/image/upload/v1693206744531/a83c32f4-5055-4c43-9386-c88ba64417d8.jpeg)
props = properties 기본적으로 객체로 전달됨 한개의 props App.js import React from 'react'; import Hello from './Hello'; function App() { return ( <Hello name="react" /> ); } export default App; Hello.js - props 예약어로 받는법 import React from 'react'; fu...
![[React] Props & 비구조화 할당](https://cdn.hashnode.com/res/hashnode/image/upload/v1693207973506/60a19a2c-881c-4cb3-a1fb-d2da658e81bf.jpeg)
map
![[React] Object & Array](https://cdn.hashnode.com/res/hashnode/image/upload/v1693208161591/3dcaacfe-d769-4f7b-a875-866f92624230.jpeg)
[NextJs + StyledComponent] : 새로고침시 스타일 적용이 안되는 이슈 발생 barbel 플러그인 설치 : yarn add babel-plugin-styled-components yarn add @types/styled-components -D // 추가로 .barbelrc 파일 생성 { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": tru...
