react7 [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 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. [React] React에서 HOC(High Order Components)란? 1. HOC(High Order Components) 란? Higher Order Component (HOC)는 React에서 사용되는 디자인 패턴 중 하나로, 컴포넌트 간의 로직을 재사용하고 추상화하기 위한 방법이다. HOC는 함수로 구현되며, 기존의 컴포넌트를 props로 받아서 감싼 후 새로운 컴포넌트를 리턴한다. HOC를 잘 사용하면 컴포넌트 간에 공통된 로직을 추상화하여 코드의 재사용성을 높이고 모듈성을 향상 시킬 수 있다. 나는 작년에 진행했던 프로젝트에서 HOC를 인증토큰이 필요한 페이지 즉 권한이 없이는 접근할 수 없는 페이지를 감싸는 데에 사용했다. (예: 마이페이지, 구매내역 등) 아래는 예시로 작성한 component 코드이다. import React, { useState } from.. 2024. 2. 1. 이전 1 2 다음
