React

코드 깔끔하게 작성하기 (리액트, Styled-Components)

자신이 짠 코드라도, 시간이 지난 뒤에 보면 이게 무슨 코드지? 하는 생각이 들 때가 있다. 하물며, 다른 사람이 내 코드를 보는 것은 어떨까? 그렇기에, 최대한 깔끔한 코드와 프로젝트를 위해서 내가 알아낸 방법을 남기고자 한다. Styled-Components 분리하기 (S-dot) Styled-Components의 이름을 짓는 방법에 대해서 고민하던 와중, 외국의 블로그들과 다른 사람들의 코드를 보고 찾은 방법이다. 기본적으로 다음과 같이 Styled-Components를 작성한다. import styled from 'styled-components'; const S = {}; S.Home = styled.div` text-align: center; font-size: 1.3rem; ` S.P = s..

SuperAgent로 API 호출하기

SuperAgent는 경량 Ajax API 라이브러리로, 사용하기 쉽고 Node.js에서도 작동하는 가독성이 좋은 라이브러리이다. 간단한 사용법은 다음과 같다. import request from 'superagent'; request .post('post 요청을 보낼 url') .send({ 'payload': 'data' }) // payload .set('Accept', 'application/json') // 옵션 설정 .then(res => { console.log(res.body); // 결과 값 }); React에서 사용하는 예제를 만들어보았다. import superagent from "superagent"; const HttpRequestWithSuperagent = () => { con..

React Query를 통한 실시간 서버 통신 (useQuery hook)

주식이나 디지털 자산 거래소를 보면, 실시간으로 현재 가격이 계속 실시간으로 갱신되어 최신 가격이 보이는 것을 확인할 수 있다. 리액트에서 이와 같은 기능을 어떻게 구현할 수 있을지 생각해 보았다. 실시간으로 서버와 통신을 하기 위해서 소켓을 사용할 수 있다. 소켓을 사용하는 방법 이외에 서버의 실시간 데이터를 받아 데이터를 갱신할 수 있는 방법으로 React Query를 사용해보기로 하였다. npm i react-query로 리액트 쿼리를 설치한다. React Query 초기 설정 리액트 쿼리를 사용하기 위해서 일단 QueryClientProvider가 사용될 컴포넌트 상위에 위치해야 한다. 그리고 QueryClientProvider의 client에 QueryClient가 연결되야 한다. import ..

간단한 Recoil 사용법

Recoil은 상태 관리 라이브러리로 facebook에서 react 전용으로 만들어졌다. 🍈 따라서 React 환경에 좀 더 최적화 된 라이브러리라고 할 수 있다. 🥕 예를 들어 Redux는 순수 javascript 환경에서도 사용될 수 있다. 기존의 상태 관리 라이브러리들보다 recoil은 배우기 쉽고 훅을 사용하기에 사용하기 편리한 장점을 지닌다. npm install recoil yarn add recoil 위와 같은 명령어로 recoil을 설치할 수 있다. RecoilRoot로 하위 컴포넌트를 감싸 사용할 수 있다. import React from 'react'; import { RecoilRoot } from 'recoil'; function App() { return ( ); } export ..

Redux를 이용하여 React 다크 모드 기능 구현하기 (with. styled-components)

styled-components를 사용하면서, createGlobalStyle를 사용하게 되었는데, 문득 이를 사용하면 손쉽게 다크 모드를 설정할 수 있지 않을까 하는 생각이 들어서 직접 다크 모드를 구현해 보았다. 🍉 전역으로 상태를 관리하기 위해서 Redux를 사용하였다. createGlobalStyle로 글로벌 스타일 설정하기 import { createGlobalStyle } from "styled-components"; import "./font.css"; const GlobalStyle = createGlobalStyle` *, *::before, *::after { box-sizing: border-box; } body { margin: 0; color: black; background-co..

Redux Toolkit (rtk) 사용하기

로그인 정보를 전역 상태로 사용하기 위하여 redux를 사용하기로 마음먹었다. 자연스럽게 일단 전역 상태를 저장할 store를 만들기 위해 createStore를 불러왔는데, 다음과 같은 상황에 처했다. 커서를 createStore에 대고 읽은 안내 메세지에 따르면, createStore는 deprecated되었고 그 대신에 @reduxjs/toolkit의 configureStore메소드를 사용하는 것을 추천받았다. 🥔 그리고 왜 RTK를 사용해야 하는지 적혀있는 공식문서의 주소도 안내받았다. 🥔 https://redux.js.org/introduction/why-rtk-is-redux-today Why Redux Toolkit is How To Use Redux Today | Redux Introduc..

React 18의 createRoot (ReactDOM.render Warning)

리액트 버전 18에 와서 평소처럼 npm run start를 했는데, 다음과 같은 에러 메세지가 콘솔창에 나타났다. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot How to Upgrade to React 18 – React Blog As we shared in the release post, React 18 introduces features powe..