Homile

React 19 React 공식 블로그에 24.02.15에 업데이트 진행사항이 올라왔습니다. 주요 내용은 크게 React Compiler, Actions, New Features in React Canary입니다. React Compiler 공식블로그에 따르면 React를 위한 컴파일러가 개발중이며 오픈 소스 릴리즈를 준비하고 있다고 한다. React의 상태를 관리할 때 의도와는 달리 많은 리랜더링이 발생하는 경우가 있는데 이것을 해결하기 위해서는 useMemo, useCallback등과 같은 메모이제이션 방식을 통해 리랜더링을 줄이는 방법을 사용했는데 이를 자동화으로 최적화할 수 있도록 되어있다고 한다. Actions 아래 코드에서 보이는 것과 같이 form에 action이 추가 되었습니다. actio..

React Native CLI로 시작하기 해당 글은 Mac을 기준으로 작성했습니다. 공식 문서 상에서 iOS를 개발하기 위해서는 Expo Go로 생성을 하거나 macOS가 필요하다고 작성되어 있습니다. Mac OS로 Android 개발 시작하기 개발 툴 설치 (IDE) InteliJ, Visual Studio Code 등과 같이 Code를 작성할 수 있는 IDE를 설치합니다. 저는 VSCode를 기반으로 작성하겠습니다. https://code.visualstudio.com/ Hombrew 설치 Node, Watchman, JDK 등 패키지 설치를 하기위해 Homebrew를 설치합니다. https://brew.sh/ko/ /bin/bash -c "$(curl -fsSL https://raw.githubus..

React native란 무엇인가? React Native는 Facebook에서 개발하고 관리하는 오픈 소스 모바일 애플리케이션 프레임워크입니다. 이 프레임워크는 웹 개발에 사용되는 JavaScript와 React를 기반으로 하고 있으며, iOS와 Android 모두에서 사용할 수 있는 앱을 만들 수 있습니다. React native의 장점/특징 React Native는 한 번의 개발로 iOS와 Android 모두에 대응할 수 있는 앱을 만들 수 있습니다. 이는 개발 시간을 줄이고, 유지 보수를 간편하게 합니다. React Native는 JavaScript를 사용하기 때문에 React를 사용하던 개발자들이라면 진입장벽이 낮습니다. React native vs Flutter React Native Reac..

React Hook Form이란? React에서 form의 유효성검사를 도와주는 라이브러리이다. React Hook Form 장점 공식문서에 따르면 아래와 같은 장점이 있다. 기존의 유효성 검사보다 적은 코드를 사용할 수 있다. 불필요한 재렌더링을 제거하고 검증 계산을 최소화하여 마운팅 속도를 높여 성능을 향상 시킨다. 패키지의 종속성이 없어서 작은 라이브러리로 가볍다. React Hook Form과 yup을 같이 사용한 이유 React Hook Form만으로도 충분히 좋은 퍼포먼스를 낼 수 있지만, yup과 같이 사용한다면 인라인으로 작성되는 코드를 분리하여 사용할 수 있어 가독성이 조금 더 좋기 때문에 같이 사용하게 된다는 것을 알게되어 사용하게 되었다. 아래는 React Hook Form 공식문서에..

Vite란? 공식문서에 따르면 프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다. 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다. Create React App대신 사용하는 이유 CRA는 JavaScript로 구성된 Webpack을 사용하는데 속도가 느린편입니다. 평소에는 못느낄 수 있지만 처리해야 할 코드의 양이 많아질 수록 느린 속도를 채감할 수 있습니다. 위와 같은 단점을 해결하기 위해 Esbuild..

Portals Fragment를 사용하면 깔끔한 코드를 작성할 수 있습니다. React Portals은Fragment와 비슷한 일을 하여 간결한 코드를 작성하는데 사용됩니다. 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법입니다. ReactDOM.createPortal(child, container) 첫 번째 인자 child는 엘리먼트, 문자열, fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식 요소입니다. 두 번째 인자 container는 DOM 엘리먼트입니다. 사용법 일반적인 컴포넌트 렌더링 메서드에서 요소를 반환할 때, 해당요소는 부모 노드에서 가장 가까운 자식으로 연결됩니다. portal의 전형적인 동작 방법은 부모 컴포넌트에 ov..

