2. FrontEnd/React

[ React ] Controlled Component, Uncontrolled Component의 차이점

Controlled Component리액트 상태(state)를 통해 입력값을 제어하는 컴포넌트이다이 방식에서는 입력요소의 값(value)을 리액트 상태와 동기화하고, 사용자가 입력을 변경할 때마다 onChange이벤트 핸들러를 통해 상태를 업데이트합니다useState를 활용한 input valye를 제어하는 상황을 예시로 들 수 있습니다value는 리액트상태로 관리되며, onChange이벤트가 발생할 때마다 상태가 업데이트 됩니다장점은 입력값이 리액트 상태로 관리되므로, 입력값을 쉽게 검증하고 변경할 수 있으며, 복잡한 폼 로직을 처리하는데 유리하다Uncontrolled Component리액트의 상태가 아닌 DOM자체가 입력값을 제어하는 방식이다즉, 입력요소의 값은 DOM에서 직접관리되며, 리액트는 이를..

2025. 1. 17. 11:24
2. FrontEnd/React

[ React ] 리액트의 render phase와 commit phase

리액트의 렌더링 과정은 render phase, commit phase로 나눌 수 있다먼저 render phase는 리액트가 변화된 상태나 props에 따라 어떤 UI가 변경되어야 할지를 결정하는단계이다.이 과정에선 실제로 DOM을 업데이트 하지 않고, 변경사항을 가상 DOM에서 계산하여 비교합니다이 단계는 순수하게 계산과정이기에 성능에 영향을 주지 않도록 중단되거나 다시 실행될 수 있으며 React18에서 도입된 Concurrent Mode를 통해 비동기적으로 처리될 수도 있다다음으로 commit phase는 실제로 변화된 UI를 DOM에 반영하는 단계이다이때 리액트는 가상 DOM에서 계산된 결과를 실제 DOM에 적용하고, 변화된 UI를 브라우저에 렌더링 합니다DOM업데이트 이후는 useEffect와 ..

2025. 1. 17. 11:16
2. FrontEnd/React

[ React ] useEffect와 useLayoutEffect의 차이점

useEffect와 useLayoutEffect는 모두 렌더링된 후에 특정 작업을 수행하기 위해 사용됩니다. 하지만 실행되는 타이밍과 용도가 다릅니다먼저, useEffect는 렌더링이 완료되는 시점에 비동기적으로 실행됩니다즉, 화면이 실제로 사용자에게 그려진 후에 useEffect가 실행되는 방식그래서 useEffect는 보통 데이터를 가져오는 작업이나 이벤트 리스너 추가 등 렌더링 후에 화면에 직접적인 영향을 주지 않는 작업에 주로 사용됩니다.반면에 useLayoutEffect는 렌더링 후 DOM이 업데이트되기 직전의 시점에 동기적으로 실행됩니다. 여기서 동기적이라는 것은 화면에 내용이 그려지기 전에 모든 레이아웃 관련 작업이 완료된다는 의미입니다. 예를 들어, DOM의 크기를 측정하거나 위치를 조정해..

2025. 1. 16. 23:31
2. FrontEnd/React

[ React ] 다국어 처리를 구현할 때, 발생가능성이 있는 이슈들과 해결법

1. 텍스트 번역 관련 이슈(1) 번역 품질문제문제 설명해결방법문맥의 부재단어 단위 또는 문장 단위 번역 시 문맥을 고려하지 않아 부자연스러운 번역이 발생번역 시 전체문맥을 전달하도록 문맥 번역 옵션 지원전문 번역사나 번역 관리시스템 사용전문 용어 관리기술적 용어나 도메인 특화된 용어가 잘못 번역될 가능성용어집과 번역메모리(TM)을 사용해 일관성 유지다의어 처리동일한 단어가 다양한 의미를 가질 때 적절한 번역 선택이 어려움번역 전, 텍스트에 주석을 추가하거나 문맥을 명확히 작성(2) 번역 관리문제문제 설명해결방법번역 누락신규 콘텐츠를 추가했을 때 번역 문자열을 누락하는 문제i18n라이브러리 사용 시, 기본언어와 모든 언어 파일을 비교하는 자동검증도구 사용(i18next-parser, Lokalise)중복..

2025. 1. 16. 22:41
2. FrontEnd/React

[ React ] 다국어 처리 i18next

다국어 처리(i18n)를 통해 다국적 사용자를 지원합니다.핵심적인 기능은 선택된 언어에 따라 텍스트를 동적으로 변경하는 것입니다.이 기능은 i18next 라이브러리를 사용하여 구현되었습니다. 1. i18next 라이브러리 설치 • i18next는 다국어 처리를 간편하게 지원하는 라이브러리입니다. • React 프로젝트에서는 보통 react-i18next를 함께 사용합니다.npm install i18next react-i18next 2. 번역 파일 준비 • 언어별 JSON 파일로 텍스트 리소스를 준비합니다. • 예: /locales/ko/translation.json (한국어), /locales/en/translation.json (영어).// ko/translation.json{ "welcome": "..

