React

[React] Router

Router 설치 yarn add react-router-dom 세팅 라우터는 아래와 같이 src > index.js에 App을 BrowserRouter 로 감싸서 App 에서 Route 에 따라서 컴포넌트를 렌더링 해줄 수 있게 한다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); BrowserRouter: 주소..

[React-Query] useMutation 사용하기

useMutation import { useMutation } from "react-query"; const { data, isLoading, mutate } = useMutation(mutationFn, options); useMutation hook은 인자로 2가지를 받는다. useQuery 처럼 key 값은 따로 없다. mutationFn: mutate를 위한 패치함수 (필수) options: 옵션 (선택) mutationFn 함수로 POST, PUT, DELETE 및 각 요청에 필요한 인자들이 포함된다. 또한, options로 설정하는 값들, 그리고 반환되는 프로퍼티들은 아래와 같은 값들이 있다. (공식문서 참고) options onMutate mutation 전에 실행되는 함수로, 미리 렌더링 ..

[React] 함수형 컴포넌트에서 데이터 전달

1. 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 props 를 이용하여 자식 컴포넌트에게 데이터를 전달한다. import React from 'react'; import ChildrenComponent from './ChildrenComponent'; function ParentComponent(){ return( ) } export default ParentComponent; import React from 'react'; function ChildrenComponent(props){ return( 전달 받은 값:{props.value} ) } export default ChildrenComponent; 2. 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 자식 컴포넌트는 props를 이용하여 부모 ..

Redux와 Recoil 개념 정리

Redux, Recoil은 React 상태관리 라이브러리이다. Redux: Flux 아키텍쳐(패턴) 기반 Recoil: Atomic 모델 기반 장단점 Recoil 😊장점: React의 useState 훅과 비슷하게 동작하며 직관적이면서 간단한 구조. 코드의 양이 적다. 🥲단점: Redux처럼 안정적인 Devtool이 아직 없다. snapshot 이라는 개념이 존재하지만, 직관적으로 볼 수 있는 것은 아니고 콘솔을 이용하는 형태로 볼 수 있다. ✅ 디버깅의 측면에서 봤을 때 리덕스가 더 유리하다. Recoilize라는 Devtool이 있는데 작은 버그들이 있다고 한다. 실제로 recoil을 이용해 개발하시는 분들은 console을 더 선호하신다고 한다. Redux 😊장점: 상태값의 변경 사항을 Redux ..

[React] React Query의 useQuery

useQuery란? useQuery 는 React Query를 이용해 서버로부터 데이터를 조회해올 때 사용한다. *데이터 조회가 아닌 데이터 변경 작업을 할 때는 useMutation 을 사용한다. useQuery는 다음과 같은 형태로 사용된다. // 1 const res = useQuery(queryKey, queryFn) // 2 const res = useQuery({ queryKey: queryKey, queryFn: queryFn }) 시작하기 react-query를 설치해주고, app.tsx를 다음과 같이 변경해준다. yarn add react-query // app.tsx import { QueryClient, QueryClientProvider } from "react-query"; imp..

react-async 로 요청상태 관리하기

[React/리액트] react-async 로 요청상태 관리하기 react-async 는 useAync 와 비슷한 함수가 들어있는 라이브러리이다. 이 라이브러리 안에 들어있는 함수 이름도 useAsync 인데, 사용법이 조금 다르다. 만약 매번 프로젝트를 만들때마다 직접 요청 상태 관리를 위한 커스텀 Hook을 만들기 귀찮다면 이 라이브러리를 사용하면 된다. 기존에 만들었던 커스텀 Hook은 결과물을 배열로 반환했다면, 이 Hook은 객체 형태로 반환한다. 설치 $ yarn add react-async 사용법 react-async 의 useAsync 를 사용할 때 파라미터로 넣는 옵션 객체에는 호출 할 함수 promiseFn 을 넣고, 파라미터 필드 이름과 함께 (customerId) 넣어주어야 한다. ..

useAsync 커스텀 Hook 만들기

