FrontEnd/React6 [React] React-Hook-Form으로 폼 관리 편하게 하기 React-Hook-Form을 사용한 이유사소하게는 폼을 제출할 때 자동으로 발생되는 새로고침을 막기위해 당연한 듯이 작성하게 되는 event.preventDefault() 같은 보일러 플레이트를 사용하지 않을 수 있는 것 부터 관리해야할 상태코드를 줄일 수 있고 폼 작성을 위한 여러 기능들을 제공하고 비제어 컴포넌트 로 작성할 수 있으며 보다 선언적으로 코드를 작성할 수 있다. 제어 컴포넌트와 비제어 컴포넌트는 무엇일까?제어 컴포넌트는 일반적인 리액트 컴포넌트라고 할 수 있다. 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 하는 컴포넌트이다. state를 기반으로 하기 때문에 사용자가 입력을 할 때마다 리렌더링을 발생시킨다.비제어 컴포넌트는 리액트에 의해 값이 제어되지 않는 컴포넌트이다.. 2024. 7. 27. [React] 리액트의 메모이제이션 메모이제이션 (memoization)이란메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다. (위키 백과) 쉽게 이야기하면, 컴퓨터의 입장에서 비용이 높은 함수의 호출 결과를 저장해 두었다가, 완전히 동일한 입력으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해 두었던 결과를 반환해주는 것이다.리액트의 메모이제이션리액트에서는 부모 컴포넌트가 변경되면 자식 컴포넌트도 무조건 리렌더링된다. React.memo 를 사용해 컴포넌트를 래핑하면 렌더링이 일어나지 않는다. 렌더 단계에서 컴포넌트를 비교를 거쳤지만 .. 2024. 7. 27. [React] React의 Hook들 알아보기 함수형 컴포넌트에서 상태를 사용하거나 생명주기 메서드를 대처하는 등의 다양한 작업을 하기위해 Hook 이란 것이 추가됐다.useState함수형 컴포넌트 내부에서 상태를 정의하고 관리할 수 있게 해주는 훅이다. 클로저를 사용함으로써 외부에 해당 값을 노출시키지 않고 오직 리액트에서만 쓸 수 있고 함수형 컴포넌트가 매번 실행되더라도 useState에서 이전의 값을 정확하게 꺼내 쓸 수 있다.const [count, setCount] = useState(0)return ({count} setCount(count + 1)}>+ setCount((prev) => prev - 1)}>- setCount(0)}>reset); useState의 인수로는 초기화 값을 넘겨주고 반환값으로 배열을 받는다. 반환받은 배열의 .. 2024. 7. 27. [React] NPM에 컴포넌트 배포하기 최근 오픈소스에 관심을 가지면서, 오픈소스는 어떻게 만들어져 있는지에 대한 궁금증이 생겨서 직접 배포해보려고 한다. CRA로 기본적인 프로젝트 설정을 해준다.$ npx create-react-app my-App필요한 의존성을 설치해준다. 기본적으로 react jsx 트랜스파일은 필요하다.$ npm i -D @babel/cli @babel/preset-react이제 리액트 컴포넌트를 가져오자.src/lib 경로에 폴더를 만들어서 넣어준다.src/lib/Component├── Component.hook.js├── Component.jsx├── Component.styles.css└── index.js Component.jsx같은 jsx 파일은 React.createElement로 엘리먼트를 생성하기 때문에 .. 2024. 7. 27. [React] React 18 새로운 Suspense SSR SSR을 사용하면 서버의 React 컴포넌트에서 HTML을 생성하고 해당 HTML을 사용자에게 전송할 수 있다.HTML은 링크나 폼 입력과 같은 간단한 내장 웹 상호작용을 제외하고는 상호작용이 잘 되지 않는다하지만 자바스크립트가 로딩되는 동안 사용자가 페이지의 콘텐츠를 볼 수 있다.SSR을 사용하지 않으면 자바스크립트가 로드되는 동안 사용자에게 표시되는 것은 빈 페이지 뿐이다.React의 SSR의 진행 단계서버에서 전체 앱의 데이터를 가져온다. 서버에서 전체 앱을 HTML로 렌더링하여 응답으로 전송한다. 클라이언트에서 전체 앱에 대한 JavaScript 코드를 로드한다. 클라이언트에서 자바스크립트 로직을 전체 앱에 대해 서버에서 생성된 HTML에 연결한다(이것이 'hydration').중요한 부분은.. 2024. 7. 27. [React] SSR CSR 알아보기 과거 PHP나 JSP를 기반으로 대부분의 웹 애플리케이션은 대부분의 렌더링이 서버 사이드에서 이루어졌다. 페이지를 요청하면 서버에서 완성된 HTML을 내려받고, 페이지 전환시에는 새로운 페이지를 서버에서 내려받는 방식이었다. 여기서 자바스크립트는 어디까지나 사용자에게 추가적인 경험을 주기 위한 보조적인 수단이었다.그러나 웹페이지의 기능이 늘어나면서 점차 자바스크립트가 다양하고 많은 일을 수행하게 되면서 자바스크립트를 모듈화 하는 방안이 점차 논의되기 시작했고 그에 따라 등장한 것이 CommonJS와 AMD(Asynchronous Module Definition)이다. 이러한 자바스크립트 모듈화의 결실, 그리고 사용자의 기기 성능 향상과 인터넷 속도 발전 등으로 자바스크립트에서 할 수 있는 일이 점차 다양.. 2024. 7. 27. 이전 1 다음
