개념 공식문서 : TanStack Query(FKA React Query)는 종종 웹 애플리케이션용 누락된 데이터 가져오기 라이브러리로 설명되지만 좀 더 기술적인 용어로 말하면 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만듭니다. 쉽게 말해. 1.서비 상태 가져오기 2.캐싱 3.동기화 및 업데이트 이 3가지를 편리하게 제공해주는 라이브러리 인 것 같다. 🙌 「if(kakao)2021 - 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유」 세줄요약 🤟 1. React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다. 2. 복잡하고 장황한 코드가 필요한 ..

바벨이란 : 최신 사양의 자바스크립트 코드(ES6+)를 IE나 구형 브라우저에서도 동작하는 코드로 변환(트랜스파일링)해주는 트랜스파일러이다. 1) babel 기본 라이브러리 설치 npm i -D @babel/core //기본적인 바벨 npm i -D@babel/preset-env //브라우져에 맞게 알아서 바꿔주기 npm i -D @babel/preset-react //리액트 용도로 jsx로 npm i -D babel-loader //바벨 웹팩 연결. npm i -D @babel/plugin-proposal-class-properties //jsx class 문법 지원 npm install --save-dev @babel/plugin-transform-runtime //es6 메서드나 생성자 지원 npm..

리액트를 사용하면 data를 양방향으로 바인딩이 가능하다. 리액트 컴포넌가 하나의 데이터를 바라보기 떄문이다. 그렇다면 리액트 데이터를 변경을 하면 데이터가 자동으로 갱신이된다. const [data, setData] = useState({data : "data"}); 리액트는 useState로 데이터를 생성하고 데이터를 props방식으로 공유한다. 데이터를 변경하려면 앞에서 변수로 선언한 setData 를 이용한다. [리액트 데이터 참조방식] 리액튼는 얋은 참조를 반영하여 스프레트 문법인 ...을 통해 데이터를 갱신한다. 이 부분은 나중에 깊게 정리하려 한다. 지금 보려는 방식은 useState의 setData의 callback 방식을 보려한다. [사용 예( callback 이용 데이터 가져오기)] s..

useEffect 함수는 컴포넌트가 랜더링 될때마다 실행되는 HOOK 싸이클이다. 컴포넌트가 MOUNT, UNMOUNT, UPDATE 가 되었을 경우에 따라서 싸이클을 실행할 수 있다. 함수 사용법은 useEffect ( function , deps) 이다. function은 콜백함수이고, deps는 배열형태이다. 배열 형태에 따라서 hook 사이클을 조절할 수있다. 1.deps -> [] 빈 배열 설정 useEffect ( ()=>{ console.log('마운트가 될 경우') } , []) 2.deps -> 생략 설정 useEffect ( ()=>{ console.log('컴포넌트가 랜더링 될때마다 ') } ) 3.deps -> 특정 props, stat가 갱신될때 마다. useEffect ( ()=..