데이터를 요청해야 할 때 마다 리듀서를 작성하는 것은 번거롭다. 매번 반복되는 코드를 커스텀 Hook을 만들어서 요청 상태 관리 로직을 쉽게 재사용 하는 방법을 알아보자. useAsync.js import { useReducer, useEffect, useCallback } from "react"; function reducer(state, action) { switch (action.type) { case "LOADING": return { loading: true, data: null, error: null, }; case "SUCCESS": return { loading: false, data: action.data, error: null, }; case "ERROR": return { loadin..

useReducer 로 요청 상태 관리하기

API 연동하기 [React/리액트] API 연동하기 CRA로 프로젝트 폴더를 생성하고, API를 호출하기 위해서 axios 라는 라이브러리를 설치해준다. npx create-react-app api-integrate cd api-integrate yarn add axios axios를 사.. devts.tistory.com 이전에 구현했던 User 컴포넌트에서 useState 대신에 useReducer 를 사용해서 구현해보고자 한다. useReducer 를 사용해서 LOADING, SUCCESS, ERROR 액션에 따라 다르게 처리를 해보려고 한다. useReducer 로 구현했을 때의 장점은 useState 의 setState 함수를 여러번 사용하지 않아도 된다는 점과, 리듀서로 로직을 분리했으니 다..

API 연동하기

[React/리액트] API 연동하기 CRA로 프로젝트 폴더를 생성하고, API를 호출하기 위해서 axios 라는 라이브러리를 설치해준다. npx create-react-app api-integrate cd api-integrate yarn add axios axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다. (REST API) API요청을 하면 Promise를 반환한다. 더보기 ⭐ REST API란? 간단하게, 클라이언트와 서버가 소통하는 방식을 말한다. 소통하는 방식은 여러가지 형태가 있는데, 이를 HTTP 메서드라는 것을 사용해서 구분을 한다. 이 중에 HTTP 메서드는 대표적으로 GET, POST, PUT, DELETE 가 있다. REST AP..

ContextAPI(2) - useReducer로 dispatch context 만들기

[React/리액트] ContextAPI 활용 - useReducer로 dispatch context 만들기 (ContextAPI 이전글 바로가기) TodoList를 만들면서 이런 식으로 TodoList에서는 사용하지 않는 기능을 TodoItem에 넘겨주기 위해서 중간다리 역할로 넘겨주고 있으므로 이를 ContextAPI를 이용해서 관리하고자 한다. 이런 작은 프로젝트에서는 ContextAPI를 꼭 사용하지 않아도 되지만, 대규모 프로젝트나 실무에서는 context API를 사용하면 편리하다. ContextAPI를 통해 컴포넌트에서 dispatch로 참조하는 방법은 다음과 같다. useReducer 를 사용하여 상태를 관리하는 컴포넌트를 만든다. >> TodoProvider state 와 dispatch..

리액트 컴포넌트 스타일링

1. Sass Sass는 CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해준다. ⭐ Sass 가이드 참고 Sass에서는 .scss 와 .sass 두 가지의 확장자를 지원한다. Sass 가 처음 나왔을 땐 sass 만 지원됐었는데 .sass 는 중괄호를 쓰지 않고 들여쓰기를 쓰고, 세미콜론을 쓰지 않는 형태도 있었기 때문에 개발자들이 헷갈려하자 .scss 라는 확장자를 만들어서 이점을 보완하여 css 문법과 유사하게 작성할 수 있도록 되었다. 따라서 Sass 로 스타일링을 한다고 하면 .scss 확장자를 많이 이용한다. .sass $font-stack: Helvetica, sans-serif ..

React icons 라이브러리 사용하기

[React/리액트] React icons 라이브러리 사용하기 링크를 참고해서 원하는 아이콘을 리액트에 불러와서 사용할 수 있다. 설치하기 $ yarn add react-icons 사용법 import React from 'react'; import { MdCheckBox, MdCheckBoxOutlineBlank } from 'react-icons/md'; function CheckBox({ children, checked, ...rest }) { return ( {checked ? : } {children} ); } export default CheckBox; import 로 불러온 뒤, 컴포넌트 형태로 그대로 사용하면 된다. ⭐ input custom 스타일링 하는 방법 .checkbox input ..