에러 발견React와 TypeScript를 활용하여 프로젝트를 진행하던 도중 프로젝트를 빌드하다가 다음과 같은 에러를 발견했다.setData라는 값이 선언되었으나 사용되지 않았다는 이유로 빌드에 실패하였다. 처음에는 그냥 setData만 삭제하면 실패하지 않겠구나 하고 setData를 제거하는 선에서 끝낼려고 했는데, 생각해보니 너무 억울했다. 고작 그런 이유로 에러를 발생시킨다는게 규칙이 너무 엄격한 것 같다고 생각했다. 그래서 이러한 규칙을 완화하기 위해 에러가 발생하는 이유를 찾아보았다.에러 원인빌드를 시도했을 때 에러가 발생하였으니 컴파일 과정에서 실패했을거라 예상하고 tsconfig.json 파일을 열어보았다. TypeScript 공식문서에서 tsconfig.json에 대해서 확인할 수 있다. ..

웹에서 특정 요소에서 이벤트가 발생하면 이벤트가 원하는 요소에 도달하기까지는 다음과 같은 과정을 거친다. 먼저 캡처링 단계에서는 최상위 window 객체에서 문서 트리를 따라 하위 요소로 이벤트가 전파된다. 그리고 타깃 단계에서 이벤트의 발생원을 식별한다. 버블링 단계는 이벤트가 발생원에서 상위 요소로 전파되는 단계다. 최종적으로 최상위 window 객체에 도달하면 이벤트 전파가 종료된다. 정리하자면, 이벤트 처리는 이벤트 발생원에서만 실행되는 것이 아니다.아래 예시 코드를 보면export default function App() { const handleParent = () => alert('부모 요소'); const handleCurrent = () => alert('현재 요소'); const ..

리액트로 프론트엔드 개발을 하다보면 웹 어플리케이션의 크기가 커지게 되는데, 그만큼 번들 크기가 커지고 초기 로딩 시간이 길어져 사용자 경험(UX)가 저해된다. 이런 상황에서 React의 Suspense와 동적 import를 활용하면 사용자에게 필요한 코드만 그때그때 가져와 초기 렌더링 비용을 감소시킬 수 있다. 이번 글에서는 내가 진행했던 프로젝트에서 Suspense와 동적 import를 활용하여 성능을 개선한 과정을 이야기하고자 한다. 성능 최적화 전 코드는 다음과 같다.import { createBrowserRouter, createRoutesFromElements, Route,} from 'react-router-dom';import Layout from './components/layout..

React로 진행하던 웹 프로젝트에서 외국인을 위해서 여러 언어를 지원하는 기능을 도입하자는 얘기가 나왔다. 서비스 주요 대상이 외국인이었기 때문에 한국어, 영어, 중국어, 일본어, 베트남어 등 많은 언어를 지원해야 한다. 그래서 리액트 프로젝트에 국제화 서비스를 도입하기 위해 react-i18next 라이브러리를 사용하기로 하였다. react-i18next 사용법react-i18next은 번역을 위한 JSON 파일을 언어별로 준비하고 useTranslation Hook에서 반환해서는 t 함수를 통해 key 값을 넘겨주면 value를 반환하는 방식으로 동작한다. 아래는 각각 한국어, 영어에 해당하는 JSON을 작성한 결과이다.한국어// locales/ko/common.json{ "Hello": "안녕하..

다른 폼 요소와 달리 파일 입력 박스는 앱에서 값을 설정하지 않는다(사용자가 지정한 값을 앱이 받을 뿐, 앱이 특정 파일을 지정할 수 없다). 따라서 파일 입력 박스는 항상 비제어 컴포넌트로 구현된다.다음은 선택한 파일 정보를 로그에 출력하는 예시다.export default function FormFile() { // 파일 입력창에 대한 참조 const file = useRef(null); // [보내기] 버튼 클릭 후 파일 정보 로그 출력 function show() { const fs = file.current.files; // 획득한 파일군을 순서대로 스캔 for (const f of fs) { console.log(`파일명: ${f.name}`); con..

Immer 라이브러리는 주로 객체를 업데이트 하는 용도로 사용된다. 리액트에서는 state 객체를 업데이트 할 때 불변성을 관리하는 용도로 사용될 수 있는데, 기본적으로 state 객체를 업데이트 할 때는 다음과 같은 방법을 사용한다.import { useState } from 'react';export default function StateForm() { const [form, setForm] = useState({ name: '홍길동', address: { do: '경기도', city: '성남', }, }); const handleForm = (e) => { const { name, value } = e.target; setForm({ ..

이번 글에서는 리액트에서 state를 업데이트하는 두 가지 방법에 대해서 소개한다.일단 첫 번째 방법이자 기본적인 state를 변경하는 방법은 아래와 같다.import { useState } from 'react';export default function Counter() { const [count, setCount] = useState(10); // 카운트 버튼을 클릭하면 count 값이 1 상승한다. const handleClick = () => { setCount(count + 1); setCount(count + 1); }; return ( 카운트 {count} );}handleClick 함수에서 setCount 함수를 2번 호출하고 있기 때문에 카운트 버튼을 클릭할 때마다..

className 속성에 대한 스타일 지정은 매우 간단하지만, ‘고정 스타일과 선택 스타일이 혼재된 경우’, ‘선택해야 할 스타일이 여러 개에 걸쳐 있는 경우’에는 {…} 표현식이 복잡해지기 쉽다는 문제가 있다.이러한 번거로움을 피하기 위해 classnames라는 라이브러리를 도입하는 것이 좋으며, classnames 라이브러리는 터미널에서 다음 명령어로 설치할 수 있다.npm install classnameshttps://github.com/JedWatson/classnamesimport React from 'react';import cn from 'classnames';export default function Button (props) { return ( 클릭 );}사용법..

설치npm create vite@latest [프로젝트명] -- --template react-ts0단계: 컴포넌트 만들기// components/Counter.jsximport React from 'react';const Counter: React.FC = () => { const counter = 0; return ( {counter} 더하기 빼기 );};export default Counter;1단계: store 만들기export type **RootState** = **ReturnType**;export type **AppDispatch** = **typeof store.dispatch**;RootState: Redux 스..

💡 SideEffect란?컴포넌트 그리기와는 직접적인 관계가 없는 처리ex) 화면을 그린 DOM 수동 변경, 로그 출력, 타이머 설정, 데이터 취득 등useEffectsideEffect를 실행하기 위해 사용하는 훅useEffect()를 사용하면, props나 state가 업데이트되고, 다시 그리기가 완료된 후 처리가 실행의존성 배열을 지정해서, 특정 데이터가 변화할 때만 처리하도록 설정 가능다음 코드는 useEffect를 사용한 예제입니다.Clock 컴포넌트는 현재 시각을 표시하고, 1초마다 시간이 업데이트되며, 드롭다운 메뉴를 선택해서 시각 표기를 변경할 수 있습니다. 시각 표기 설정은 로컬 스토리지에 저장됩니다. 리로드 뒤에는 로컬 스토리지에 저장된 데이터를 읽어, 가장 마지막에 선택한 값을 표시합..