React.Fragment란? DOM에 별도의 노드를 추가하지 않고 여러 자식 요소를 그룹화할 수 있습니다. JSX 제한 사항 JSX 코드를 작성할 때 Root 요소가 존재하지 않고 나란히 존재하고 있다면 JSX 문법에 위반하는 행위가 됩니다. 아래의 코드와 같이 JSX는 ReactDOM 요소로 작성이 가능합니다. 한개의 Root 요소 안에는 여러개의 요소가 존재할 수 있지만 Root 요소는 여러개가 존재할 수 없다는 것입니다. // JSX 문법에러 return ( 안녕하세요 여러분!! 만나게 되어 반갑습니다! ); // JSX 문법을 ReactDOM으로 변경한 코드 return ( React.createElement('h2' {}, '안녕하세요 여러분!') React.createElement('p' {..

리액트 에러 발생 React server를 실행하고 있을 때, 콘솔에서 에러 코드가 나오지만 웹페이지에서도 콘솔창과 동일한 에러 코드가 나옵니다. 에러코드와 함께 해결할 수 있는 방향을 제시해줍니다. 해당 에러 코드 조각과 해결 방안을 통해 프로그램을 디버깅* 할 수 있습니다. 이렇기 때문에 항상 콘솔에 나오는 에러 코드를 확인해야 합니다. 자주 발생하는 에러 JSX 요소 규칙 JSX로 작성한 요소를 하나의 루트 요소로 감싸주어야 합니다. 이때, 쓸모없는 태그로 감싸줄 시 디자인 요소에 방해가 될 수 있습니다. 이것은 React.fragment()를 사용하여 하나의 루트 요소로 감싸주어 에러를 해결할 수 있습니다. 함수명 오타 State를 관리하는 함수를 자주 사용해야 하는 만큼 함수명이 많아짐에 따라 ..

Create React App 리액트 프로젝트를 시작하는 가장 쉬운방법입니다. 기본적인 리액트 코드 파일이 있는 미리 설정된 폴더들과 상용화할 수 있는 리액트 앱을 구축할 수 있도록 돕는 가장 중요한 환경설정 파일들이 존재합니다. 작성한 프로그램을 미리보기 할 수 있도록 해주고 코드나 기타 다른 것들이 변경될 때마다 브라우저가 자동적으로 페이지를 업데이트 하는 방식으로 이 프로그램을 미리 볼 수 있어 개발 과정을 단순화시켜 줍니다. node.js 브라우저 밖에서 자바스크립트 코드가 실행될 수 있도록 하는 자바스크립트 런타임이 필요하다. 리액트를 위해 필요한 것은 아니지만 create react app을 실행하기 위해 node.js가 필요하기 때문에 node.js를 먼저 설치를 해줘야 한다. 다운로드 | ..

React? JavaScript 라이브러리이며 사용자 인터페이스를 만드는 데 사용됩니다. 화면을 새로고침하여 모든 요소를 렌더링 하지 않고, 요청하는 요소만 렌더링하는 방식인 SPA를 사용한다. 내장된 기능은 많지 않아서 라우팅 같은 기능이 필요하다면 추가적으로 서드 파티 라이브러리를 설치해야 한다. React를 사용하는 이유 일반적인 DOM을 조작하여 HTML들의 요소들을 렌더링 할 때는 JavaScript만 사용해도 가능하지만 사용자에게 뭔가 다른 요소들을 보여주려 할 때 새로운 HTML 페이지를 불러오지 않고 화면만 변경해 사용자에게 보여줄 수 있게 해주는 것이 가능하다. 개발자에게 확장 가능한 대화형 웹 응용 프로그램을 구축하기 위한 검증된 도구를 제공하는 코드를 작성할 수 있다. 최신 반응형 사..