언어 Language/리액트 React3 Next.js 은 뭘까, 왜 사용할까? Next.js 개념 웹을 위한 React 프레임워크입니다. Next.js 사용 이유 React 로 완벽한 웹 어플리케이션을 만들기 위해서는 많은 세부사항을 고려해야 했는데, Next.js 는 이러한 세부사항들을 쉽게 세팅할 수 있게 해줍니다. 코드는 웹팩과 같은 번들러를 사용해 번들되어야 하고, 바벨과 같은 컴파일러를 사용해 변환되어야 합니다. 코드 스플리팅과 같은 운영 상 최적화가 필요합니다. 퍼포먼스와 SEO 를 고려했을 때, 어떤 페이지들은 정적으로 프리 렌더링 될 필요가 있습니다. 또는 서버사이드 렌더링이나 클라이언트 사이드 렌터링을 원할 수도 있습니다. 리액트 앱과 데이터 저장소의 연결을 위해 서버사이드 코드를 작성해야 할 수도 있습니다. Next.js 는 개발자들에게 여러 기능 제공을 통해 최.. 2023. 2. 1. [React] 클래스형 컴포넌트와 함수형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트 (Feat. 클래스형만 파본다...) 컴포넌트는 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있습니다. 컴포넌트의 목적에 따라 프리젠테이션(presentational) 컴포넌트와 컨테이너(container) 컴포넌트로 나누기도 합니다. 리액트를 사용하여 프론트 개발을 할 때 클래스형, 함수형 두 가지 방법으로 컴포넌트를 선언할 수가 있습니다. 과거엔 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하.. 2022. 7. 26. [React] useEffect 와 useLayoutEffect 의 차이는? useEffect 와 useLayoutEffect 의 차이는? 먼저 훅의 실행 흐름과 Render, paint 의 개념을 알아두면 좋다. Render (레이아웃 배치) DOM tree를 만들기위해서 HTML파일을 파싱하는 style 속성을 계산하는과정. paint (그리기) 실제 화면에 그려주기위해 Layout을 표시하고 업데이트하는 과정. useEfffect useEffect 는 컴포넌트 레이아웃 배치(render)와 그리기(paint)를 완료한 후 비동기적(asynchronous)으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우, 사용자 입장에서는 화면의 깜빡임을 보게 됩니다. useLayoutEffect useLayoutEffect.. 2022. 6. 8. 이전 1 다음
