본문 바로가기

react

[React] 폰트 깜빡임 현상 해결(Global Style, CSS)
Frontend/React 2022. 12. 29. [React] 폰트 깜빡임 현상 해결(Global Style, CSS) 프로젝트 진행 중 폰트 적용이 늦어지는 깜빡임 현상을 해결한 과정을 기록하려고 한다. 문제 상황 위에서 말했듯 컴포넌트가 렌더링 될 때마다 폰트 적용이 늦어져 깜빡임 현상이 일어났다. 처음에는 리렌더링을 막는 방향으로 해결해보려고 했다. 메모제이션을 사용하고, 관련 문서들을 찾아보며 리팩토링 해봤지만 해결되지 않았다. 근본적인 문제가 폰트 관련 문제이므로 폰트 적용에 문제가 있는 것이 아닌가 생각이 들었다. 해결 전 원래 폰트 적용은 styled-components의 GlobalStyle을 이용해 적용했다. import { createGlobalStyle } from 'styled-components'; import reset from 'styled-reset'; import GangwonEdu_OTFB..
[React] Context, useContext, Recoil(전역 상태 관리)
Frontend/React 2022. 11. 30. [React] Context, useContext, Recoil(전역 상태 관리) 전역 상태 관리에 대한 공부를 하던 중 React에서 지원하는 Context와 Recoil의 사용법과 차이에 대한 정리를 했다. 이에 대한 기록이다. Context API context를 사용할 때 고려해야 할 점 context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것입니다. context를 사용하면 컴포넌트를 재사용하기가 어려워진다. 여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다. 데이터 값이 변할 때마다 모든 하위 컴포넌트에게 널리 Broadcast 하는 것이 context다. createContext createContext는 context 객체를 생성한다. import {createConte..
[React] CRA 프로젝트 초기 설정(ESLint,Prettier)
Frontend/React 2022. 11. 16. [React] CRA 프로젝트 초기 설정(ESLint,Prettier) 단기 프로젝트를 진행하면서 프로젝트 초기 설정을 해볼 기회가 생겨서 이에 대한 기록을 남기려고 한다. ESLint 개요 ESLint는 코드 스타일을 통일해주는 역할을 한다. 공식문서에서는 JS 코드의 문제를 발견하고 고쳐준다고 나와있다. 설치 먼저 CRA 프로젝트에서 진행하는 설정이므로 리액트 앱을 만들어준 후 ESLint를 설치해준다. ESLint는 코드를 통해 사용하는 것이 아닌 vscode에서 적용하는 것이기 때문에 패키지와 vscode의 ESLint extension을 설치해야 한다. $ npm create-react-app $ npm i -D eslint 몇 가지 질문이 나오는데 해당 프로젝트에 맞는 답변을 고르고 설치를 마치면 .eslintrc 파일이 생성된다. //.eslintrc.json ..
[React] Server State&Client State,React-Query
Frontend/React 2022. 9. 30. [React] Server State&Client State,React-Query 프로젝트를 진행하면서 비동기로 처리되는 Server State와 Client State의 차이를 체감하고 React-Query를 공부한 기록을 남기려고 한다. Server State, Client State 배경 내가 Server State와 Client State의 차이를 체감한 것은 좋아요 기능을 구현했을 때이다. 그 이유는 이 간단한 기능을 구현하는데 서버와 클라이언트의 입장을 모두 고려해야 하기 때문이다. 서버 좋아요 개수 증가 요청을 받는다. DB에 좋아요 개수를 증가시키고, 응답을 보낸다. 클라이언트 하트 이모티콘을 누른다. 바로 증가된 개수를 확인한다. 여기서 좋아요 개수는 Server State로 비동기 요청이 이루어지는 데이터다. 때문에 요청이 이루어지면 기존의 값은 더이상 유효하지 않으..
[React] 리액트 토스트 메세지 구현하기(react-toastify)
Frontend/React 2022. 9. 27. [React] 리액트 토스트 메세지 구현하기(react-toastify) 에러메세지나 알림 등을 보여줄 때 유용하게 쓰일 토스트 메세지에 대한 기록이다. react-toastify 패키지를 사용하면 쉽게 토스트 메세지를 보여줄 수 있다. installation -yarn add react-toastify -npm install —save react-toastify 문서에 다양하게 사용할 수 있도록 기능들이 나와있다. Usage react-toastify를 사용하면 정말 간단하게 토스트 메세지를 구현할 수 있다. import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; function App(){ con..
[React] react-hook-form 사용법(useForm, watch)
Frontend/React 2022. 8. 7. [React] react-hook-form 사용법(useForm, watch) 프로젝트 진행 중 로그인, 회원가입 기능을 구현하면서 react-hook-form이라는 편리한 API를 찾게 되어서 간단한 사용법을 기록하려고 한다. react-hook-form은 여러 개의 input 태그를 효율적으로 관리할 수 있는 기능이다. 공식 문서에서 내가 필요한 기능만 간단히 공부하고 하는 기록이다. 시작하기 먼저 npm이나 yarn에서 react-hook-form을 install 해준다. react-hook-form에서 useForm을 import 해준다. import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit, formState: { errors }, wat..
[React] useState batching, 비동기, 동기처리
Frontend/React 2022. 8. 6. [React] useState batching, 비동기, 동기처리 useState의 두 가지 특이점에 대해서 기록하려고 한다. 두 가지 특징 모두 useState가 반환하는 세터 함수에 의해 일어나는 일이다. Batch Update state값의 업데이트는 16ms 단위로 이루어진다. 16ms 내 변경된 state값은 한 번에 업데이트된다. 때문에 setState 작업이 비동기적으로 작동하는 것이다. import { useState, useEffect } from "react"; export default function App() { const [num, setNum] = useState(0);//초기값을 0으로 한 state const handlePlus = () => { setNum(num + 1);//기존 num 값에 1을 더하는 작업을 3번 함 setNum(n..
[React] useState로 button과 input 관리하기
Frontend/React 2022. 7. 11. [React] useState로 button과 input 관리하기 State state는 리액트에서 데이터 값을 저장하는 객체이다. state가 아닌 변수에 저장하고 데이터를 변화시키면 update 작업이 일어나지 않아 변수의 변화가 렌더링 되지 않는다. 함수형 컴포넌트에서는 state를 사용할 때 useState라는 훅을 사용한다. useState 먼저 아래에 index.js가 있다는 가정하에 코딩하겠다. import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.r..
[React] React 컴포넌트/Props
Frontend/React 2022. 7. 6. [React] React 컴포넌트/Props 컴포넌트 생성 방법 import React from 'react' function App(){ return( Hello ); }; export default App; 1. 함수형 컴포넌트 App을 생성한다. 2. JSX문법의 앨리먼트를 리턴한다. 3. App 컴포넌트를 다른 컴포넌트에서 쓸 수 있도록 export 한다. export 한 컴포넌트 사용하기 import React from 'react' function SayHello(){ return( Hello ); }; export default SayHello; import React from 'react' import SayHello from './SayHello' function App(){ return( ); }; export default Ap..

티스토리툴바