공부 기록

Next.js에서 Data Fetch 하는 방법에 대해 알아보겠습니다.  1. Data Fetch원래 Front랑 DB 사이를 연결하려면 API가 필수적으로 필요하며 API가 사이에서 데이터를 주고 받을 수 있게 도와줬는데 Next.js를 사용하면 API가 더이상 필요없다. client component에서 Data fetching 방법Hooks 사용기본 React만 쓸 때처럼 useEffect를 쓰면서 해야된다.fetch할 때마다 API에 요청한다.server component로부터 Data fetching 방법Hooks 미사용프레임워크가 다 해주기 때문에 useEffect를 쓰지 않아도 된다.첫 번째 fetch만 API에 요청한다.첫 번째 fetch할 때는 fetch되는 동안 페이지가 로딩되는데 이때..

Next.js는 Hydration의 유무에 따라 client component와 server component로 나눠진다.그럼 Hydration이란 무엇일까? 1. Hydration정의사용자가 최초 html을 본 뒤에 어떤 일이 발생하는 지에 대한 과정을 말한다.달리 말해, 단순 html을 React Application으로 초기화하는 작업을 말한다.과정사용자가 페이지에 도착한 순간에는 아직 Javascript도 프레임워크도 로드되지 않은 더미 html을 보여준다. 이때 event listener 등은 작동하지 않는다.그 후 아주 빠르게 react application이 초기화된다.완료되면 react component가 되고 요소들이 interactive하게 된다.Hydration 과정을 거치면 even..

1. CSS CSS는 HTML 문서의 레이아웃과 스타일을 지정하는 데 사용되는 스타일 시트 언어입니다. 웹 페이지의 시각적 요소인 색상, 글꼴, 여백 등을 설정할 수 있으며 브라우저가 이해할 수 있는 기본 스타일링 언어로 전 세계적으로 널리 사용되고 있습니다. 장점단점모든 브라우저에서 지원되며 웹 표준을 준수하므로 거의 모든 웹 사이트에서 사용 가능기본적인 스타일링을 적용하는 데 아주 간단하다. HTML 파일에 링크하여 사용하는 방식으로 별도의 설정이 필요하지 않으며 웹 개발을 시작하는 초보자도 쉽게 접근 가능캐스케이딩(Cascading)으로 스타일 규칙이 여러 곳에서 적용될 때 우선순위를 자동으로 계산하여 최종 스타일 결정변수, 조건문, 반복문과 같은 기능이 없기 때문에 스타일을 반복해서 작성해야 하..

React Component의 라이프사이클(Lifecycle)이란?컴포넌트가 생성 - 업데이트 - 제거되는 과정을 의미한다. React에서는 컴포넌트가 이 과정을 통해 초기화되고 데이터가 변경될 때 다시 렌더링되며 필요할 때 제거된다. 라이프사이클은 각각의 단계에서 특정 메서드를 호출하여 필요한 작업을 수행할 수 있게 한다.주로 클래스형 컴포넌트에서 사용했으나 React 16.8 이후로 함수형 컴포넌트에서 Hooks를 통해 라이프사이클을 처리할 수 있게 되었다.React 라이프사이클은 컴포넌트가 언제 생성되고 업데이트되고 제거되는 지를 이해하는 데 매우 중요하다. React Lifecycle 단계React 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있다.마운트 (Mount) : 컴포넌트가 처음 D..

