Frontend88 [React] React에서 다국어 지원 기능 구현하기 회사 웹사이트를 해외에서 접근했을 시 영문으로 보여지게 해야하는 피쳐가 있어서 다국어 지원 기능에 대해 알아보았었다. 1. i18n이란? i18n이란 국제화의 약자로 i와 n사이에 18글자가 있기 때문에 이렇게 표기한다. 쿠버네티스를 k8s로 표현하는 것과 비슷한 표기법이다. SW제품이나 서비스를 여러 언어와 지역화에 대응할 수 있는 프로세스를 말한다. 일반적으로 다음 같은 기능을 포함하는데 문자열 치환, 다국어 지원, 날짜/시간/통화 형식, 텍스트 정렬방식에 대한 대응이 나라나 지역, 언어에 따라 달라질 수 있다. 2. React에서 i18n 라이브러리 사용하는 방법 i18n-next 공식문서 참고 https://react.i18next.com/ npm 또는 yarn으로 i18next, react-i1.. 2024. 2. 13. [React] 함수형 컴포넌트와 클래스형 컴포넌트 방식의 차이 1. 문법과 구조 - 함수형 컴포넌트는 함수 내에서 JSX를 return 하여 컴포넌트의 UI를 정의한다. 예시코드는 아래와 같다. import React, { useState } from 'react'; const CounterComponent = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( 횟수: {count} 증가 ); }; export default CounterComponent; - 클래스형 컴포넌트는 Javascript ES6의 클래스로 정의된다. React.Component 클래스를 확장하여 컴포넌트를 만들며, render() 메서드 내에서 JS.. 2024. 2. 8. [React] React에서 상태관리가 필요한 이유 React로 개발할 때 Redux, Recoil, Zustand, jotai 등 여러가지 상태관리 라이브러리에 대해 들어봤을 것이다. 이런 라이브러리들이 처리해주는 것은 무엇이고 왜 사용하는 것일까? 상태관리를 하는 이유는 뭐고 왜 중요한 것일까? 1. 상태란 무엇일까? React에서 상태란 컴포넌트의 데이터를 나타낸다. 어떤 의미를 갖고 있는 값이고 애플리케이션의 동작에 따라 지속적으로 변경할 수도 있는 값이다. 이런 상태가 변경될 때마다 UI가 업데이트 되거나 컴포넌트가 리렌더링된다. 이렇게 변경이 가능하기 때문에 변경된 상태를 감지하고 React에서는 필요한 UI 업데이트를 수행한다. 2. 상태관리가 필요한 이유 기술의 발전에 따라 웹은 단순 지식과 정보를 보여주던 Document에서 점점 그 기능.. 2024. 2. 7. [React] React Router 사용법 SPA에서 라우팅은 웹 애플리케이션의 다양한 뷰 및 컴포넌트 간의 네비게이션을 관리하는 중요한 부분이다. SPA는 페이지를 새로고침하지 않고도 동적으로 콘텐츠를 업데이트하므로, 라우팅이 사용자 경험을 향상시키고 전체적인 애플리케이션의 성능을 최적화하는 데 도움이 된다. 페이지 전환 시 기존의 서버에서 HTML를 생성해서 내려줄 때처럼 깜빡하는 느낌이 없이 매끄러운 느낌을 주기 때문에 어플리케이션과 같은 느낌을 준다. 1. React에 React Router 적용하기 1) 설치 먼저 아래 명령어로 React Router를 설치한다. npm install react-router-dom 2) 기본 구성 React Router를 사용하려면 앱의 최상위 컴포넌트에서 BrowserRouter를 사용하여 감싸야 한다.. 2024. 2. 6. Virtual DOM이란 무엇일까? 1. Virtual DOM이란 무엇일까? Virtual DOM(가상 DOM)은 React, Vue 등의 같은 라이브러리에서 사용되는 개념으로, 웹애플리케이션의 성능 향상과 효율적인 UI 업데이트를 위한 기술이다. 일반적으로 브라우저는 실제 DOM(Document Object Model)을 사용하여 웹 페이지의 구조를 표현하고 조작하는데, DOM은 HTML 문서의 요소들을 트리 구조로 표현하고, Javascript를 사용하여 동적으로 조작할 수 있다. 그러나 DOM 조작은 비용이 높은 작업 중 하나로, DOM이 직접 변경될 시 사소한 변경사항에도 전체가 리렌더링 되기 때문에 웹 애플리케이션이 복잡해지고 대규모로 확장될수록 성능 문제가 발생할 수 있다. Virtual DOM은 이러한 성능 문제를 해결하기 위.. 2024. 2. 5. [React] React의 이벤트 핸들러 이벤트 핸들링은 사용자의 상호작용에 대응하기 위해 필수적이다. 사용자가 버튼을 클릭해서 API 요청을 하거나, 여러 동적인 동작을 발생시키기 위해 이벤트를 사용하는데, React에서 이벤트는 SyntheticEvent 라는 객체로 감싸져서 제공된다. SyntheticEvent는 브라우저의 네이티브 이벤트를 감싼 React의 크로스 브라우저 호환성을 제공하는 래퍼이다. SyntheticEvent는 브라우저간의 일관성을 유지하면서 React 이벤트 시스템을 추상화한다. 이벤트 핸들러는 이 SyntheticEvent객체를 매개변수로 받아서 사용한다. 이렇게 브라우저 이벤트를 감싼 SyntheticEvent는 이벤트의 표준 속성들을 대부분 사용할 수 있다. 1. 함수형 컴포넌트 JSX 내에서 이벤트 함수 전달 .. 2024. 2. 2. 이전 1 2 3 4 ··· 15 다음