2024. 11. 22. 16:28
2. FrontEnd/React

[ React ] 다국어 코드 중복 제거하는 리팩토링 후기

다국어 할 때, 중복되는 코드를 단순화하는 작업을 했다 {termsSelectedLanguage === 'ko' ? ( !termsContent ? ( ) : ( ) ) : termsSelectedLanguage === 'en' ? ( !termsEnglishContent ? ( ) : ( ) ) : termsSelectedLanguage === 'ja' ? ( !termsJapaneseContent ? ( ) : ( ) ) : null};이 코드를 1차적으로 아래와 같이 리팩토링 했다// 언어 타입을 명시적으로 정의type Language = 'ko' | 'en' | 'ja';cons..

2024. 11. 20. 11:25
2. FrontEnd/React

[ React ] useState 초기값 설정 에러

에러문구Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components이 에러는 “Controlled input이 Uncontrolled로 바뀌었다”는 경고이는 컴포넌트가 처음에는 입력 필드에..

2024. 10. 11. 13:59
2. FrontEnd/React

[ MUI ] @toolpad/core의 Account slots menuItems 적용 안되는 문제

문제MUI의 @toolpad/core 레이아웃을 사용하다가, Account에 slots을 커스텀해야해서 하는데, 공식문서대로 적용을 해도 적용이 안되는 문제가 발생했다공식문서 : https://mui.com/toolpad/core/react-account/#slots Account - Toolpad CoreA component that renders an account management dropdown for your application.mui.com  해결챗GPT한테도 계속 물어보고 이상한 답변만 받고, 이와 관련된 구글링을 하는데도 하나도 안떠서 뭐지 뭐지 하다가 아래의 링크를 보고 혹시나 해서 아래처럼 적용시켰는데 적용이 되었다https://stackoverflow.com/questions/79..

2024. 10. 10. 16:19
2. FrontEnd/React

[ React ] 로그인 안될경우, 로그인 페이지로 리다이렉트 (+예외처리)

현재 로그인이 안된 상태에 로그인 페이지로 리다이렉트 하는 기능을 넣었다.이 과정 중 로그인 페이지 안에 있는 회원가입페이지, 아이디/비밀번호 찾기 페이지에도 접속이 안되고 바로 로그인 페이지로 이동하게 되는 불상사가 발생이것을 예외처리하는 방법을 기록으로 남기고자 한다.전코드import React, { useEffect } from 'react';import { Route, Routes, Navigate, useNavigate } from 'react-router-dom';import { ROUTES } from './constants/url'; // 방금 주신 ROUTES 정의를 가져옵니다.import AuthProvider from './contexts/AuthContext';import useAu..

2024. 10. 2. 09:20
2. FrontEnd/React

[ React ] 회원약관 두개이상의 토글이 true일때, 다음 버튼 활성화

구현하고자 하는 기능회원약관에 있는 동의함 토글이 모두 동의함일때만 다음버튼 활성화공통적으로 관리할 수 있는 useState의 경우는 하나로 관리환경 : React Typescript MUI  전 코드import React, { useState } from 'react';import { Container, Radio, Box, RadioGroup, FormControlLabel, FormControl, Button, Typography, FormLabel } from '@mui/material';import { useNavigate } from 'react-router-dom'; // useNavigate 훅 추가// SignUpAgreeTerms 컴포넌트에 사용할 props 타입 정의interface ..

2024. 9. 23. 10:22
2. FrontEnd/React

[ React ] 이메일 유효성 검사 후 에러메세지 띄우는 로직 (onBlur 이벤트)

