React Query (리액트 쿼리) 리액트에서 비동기 로직을 리액트스럽게 다룰 수 있게 해주는 라이브러리이다. server state를 아주 효율적으로 관리할 수 있다. 기존에 isLoading, isError, refetch, 데이터 캐싱 등 개발자가 직접 구현하려면 꽤 귀찮거나 까다로웠던 기능을 제공해준다. QueryClientProvider ● 리액트 쿼리 사용을 위해 QueryClientProvider 를 최상단에서 감싸주어야한다. ● 쿼리 인스턴스를 생성 후 client={queryClient} 작성해준다. 기본 셋팅 import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient..

[React Hooks란?] : React에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리 [React Hook 개발 과정] 1. class component 사용 2. 함수 컴포넌트와 리액트 훅 사용 (리액트 훅은 함수 컴포넌트에서만 사용 가능하다) 함수 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었다. 이 캐시를 이용하고자 만든 여러 개의 API를 '리액트 훅' 함수라고 부른다. ※API란? => 여러 프로그램들과 데이터베이스 그리고 기능들의 상호 통신 방법을 규정하고 도와주는 매개체이다. [React Hook의 필요성] 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. 함수 컴포넌트는 클래스 컴포..

구조 분해 할당(Destructuring assignment) : 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax) ... arguments 1. 함수로 넘어 온 모든 인수에 접근 2. 함수 내에서 이용 가능한 지역 변수 3. length / index 4. Array 형태의 객체 5. 배열의 내장 메서드 없음(forEach, map) 전개 구문(Spread syntax) : 배열 클로저(Closure) 어휘적 환경(Lexical Environment) Closure 1. 함수와 렉시컬 환경의 조합 2. 함수가 생성될 당시의 외부 변수를 기억 3. 생성 이후에도 계속 접근..

[Array] arr.splice(n, m) : 특정 요소 지움 n은 시작, m은 개수 arr.splice(n, m, x) : 특정 요소 지우고 추가 arr.splice() : 삭제된 요소 반환 arr.slice(n, m) : n부터 m까지 반환 arr.concat(arr2, arr3 ..) : 합쳐서 새배열 반환 arr.forEach(fn) : 배열반복 arr.indexOf/arr.lastIndexOf arr.includes() : 포함하는지 확인 arr.find(fn)/arr.findIndex(fn) : 함수 연결 가능 첫 번째 true값만 반환하고 끝 만약 없으면 undefined를 반환 arr.filter(fn) : 만족하는 모든 요소를 배열로 반환 arr.reverse() : 역순으로 재정렬 a..

property key : 문자형 const obj = { 1 : '1입니다.', false : '거짓' } symbol(심볼) : 유일한 식별자를 만들 때 사용 const a = Symbol(); //new를 붙이지 않습니다! const b = Symbol(); console.log(a) //결과값 : Symbol() console.log(b) //결과값 : Symbol() but a == b; => false로 출력 a === b; => false로 출력 symbol : 유일성 보장 const id = Symbol('id'); //뒤에 붙은 'id'는 설명해주는 것임. 심볼 생성에 영향x 심볼을 객체로 사용하여 보면 property key : 심볼형 const id = Symbol('id); cons..

변수 호이스팅 TDZ (Temporal Dead Zone) 변수 let const var 1) var var는 한 번 선언된 변수를 다시 선언할 수 있다 var name = 'Mike'; console.log(name); //Mike var name = 'Jane'; console.log(name); //Jane *같은 상황에서 let은 문제가 발생 var는 선언하기 전에 사용할 수 있다 console.log(name); //undefined var name = 'Mike'; 왜냐하면 var는 var name; console.log(name); //undefined name='Mike'; 로 동작하기 떄문 var로 선언한 모든 변수는 코드가 실제로 이동하지는 않지만 최상위로 끌여올려진 것처럼 작동, 이를..