메로그

Nextjs 란, React 를 이용하여 웹 어플리케이션을 만드는 프레임워크로써 React 에서 하기 어려웠던 SEO, SSR, SSG 등 을 제공합니다. Nextjs 는 버전 13과 이전 버전으로 나뉠 정도로 13부터는 구조적인 변화도 몇가지가 있었습니다. - app 폴더 - 폴더 기반 페이징 처리 - 서버 컴포넌트 - 이미지 최적화 아래는 공식 홈페이지 제공하는 install 입니다. https://nextjs.org/docs/getting-started/installationnpx create-next-app@latest my-app-test-1234설치하게 되면 my-app-test-1234 라는 폴더가 만들어질 것 입니다.그렇게 해서 만들어지면 app 폴더 아래에 Next 폴더 구조를 가지고 있..

redux 를 보다 쉽고 간단하게 사용할 수 있도록 해주는 라이브러리입니다. 아래는 설치방법입니다. # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 예제 아래 간단한 예제와 설명을 통해서 사용 방법을 익혀보시면 됩니다. index.ts 에서 Provider 와 store 를 가져와서 등록해줍니다. // index.tx import React from 'react'; import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; import { store } from './app/store'; import App from './App'; im..

useState 에서 setState 는 비동기 동작 방식을 가지고 있다. 비동기로 동작하는 이유 하나의 페이지나 컴포넌트 내에서 수많은 상태값이 존재한다. 이를 하나 하나 바뀔 때마다 화면을 리렌더링한다면 성능 저하가 발생할 것이다. 그렇기 때문에 리액트는 성능 향상을 위해 한 번에 렌더링을 하는 방법을 채택하였다. 또한, setState를 연속 호출해도 배치(batch) 처리하여 한 번에 렌더링하도록 하여 아무리 많은 setState 가 연속적으로 사용되었어도 batch 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지한다. 하지만, 가끔 우리는 동기적으로 렌더링 시점을 잡아 무언가를 하고 싶은 경우가 있다. 아래 그에 대한 방법을 제시한다. 1. useEffect 를 사용해서 mount 시점을 잡..

리액트를 공부하면서.. 리액트에 대한 개념이 부족하다 생각하여 글을 작성합니다.. (공부의 목적..) React 자바스크립트 라이브러리로, 컴포넌트 기반으로 동적으로 데이터를 내려주면 설계한 대로 UI를 만들어준다. (SPA 또는 모바일 개발시 토대로 사용하고.. 페이스북에서 제공하고...) 특징 컴포넌트 기반 구조 리액트는 UI를 여러 컴포넌트 단위로 쪼개 사용할 수 있습니다. 컴포넌트 단위로 쪼개져 있어, 코드의 가독성이 올라가고, 중복된 코드가 사라져 재사용성이 올라갑니다. (예를 들어, 어떤 다이얼로그를 만드는 컴포넌트가 있다면, 여기에 각 필요한 요소만 집어넣어 사용할 수 있겠...) Data Flow 리액트는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. 대충 부모에서 ..