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

설치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초마다 시간이 업데이트되며, 드롭다운 메뉴를 선택해서 시각 표기를 변경할 수 있습니다. 시각 표기 설정은 로컬 스토리지에 저장됩니다. 리로드 뒤에는 로컬 스토리지에 저장된 데이터를 읽어, 가장 마지막에 선택한 값을 표시합..