React 19 Beta – ReactThe library for web and native user interfacesreact.dev 일부 해석 발췌 React 19의 새로운 기능Action리액트 앱의 일반적인 사용 사례는 데이터 변화를 수행한 다음 응답으로 상태를 업데이트하는 것입니다. 예를 들어, 사용자가 이름을 변경하기 위해 양식을 제출하면 API 요청을 한 다음 응답을 처리합니다. 과거에는 보류 상태, 오류, 낙관적 업데이트 및 순차적 요청을 수동으로 처리해야 했습니다. 예를 들어 usestate에서 보류 및 오류 상태를 처리할 수 있습니다.// Before Actionsfunction UpdateName({}) { const [name, setName] = useState(""); con..

React 프로젝트를 개발하다보면, 배포 환경?에 따라 다르게 환경 변수를 셋팅해야하는 case가 발생한다. 예를 들면, 보통 API 주소를 환경 변수로 많이 셋팅해두고는 하는데.. 운영 API 주소와 개발 API 주소를 배포 환경에 따라 다르게 셋팅해두고 싶은 case가 딱 이에 해당한다. React :: 환경변수(.env) 셋팅하기 토큰이나 API 키 같은 것은 하드코딩으로 집어 넣으면 배포 시 개발자 도구에 모두 드러나기 때문에 최대한 숨겨서 코딩을 진행해야 한다. 이때 사용할 수 있는 방법 중 하나가 "환경변수" 이다. bornatnoon.tistory.com 우선 기초 셋팅 방법을 첨부해본다. (.env 파일을 하나만 쓰는 케이스) 케이스에 따른 .env 설정 방법 ※ 참고. 리액트 프로젝트 생..

참고 글 원문 Making Sense of React Server Components This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the server. This is a significant paradigm shift, and it's caused a whole lot of confusion in the React communit www.joshwcomeau.com (이번 글의 경우 해당 글에 덧붙혀 설명이 부족하다고 느껴지는 것들은 다수 서칭하여 작성하여.. 참고 글이라고 하기에도 머쓱하다.)..

회사의 경우 여러 해외 법인이 존재하고 있어, 다국어 지원이 필요하다. 웹페이지의 경우 chrome 등 인터넷 브라우저 내 번역으로도 지원이 가능하지만, 회사에서는 사전적으로 번역하기 보다는, 각 나라에서 이해하기 쉬운 단어로 번역하는 케이스가 필요하게 된다. ​ 이때 사용되는 것이 i18next. i18next란? Javascript로 작성된 국제화 프레임워크로 여러 국가의 언어를 처리할 수 있도록 도와준다. 많이 사용하는 라이브러리로는 react-i18next, next-i18next, next-translation 이렇게 3가지. 각 라이브러리에 장단점과 특성이 존재하므로 알아보고 채택하는 것을 추천한다. ​ 우리의 경우 react-i18next 를 채택하게 되었는데.. 정확히는 채택 당했다. 고로..

현재 프로젝트의 경우 권한 관리를 recoil 로 다루고 있다. ​ Rocoil 이란? 페이스북에서 발표한 React 전역 상태 관리 라이브러리이다. usestate 만을 사용하여 상태 관리를 하게 되면 프로그램이 복잡하게 될 시, props drilling이 일어나게 되는데, Recoil은 이러한 행위를 방지하게 해준다. ​ Recoil의 경우. React 에서 사용하는 라이브러리가 아닌, 외부 라이브러리로 아래의 링크에서 내용을 확인하면 된다. Recoil A state management library for React. recoiljs.org Recoil 라이브러리에 주요한 개념으로는 Atom 과 selector가 있다. ​ Recoil 에서 하나의 전역 상태를 Atom 이라고 하는데, Atom ..

