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

개요CSS에서 Z축을 표현할 때는 주로 z-index 속성에 정수 값을 입력하여 어떤 요소를 위로 올릴지 결정한다.아래 그림처럼 z-index 값이 클수록 요소가 더 위에 쌓이는 것을 확인할 수 있다.이슈그러나 z-index는 단순히 요소를 위로 올리는 속성이라고 생각했던 찰나, z-index 값을 아무리 높게 설정해도 요소가 위로 올라오지 않는 현상을 발견했다.아래 그림에서는 모달창이 헤더 아래에 가려져 있는 모습을 확인할 수 있으며, 이때 모달의 z-index는 101이고 헤더는 100으로 설정되어 있다.z-index를 높게 설정하면 낮은 값의 요소보다 위에 표시되어야 하는 것이 아닌가? 라는 의문이 들었고, 이 궁금증을 해결하기 위해 z-index와 쌓임 맥락(Stacking Context)에 대해..

웹에서 특정 요소에서 이벤트가 발생하면 이벤트가 원하는 요소에 도달하기까지는 다음과 같은 과정을 거친다. 먼저 캡처링 단계에서는 최상위 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 ( 클릭 );}사용법..

사용자가 입력한 문자열을 그대로 표시하는 앱이 있다고 가정해보자. content에 사용자가 입력한 스크립트에 대한 정보가 들어있고, 이를 페이지에 보여준다.const content = ` 제목3 본문`;root.render( {content}); 다음과 같이 입력하면 h3태그와 p태그는 이스케이프 처리되어 태그가 아닌 일반 문자열로 페이지에 반영된다.이를 통해 의도하지 않은 코드의 침입을 방지할 수 있지만, 경우에 따라서는 동적으로 HTML 문자열을 생성하여 페이지에 반영하고 싶은 경우도 있을 수 있다. 이럴 때는 dangerouslySetInnerHTML 속성을 활용할 수 있다. const content = ` 제목3 본문`;root.render( );실제로 dangerouslySetInnerH..