🌊 TanStack Query (리액트 쿼리) * 아직 공부 중입니다. 리액트를 사용하여 개발하면 웹에서 데이터를 받아 관리해야하는 일이 많습니다. React Query, 현재는 이름이 변경된 TanStack Query는 강력한 비동기 상태 관리 라이브러리로, 서버의 데이터를 클라이언트에 가져오거나 캐시를 관리, 데이터 업데이트 등 비동기 과정을 더욱 편하게 하는데 사용됩니다. 예를 들어, useEffect로 데이터를 받아오는 컴포넌트를 만들고 그 컴포넌트를 다른 컴포넌트에서 호출하였을 때, 값을 재사용하거나 같은 상태를 공유하는 것이 아닌, 컴포넌트를 호출하는 여러 컴포넌트를 걸쳐 계속해서 새로운 값을 받아오며 네트워크 통신이 발생하게 됩니다. 따로 캐싱을 관리하지 않아서인데요. TanStack Que..

🌊 Redux 리덕스를 사용하면 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 전달, 업데이트할 수 있다. Redux는 React에 종속되는 라이브러리가 아니며, 리액트에서 사용되려고 만들어졌지만 실제로 다른 UI 라이브러리/프레임워크와 함께 사용할 수 있으며 예 : angular-redux, ember-redux 등, Vue도 가능하지만 Vue에선 리덕스와 유사한 vuex를 주로 사용) 바닐라 자바스크립트와 함께 사용할 수 있다. Redux 키워드 Action 액션 : 상태에 어떠한 변화가 필요하면 액션이 발생한다. 액션은 객체 형태로 표현한다. { type : 'INCREASE..

yarn으로 react 설치 후 파일 내용을 수정하면 eslint가 react-app을 찾을 수 없다며 오류가 발생합니다. 저는 yarn을 처음 설치 했을 때 부터 생긴 오류였고 이를 해결하기 위해 node 재설치 등 여러가지 방법을 해보았으나 해결이 되지 않았습니다. [eslint] Failed to load config "react-app" to extend from. 결론부터 얘기하면 이 오류는 eslint, eslint-config-react-app 패키지를 삭제 후 재설치 하여 해결하였습니다. eslint, eslint-config-react-app 삭제하기 yarn remove eslint eslint-config-react-app eslint, eslint-config-react-app 재설..

🌊 React Custom Component 과제 오늘은 리액트 hook을 사용하여 Custom Component 과제를 하였습니다. Bare minimum Requirement로 Modal, Toggle, Tab, Tag를 구현 과제가 나왔고 Advanced Challenge는 내일 도전해볼 생각입니다. 오늘 구현한 Modal, Toggle, Tab, Tag를 소개하고 코드 작성시 고려했던 점을 리뷰하려 합니다. Modal export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 10..

🌊 Hook - useCallback : useCallback은 useMemo와 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에 사용한다. 컴포넌트 내에서 함수를 선언하면 컴포넌트가 리렌더링 될 때 마다 새로 만들어진 함수를 사용하게 되는데, 대부분은 문제 없지만 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 useCallback을 사용하여 최적화한다. 즉, 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. useCallback import React, { useCallback, useMemo, useState } from 'react'; const getAverage = (numbers) => { console.log('평균값 계산 중....

🌊 Hook - useMemo : useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 액션 값은 주로 다음과 같은 형태로 이루어져 있다. 리덕스에서 사용하는 액센 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액센 객체는 반드시 type을 가지고 있을 필요는 없으며, 객체가 아니라 문자열이나 숫자열이어도 상관 없다. { type : 'INCREMENT', // 다른 값들이 필요하다면 추가로 들어감 } useMemo 리스트에 숫자를 추가하고 추가된 숫자들의 평균을 보여주는 함수형 컴포넌트 import React, { useState } from 'react'; const getAverage = (numbers) => ..

🌊 Hook - useReducer : useReducer는 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. Reducer는 현재 상태, 그리고 업데이트를 위한 필요한 정보를 담은 액션 값을 전달받아 새로운 상태로 반환하는 함수이다. Reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜야 한다. function reducer(state, action){ return {...}; // 불변성을 지키면서 업데이트한 새로운 상태를 반환한다. } 액션 값은 주로 다음과 같은 형태로 이루어져 있다. 리덕스에서 사용하는 액센 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액센 객체는 반드시 type을 가지고 있을 필요..

🌊 Hook - useEffect : useEffect는 렌더링될 때 마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. useEffect import React, { useState } from 'react'; export default function Info() { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); useEffect(() => { console.log('렌더링 완료'); console.log({ name, nickname }); }); const onChangeName = (e) => { setName(e.target.value); }; const onChangeNickname..