이번 2022.10.26 진행한 Next.js Conf에서 Next.js 13을 공개했습니다. 공식문서와 Conf 내용을 바탕으로 Next.js 13에서 변경된 점을 정리해보겠습니다. app 디렉토리 기존 Next.js 12 버전은 /pages 디렉토리에 폴더에서 개발을 했습니다. pages │ ├── _app.js ├── index.js ├── ...Next.js 13 버전부터는 /app 디렉토리에서 개발을 합니다. pages │ ├── layout.js ├── page.js ├── ...app 디렉토리를 사용하기 위해서는 next.config.js 파일에 아래와같이 설정을 추가해주셔야합니다. const nextConfig = { ... experimental: { appDir: true } ... }..

2022년 3월 29일자로 React 18 버전이 출시되면서 17버전에서 사용되던 ReactDOM.render등 몇가지가 지원이 중단되었습니다. ReactDOM.render ReactDOM.hydrate ReactDOM.unmountComponentAtNode ReactDOM.renderSubtreeIntoContainer 그래서 기존 React 17에서 사용되던 ReactDOM.render 대신 18 버전에 맞게 변경해주면 해당 Warning이 해결됩니다. // React 17 import React from "react"; import ReactDOM from "react-dom"; import reportWebVitals from "./reportWebVitals"; import App from "..

React Hooks React v16.8부터 함수형 컴포넌트에서도 컴포넌트 상태, 생명주기를 관리할 수 있는 Hooks API를 지원합니다. React v16.8이전의 클래스형 컴포넌트와 함수형 컴포넌트 클래스형 컴포넌트 State를 가지고 있어 상태 변화에 대한 관리 가능가 가능하다. 리액트 라이프 사이클 API를 사용한다. 함수형 컴포넌트 State, LifeCycle 관련 기능 사용이 불가능하다. 메모리 자원을 함수형 컴포넌트보다 덜 사용한다. 컴포넌트 선언이 편하다. 하지만 React Hook이 나옴으로서 클래스 컴포넌트에서 사용 가능했던 State, LifeCycle API를 사용할 수 있게 되었습니다. Hooks API가 나온 배경 기존의 클래스형 컴포넌트에는 단점들이 존재합니다. State..

React LifeCycle 리액트는 UI가 변경되면 자동으로 컴포넌트가 업데이트되며 동적으로 화면을 변경해줍니다. 리액트의 컴포넌트는 컴포넌트가 생성, 업데이트, 제거될 때 까지의 생명주기를 가집니다. React의 LifeCycle을 정리해보겠습니다. Source : https://github.com/wojtekmaj/react-lifecycle-methods-diagram Mounting (생성) 최초에 컴포넌트가 생성될 때 한 번 수행됩니다. 컴포넌트가 브라우저에 나타나기전과 나타난 후에 호출되는 API입니다. constructor constructor(props) { super(props); } 컴포넌트가 생성될 때 한번만 실행되며, 가장 먼저 실행되는 메서드입니다. 생성자 메서드입니다. 초기 s..