이해 1.yarn add react-query 2. App.jsx에 seQueryClient(); 상수 선언 및 QueryClientProvider 3. src > api 폴더 비동기 세팅 후 4. useQuery사용 ex) const { isLoading, isError, data } = useQuery("todos", getTodos); ㄴ첫번째인자 ㄴ두번째인자 *첫번째 인자 : 쿼리 키라고 부름 (Query Keys) . refetching 하는 데에 쓰여요. 캐싱(caching) 처리를 하는 데에도 쓰이죠. 애플리케이션 전체 맥락에서 이 쿼리를 공유하는 방법으로 쓰여요. 한 단어일 수도 있구요. 배열의 형태일 수도 있고, 심지어는 nested 객체일 수도 있어요. *두번째 인자 : 쿼리 함수(Qu..

Step 1: UI를 컴포넌트 계층으로 쪼개기 단일책임 원칙 단일 책임 원칙 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 객체 지향 프로그래밍에서 단일 책임 원칙(single responsibility principle)이란 모든 클래스는 하나의 책임만 가지며, 클래스는 그 책임을 완전히 캡슐화해야 함을 일 ko.wikipedia.org Step 2: React로 정적인 버전 구현하기 Step 3: 최소한의 데이터만 이용해서 완벽하게 UI State 표현하기 Step 4: State가 어디에 있어야 할 지 정하기 Step 5: 역 데이터 흐름 추가하기 프론트엔드 아키텍처: 컴포넌트를 분리하는 기준과 방법 대강 이런 흐름으로 나아간다고 볼 수 있는데, 핵심은 단일책임. 이 단어만 ..

1. 리덕스 (1) 리덕스 설치 (2) src/configStore.js (3)모듈 만들기 ---스토어 조회 (1) useSelector (1)-2 Store 자체를 구독하는 건 지양해야 합니다 2 .yarn 에서 styled-components 설치하기 3. CRA(Create React App)→ 보일러플레이트 4.상대경로 import → 절대경로 지정하기 5, redux dev tools 설정 코드 Sample 6. react-router-dom 설치하기 6-1 [중요] Router.js 생성 및 route 설정 코드 작성 6-2 App.js에 Router.js import 해주기 1. 리덕스 (1) 리덕스 설치 yarn add redux react-redux # 아래와 같은 의미 yarn add ..

리액트 기초 1-6 컴포넌트 UI를 재사용이 가능한 개별적인 여러 조각 함수형 컴포넌트 = js 함수와 유사. return 아래 JSX문법 {}