컴포넌트의 속성 값을 불러올 수도 있고, value나 style 값 같은 것들을 바꿔줄 수도 있는. DOM을 조작할 수 있게 해주는 ref. 렌더링에 필요하지 않은 값을 참조할 수 있는 ref. 에 대하여 설명하도록 하겠다. ​ ref 는 비교적 간단한 개념이므로 forwardRef 와 useImperativeHandle 를 설명하기 위한 도약 단계처럼 가볍게 짚고 넘어가도록 하겠음. ​ 덧붙히는 말.. 모 부장의 "Ref 는 React 생명주기와 어울리지 않는 문법으로 React 상에서도 지양해야 한다"는 발언에 대하여 설명하도록 하겠다. Ref 를 무분별하게 선언하고, 다른 문법으로 대체가 가능한데도 불구하고 무지성으로 사용하는 것이 문제. (이것은 다른 문법도 동일하다. 각자가 가지는 고유의 특성을..

UseEffect 란. 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook임. ​ 기존에는 클래스형 컴포넌트에서만 생명주기 메소드를 사용할 수 있었는데. useEffect를 쓰면 함수 컴포넌트에서도 side effect 를 쓸 수 있게 되었다. 라이프사이클 hook(componentDidMount, componentDidUpdate, componentWillUnMount)을 대체할 수 있는 useEffect. 사용 방법 import { useEffect } from 'react'; function useeffecttest() { // 사용법 1. 종속성 매개변수 없음. useEffect(() => { DoSomething(); }); // 사용법 2. 빈 종속성 매개변수 ..

리액트 16.8 버전 이전에서는 함수형 컴포넌트에서 상태 관리를 할 수가 없었음. (컨버팅 하는 사람도 보았다..) 하지만 16.8 버전 부터 Hooks 라는 기능이 도입되며 함수형 컴포넌트에서 상태를 관리할 수 있게 되었다.! ​ ※ Hook : 함수 컴포넌트에서 React state (리액트에서 아주 중요한 개념 중 하나) 와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수. ※ 상태관리(State Management) : 데이터를 관리하는 방법. 여러 component 간에 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것을 의미. ​ 리액트로 개발을 하다보면 usestate 를 적절한 위치에서 선언하고, 잘 내려주고(상속) 꼬이지 않도록 관리하는 것이 고오급 스킬..

목차 동적인 값을 할당하기 위한 변수, "useState" 초기 렌더링 및 변수 변환에 따른 기능 call을 위한 "useEffect" 컴포넌트의 속성 값을 get/set 할 수 있는 "useRef" useRef + 상속 개념, "ForwardRef()", "useImperativeHandle()" 함수 재사용을 위한 "UseCallback" 쉬운 전역 상태관리를 위한 "Recoil" 커스텀한 다국어 처리를 위한 "i18next" 번외. Axios와 Fetch의 차이 번외. Lazy Import 란?

React 란? Facebook 에서 주도하여 개발하여 UI를 효과적으로 구축하기 위해 사용하는 JS 기반 라이브러리. React 자체로는 Framework 라고 부를 수 있는 기준인 Routing, 상태관리 기본 제공을 충족하지 못해서 '라이브러리'이지만, React 생태계로서는 Framework. React 등장 배경 기존: 특정 DOM 을 선택한 뒤, 해당 DOM에 어떤 이벤트가 발생하면 이에 대한 change 가 일어나도록 설정하는 방식. - 유저와의 상호작용이 자주 일어나는 경우 이에 따른 변화를 동적으로 UI에 표현해야 한다면 그만큼 애플리케이션이 복잡해지고 관리가 힘들어짐. React 특징 1. 가상 DOM 기존의 경우 하나의 데이터가 바뀌어도 화면 전체가 리렌더링 되어서 전체 화면이 다시 ..

전제 조건 react 가 잘 설치되었으며 chocolatey 같은 부가 프로그램들을 모두 다 설치해두었다는 전제 하에 시작. React 개발환경 구축 대충 얼레벌레 깔아서 리액트 구축해오던 나.. 리액트 환경을 처음부터 구축할 기회가 생겼다. 이거 포스팅에 놓칠 수 없다는 생각이 들어 오늘의 글 건덕지를 하나 잡게 되었다. 1. node.js 설치 no bornatnoon.tistory.com 기본 셋팅에 대해 궁금하다면, 첨부 글을 확인해보도록 하자. 0. 시작 내가 react 프로젝트를 구현할 폴더를 하나 구현해주고, 나는 대상 폴더를 D:\Code 로 선정할 것이다. Code 폴더 우클릭 > 터미널에서 열기(T) 선택 여기서부터 시작. 1. create-react-app 설치 리액트 기본틀 만들기에..

리액트로 웹앱을 개발하기 시작하게 되면, Redux dev tool을 설치하게 된다. 게시글에 들어가기 앞서 Redux에 대한 개념부터 짚고 가도록 하겠다. ✨ Redux(리덕스란)? JavaScript(자바스크립트) 상태관리 라이브러리이며, 본질은 Node.js 모듈이다. ✨ Redux의 3가지 원칙 1. Single Source of Truth - 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미. 2. State is read-only - 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능. - 같은 맥락으로, 리덕스에서도 액션(action) 이라는 객체를 사용해서만 상태 변경이 가능. 3. Changes are made with pu..