React에서 컴포넌트는 사용자 인터페이스를 구축하는 기본 블록을 말한다.컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있다. 1. 함수형 컴포넌트 (Functional Component)자바스크립트 함수로 정의된 컴포넌트를 말한다.특징상태(state)와 생명주기 메서드가 없었으나 React 16.8에서 도입된 Hooks를 사용하여 함수형 컴포넌트에서도 상태 관리와 생명주기 관련 기능을 사용할 수 있다.코드가 더 간결하고 이해하기 쉽다.사이드 이펙트 없이 순수 함수처럼 사용될 수 있다.this 키워드를 사용하지 않는다.컴포넌트 로직을 분리하기 쉽고 테스트가 용이하다.메모리 사용이 더 효율적이다.예시import React from 'react';const MyComponent = (prop..

Rendering Rendering이란 Javascript 코드를 브라우저가 이해할 수 있는 HTML로 바꾸는 것을 말한다. Client Side Rendering (CSR) Client Side Rendering 방식은 브라우저가 rendering 작업을 하는 방식인데 이는 사용자 브라우저인 client단에서 모든 rendering 작업을 수행하고 client가 사용자 브라우저에 UI를 구축한다는 말이다. 모든 rendering, 즉 모든 UI 구축 작업이 client 측에서 일어나며 client는 JavaScript를 로드하고 그 후에 JavaScript가 UI를 빌드한다. CSR 방식을 사용하는 대표적인 라이브러리는 React가 있다. 이 방식의 단점은 크게 두 가지가 있다. 1. 페이지 로딩 시간..

Next.jsReact와 달리 프레임워크로써 사용자가 NextJS을 따라야 한다.Next.js의 첫 페이지는 무조건 app/page 파일이다. client / server component로 이루어져 있다. Next.js 에는 중요한 파일명이 몇 개 있다. page : 페이지에서 제일 처음 보여질 파일 not-found : 존재하지 않는 url을 검색했을 때 보여줄 파일   Route /app/layout, /app/page 같은 경우 경로가 root("/")에서 보게 될 페이지이기 때문에 root segment라고 한다.  /app 폴더 내에 폴더명이 route 경로이며 무조건 파일 이름은 page!page 파일이 없으면 그 폴더는 그냥 컴포넌트들을 갖고 있는 일반적인 폴더가 되며 url이 될 수 없다..

React.memo 어떠한 컴포넌트를 React.memo 처리를 해주면 그 컴포넌트가 렌더링될 때마다 Prop Check를 통해 props의 변화가 있는 경우에만 렌더링을 하도록 해준다. props의 변화가 없을 경우에는 이전에 이미 렌더링된 내용을 재사용하여 불필요한 컴포넌트 렌더링을 줄여준다. const Student = ({ name, age, address }) => { return ( {name} {age} {address} ); }; 다음과 같은 컴포넌트일 경우 name, age, address 중 변화가 있다면 렌더링하고 세 개의 props 전부 변화가 없다면 해당 컴포넌트를 렌더링하지 않고 재사용한다. React.memo에서 memo는 memoization을 뜻하기 때문에 [React] M..

useContext React는 대개 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 data를 전달하는 구조이다. App의 규모가 작으면 props로 충분하지만 규모가 커지면 필요없는 상위 컴포넌트들이 하위 컴포넌트들에게 props를 전달해주기 위해 props를 가지고 있어야 되고 props의 이름을 수정하게 된다면 일일이 다 수정해줘야 하므로 유지보수하기 힘들고 복잡해진다. 또한 테마나 언어와 같은 전역적인 data 같은 경우 모든 컴포넌트가 이 data를 갖고 있어야 하므로 단계별로 전달해야하는 props로만 data를 관리하는 건 어렵다. 이를 해결하기 위해 Context API를 사용하는데 Context는 App 안에서 전역적으로 사용되는 data들을 여러 컴포넌트들이 쉽게 공유할 수 있는 ..

useReducer React Hooks의 하나로서 useState와 같이 state를 생성하고 관리할 수 있는 hook이다. 여러 개의 하위 값을 포함하는 복잡한 state를 관리할 때 useState 대신에 useReducer를 쓰면 관리 및 유지보수 하기 좋다. useReducer는 Reducer, Dispatch, Action 이 세 가지로 이루어져 있다. Reducer는 Dispatch가 보낸 Action의 내용대로 state를 직접 수정하는 주체이고, Dispatch는 Reducer에게 state를 수정할 방식(Action)을 보내는 주체이고, Action은 Dispatch가 보낸 state를 수정할 방식을 담고 있는 메시지이다. 사용법 1. useReducer const [value, dis..