원하는 기능이메일을 입력하고, 유효성 검사를 하여 틀리면 에러메세지를 띄우는 기능을 넣고 싶다나는 React Typescript MUI 를 사용하는 환경이다.1차 결과물import React, { useState } from 'react';import { TextField, Button } from '@mui/material';export default function EmailForm() { // 이메일 상태와 이메일 검증 결과 상태(emailAlert) const [email, setEmail] = useState(''); const [emailAlert, setEmailAlert] = useState(true); // 이메일 형식 검증 함수 const validateEmail = (emai..

2024. 9. 20. 17:37
2. FrontEnd/React

[React] AuthContext를 사용하여 로그인 관리하기

프로젝트에 로그인 기능을 넣던 도중에, 매번 페이지마다 useEffect로 로그인 관리하기엔 반복되는 코드가 많고 귀찮아서 chat GPT랑 어떻게 하는게 더 효율적인지 이야기하다가 AuthContext를 사용하여 하는 방법으로 리팩토링 하였다 로그인 관련 로직 고민 ⇒ AuthContext를 사용해서 로그인하는걸로 리팩토링useEffect를 사용하는 방법:장점:간단하고 직관적인 방법컴포넌트가 마운트될 때, 혹은 로그인 상태가 변경될 때마다 감지하여 적절한 동작을 수행단점:여러 컴포넌트에서 동일한 로직을 반복해서 사용컴포넌트 간의 의존성이 높아지고, 유지보수가 어려움AuthContext를 사용하는 방법:장점:전역적으로 인증 정보를 관리할 수 있으므로 여러 컴포넌트에서 쉽게 접근코드 중복을 줄이고, 유지보..

2024. 6. 11. 16:49
2. FrontEnd/React

[React] CRA(create-react-app) + TypeScript 세팅 +.eslintrc +.prettierrc

이제 React 프로젝트에 TypeScript를 적용하지 않은 케이스를 만나는 게 어려운 시대가 되었다. 프로젝트 생성할 때마다 매번 공식 문서를 확인하고 검색하는 나 자신을 위해서 기록용으로 소소하게 남겨두려고 한다.우선 해야 할 작업들은 다음과 같다.CRA(create-react-app)에 TypeScript 템플릿을 적용하여 프로젝트를 생성하기eslint, prettier를 적용하여 코드 컨벤션 보장하기typescript가 필요한 라이브러리 세팅tsconfig.json에 src 절대 경로 세팅index.css 초기화 1️⃣ CRA(create-react-app) + TypeScriptTypeScript 로 새로운 Create React App 프로젝트를 생성하려면 원하는 디렉터리에서 아래 명령어를 ..

2024. 6. 10. 17:39
2. FrontEnd/React

[React] JSX(JavaScriptXML)은 JavaScript의 일종일까?

JSX Javascript + XML 의 약자로써 자바스크립트와 XML이 합쳐진 문법 ❓ XML이란? XML(eXtensible Markup Language) 은 HTML과 같은 마크업 언어의 일종이지만, HTML은 데이터를 표현하는 마크업 언어라면, XML은 데이터를 기술하는 언어이다. 예를 들어 HTML에서는 h1, p 같은 이미 만들어진 태그를 사용해야 하지만, XML은 정의된 부분을 제외하고는 사용자가 태그를 임의로 만들 수 있다. 엄밀히 말하자면 XML은 마크업 언어라기 보다 마크업 언어를 정의하기 위한 언어라고 할 수있다. JavaScript는 웹 브라우저에서 동적인 웹 페이지를 만들기 위해 사용되는 프로그래밍 언어이고, 웹 페이지의 동적인 부분을 다루는 데 사용된다 XML은 마크업 언어의 일..

2024. 3. 26. 11:42
2. FrontEnd/React

[React] react-i18next로 다국어 처리 적용하기

회사에서 맡은 프로젝트 중 관리자 페이지 웹사이트에 다국어처리를 적용하게 되었다. 우선, 관리자 페이지여서 SEO는 따로 필요 없었기 때문에 React이고, 이에 따라 react-i18next 적용해서 했던방법을 정리하여 나중에 기억안날때 꺼내볼 목적이다. (참고 : 서버에서 다국어 지원을 제공하는 next-i18next 라이브러리도 있음) 1. 패키지 설치 $ yarn add react-i18next i18next $ npm i react-i18next i18next 2. 폴더 구조 (옵션이지만 이렇게 하는게 이쁨) src > locales폴더 만든 후, en / ko폴더 안 json으로 넣었다. 현재는 관리자페이지만 다국어 처리 적용을하여 json으로 관리해도 될 만큼의 작은규모라 이렇게 하였음 대규..

2023. 11. 20. 13:26
2. FrontEnd/React

[React Query] isLoading vs isFetching

▶️ isFetching 비동기쿼리가 해결되지 않음 Fetching을 완료하지 않았다는 의미 쿼리가 Axios호출이거나 GraphQL호출일 수도 있다 ▶️ isLoading isFetching에 대한 하위집합 데이터를 가져오는 상태이고, 표시할 캐시 데이터도 없다는 의미 쿼리함수가 아직 해결되지 않은 것이고, 캐시된 데이터도 없다 즉, 이 쿼리를 만든 적이 없다는 의미 no cached data, plus isFetching 많은 차이가 없어보이지만, 나중에 페이지 매김(pagination)을 진행할 때 캐시된 데이터가 있을 떄와 없을 때를 구분해야하한다. 👍🏻참고자료 https://www.udemy.com/course/react-query-react/

2022. 10. 3. 15:14
2. FrontEnd/React

[React] React 와 Next 비교

1. Framework vs. Library React.js는 라이브러리이고, Next.js는 React.js의 프레임워크이다. 이 둘의 궁극적인 차이점은 "응용 프로그램의 흐름 주도권을 누가 가지고 있느냐"이다. 1) Framework • 코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경 • 응용 프로그램은 프레임워크에 의해 사용된다. • 키워드: Rule, Logic, Auto 2) Library • 어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임 • 응용 프로그램이 라이브러리를 사용한다. • 키워드: Freedom, Custom 즉, React에서는 우리가 모든 것을 직접 생성하고 설정해 주었던 것들이 Next에서는 이미 만들어져 있..

2022. 9. 11. 16:35