뚝딱뚝딱 코딩 기록_

[React_ useLayoutEffect] useEffect와 useLayoutEffect의 차이를 알아보자. 이전 회사에 재직하면서 useLayoutEffect라는 React Hook을 처음 접하게 되었다. 사실 잊고 살다가 얼마 전 면접에서 useEffect와 useLayoutEffect의 차이와 useLayoutEffect를 사용해 본 적 있냐는 질문에 다시 떠올랐다. 사용해 본 적도 없고 개념도 잘 몰라서 솔직하게 모른다고 대답하긴 했지만, 이번 기회에 공부해보는 것도 좋을 것 같아서 정리해 보려고 한다. ❓ useEffect, useLayoutEffect React Component의 Side Effect를 관리하는데 사용되는 Hooks 1️⃣ useEffect(setup, dependenci..

[React_ 절대 경로 설정하기] 지금까지는 절대 경로의 필요성을 많이 느끼지 못했는데 최근에 상대 경로로 import된 '../../../...' 이러한 것들이 신경쓰여 절대 경로를 설정하기 시작했다. - tsconfig.json // tsconfig.json { ... "compilerOptions": { ... "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } React 프로젝트를 Typescript로 세팅하고 절대경로 설정을 위해 tsconfig.json 파일에 baseUrl과 paths를 넣어주었다. Javascript로 실행할 때에는 jsconfig.json 파일만 수정하면 간단하게 해결 되었는데 Typescript에서는 경로가 없다면서 오류가 계속 발..

[React_ react-router] 리액트 프로젝트를 진행하면서 react-router v6을 사용하게 되었다. 헤더, 푸터 등 공통적으로 사용되는 컴포넌트의 중복을 줄이기 위해 createBrowserRouter와 Outlet을 사용하였다. ❔ index.tsx, router.tsx, App.tsx 파일 - router 설정 // index.tsx import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App"; const root = ReactDOM.createRoot( document.getElementByI..

[Recoil] ❓ Recoil : 리액트 상태 관리 라이브러리 1. recoil 설치하기 npm install recoil or yarn add recoil 2. RecoilRoot로 컴포넌트 감싸기 - : 상태를 관리하고 사용할 상위 컴포넌트 3. Atom 생성하기 - src 디렉토리에 recoil을 생성한 뒤 state를 정의할 파일(ts / js 모두 가능)을 만든다. - 파일 이름은 임의로 정하면 된다. - key : state를 식별할 id (유일해야 함) - default : 초기 값 ❗ 각 컴포넌트에서 state를 읽고 업데이트 하는 것이 가능하다. ❗ 상태 값을 읽는 컴포넌트들은 해당 atom에 subscribe(구독) 되기 때문에 업데이트 될때마다 리렌더링이 발생한다. 3. 컴포넌트에서..

[React_ axios] 유튜브 클론 프로젝트에서 axios로 통신을 하던 중 baseURL과 api_key가 반복적으로 사용되고 있었다. 반복되는 코드를 줄이기 위해서 axios.create를 통해 instance를 생성하여 사용하기로 했다. 1. 인스턴스 생성 후 export (내보내기) - 폴더 / 파일 이름을 임의로 정하고 axios를 import한다. - axios.create({}) 안에 기본 세팅 값들을 넣어준다. ❕ baseURL : request url (요청 보낼 url) ❕ params : 기본 query params → {key: value} 형태로 넣어준다. 2. 외부에서 import 하여 사용하기 - 기존 axios를 사용하는 것과 동일하게 사용 가능하다. axios.creat..

[React_ eslint 오류] yarn을 생성한 리액트 프로젝트를 수정하고 저장했는데 이런 오류가 발생했다. 이유는cra와 yarn이 충돌했기 때문에 발생하는 문제이다. ❗ 해결 1. eslint-fonfig-react-app 를 설치한다. yarn add -D eslint-config-react-app 2. root 폴더에 .yarnrc.yml 파일을 아래 사진과 같이 생성한다. 3. 캐시 삭제 yarn cache clean 위 명령어로 캐시를 삭제한 후 다시 실행한다.

[React_ useReducer + ContextAPI] ❓ 전역으로 state 관리하기 리액트로 개발을 하면서 느낀 점은 컴포넌트 층이 많아지면 prop로 state를 전달하는 과정(prop drilling)에서 prop을 추적하기 어려워 유지보수에 영향을 미친다는 점이었다. 이러한 현상을 해결하기 위해 상태 관리도구인 Redux, Recoil, Mobx 등을 사용하여 과도한 prop drilling을 줄이는 방법을 사용한다. ❓ useReducer useState를 대체하는 hook으로 state가 여러 하위 값을 포함하는 복잡한 상태거나 다음 state가 이전 상태에 종속되는 경우 선호되는 방법이다. [state, dispatch] 한 쌍으로 반환되며 컴포넌트 밖에 state를 정의하여 사용할 수..

[React_input[type='file']] 같은 파일 연속 업로드 시 생기는 문제에 대해 알아보자 input 태그를 이용하여 이미지 첨부 및 미리보기 포스팅 👉 [리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부 👉 [리액트] input 이미지 미리보기_🎨 ⚡ input file 업로드 코드 같은 파일 (이미지)를 연속으로 업로드 하는 경우 onChange 이벤트가 실행되지 않는 오류가 발생되었다. 즉, 같은 파일이 연속적으로 추가되지 않는 문제였는데 바로 input 으로 파일 추가시 value를 초기화하지 않으면 이전 값을 그대로 가지고 있기 때문이었다. ❓ 해결방법 💡 onClick 이벤트 발생시 value 초기화하기 e.target.value = null}> -..

[React_ Error Boundary] 리액트에서 예외 발생 시 예외 페이지를 보여주는 방법에 대해 알아보자 리액트로 예외 페이지를 생성하는 두 가지 방법을 알아보자. ⚠ 리액트 Lifecycle method를 이용하여 구현하기 - errorBoundary.jsx class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { logErrorToMyService(err..

[React_ react-toastify] react-toastify 사용법에 대해 알아보자 웹사이트를 개발하다 보면 잠깐 경고창이 생겼다가 사라지는 toast를 띄우야 하는 경우가 있다. 직접 구현하는 방법으로는 setTimeout와 state를 사용하여 직접 커스텀하는 방법이 있다. 이번 포스팅에서는 react-toastfy 라는 라이브러리를 사용하는 방법에 대해 알아볼 것이다. 1. 라이브러리 설치 npm install react-toastify 2. 코드 삽입 import { toast, ToastContainer } from 'react-toastify'; export default function App() { const success = () => toast.success('성공!'); re..