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

설명 useReducer는 State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook이다. 다시 말해, useReducer는 useState처럼 State를 관리하고 업데이트 할 수 있는 Hook이다. useState를 사용한 경우 : 컴포넌트 내부에 State 업데이트 로직이 존재 useReducer를 사용한 경우 : 컴포넌트 외부에 State 업데이트 로직이 존재 https://velog.io/@iamhayoung/React-Hooks-useReducer%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 React Hooks :: useReducer에 대해 알아보기 React가 제공하는 내장 훅(Bu..

React Hook API에는 useRef라는 API 함수를 제공해준다. javascript를 사용하다보면 선택자를 이용해서 요소의 값을 가져오는 경우가 많다. 예를 들어 getElementById, querySelector 를 사용한다. React를 사용할때도 이와같은 요소의 값을 가져오는 경우가 있는데 이럴경우 useRef를 사용하면 된다. 사용법은 간단하다. import에 useRef를 가져오고, 아래와 같이 ReactHook function에 선언을 해주고 return해주는 요소에 ref로 주입해주면 된다. const useRef = useRef(); return( useRef테스트 ) javascript에서 특정 Dom을 선택하는 역할 ex) getElementById, querySelector..

리액트를 사용하면 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 ( ()=..