[React] Hydration과 Dehydration

Hydration과 Dehydration은 React와 같은 프론트엔드 프레임워크에서 중요한 개념으로, 서버 사이드 렌더링(SSR) 및 클라이언트 사이드 렌더링(CSR)에서 자주 사용됩니다. 이 두 개념을 이해하면 React 애플리케이션의 초기 로딩 성능과 사용자 경험을 개선하는 데 도움이 됩니다. Hydration (수화)Hydration은 서버에서 렌더링된 HTML을 클라이언트(브라우저)에서 React가 다시 활성화하는 과정입니다. 서버 사이드 렌더링(SSR)을 사용하면 초기 HTML이 서버에서 생성되어 클라이언트로 전송되는데, 이 HTML은 React 컴포넌트가 아닌 단순한 HTML입니다. 클라이언트가 이 HTML을 받으면, React는 이 HTML을 '재사용'하고, 이를 기반으로 초기 렌더링을 수..

• format_list_bulleted Frontend/React
• · 2024. 6. 22.
• textsms

React) Hook, useState, useEffect

Hook`Hook`은 `React 16.8` 부터 생긴 기능으로, 기본 `React Class` 컴포넌트에서 제공하던 상태관리 기능 및 생명주기 함수를 함수형 컴포넌트에서 사용할 수 있게 해주는 기능입니다.  `Class Component` 에서 상태관리 기능은 `this.state` 와 `this.setState` 두 가지로 관리할 수 있었습니다. 하지만 함수형 컴포넌트에서는 사용이 불가한 상황으로 `useState`, `useEffect` 두 가지로 클래스 컴포넌트와 같은 함수들을 사용할 수 있도록 한 것이 `Hook` 입니다. 클래스 생명주기 함수들에서 변경이 일어나면 어떠한 작업이 일어나는데 이러한 작업들을 `side effect`라고 지칭하고 있습니다. 이러한 `side effect`에 대한 부..

• format_list_bulleted Frontend/React
• · 2024. 5. 6.
• textsms

React) state, props

state`state`는 `JSX`에서 제공하는 컴포넌트 내에서 상태를 관리하기 위해 사용되는 기능입니다. `Hook` 기능이 개발이 되기 전까지는 클래스 컴포넌트 내에서 모든 `state` 생명주기를 관리 해왔습니다. 그렇기 때문에 오래된 문서를 보게 되면 제어 컴포넌트를 생성하게 되면 클래스 컴포넌트를 활용해 개발하는 것을 볼 수 있습니다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( Hello, world! It is {this.state.date.toLocal..

• format_list_bulleted Frontend/React
• · 2024. 5. 6.
• textsms

React) Element, Component 와 Props

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. Element`Element` 는 React앱의 가장 작은 단위를 의미합니다. 브라우저 `DOM` 엘리먼트와 달리 `React` 엘리먼트는 일반 객체(plain object)를 의미합니다. `React DOM`은 `React` 엘리먼트와 일치하도록 `DOM`을 업데이트합니다.주의더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있습니다. 혼동 되지 않도록 주의합시다  `React` 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다. 엘리먼트는 특정 시점의 `UI`를 보여줍니다. 다음은 `DOM root`에서 생성되는 엘리먼트가 어떻게 렌더링 될 수..

• format_list_bulleted Frontend/React
• · 2024. 5. 5.
• textsms

React) JSX

JSX란?`React` 문서에 따르면 아래와 같습니다React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 쉽게 말하면 `JavaScript`에서 `HTML` 태그를 작성 가능하게 하여 하나의 `JS` 파일에서 모든 내용을 작성 가능하게 한 기술을 말합니다.  JSX의 특징위의 설명과 같이 `JS`문법과 태그를 같이 사용이 가능합니다 `JSX`도 `JavaScript`에서 인식하는 객체이므로 함수를 호출 할 수 있습니다. function formatName(user) { return user.firstName + ' ' + user.lastName;}const user = { firstNa..

• format_list_bulleted Frontend/React
• · 2024. 5. 5.
• textsms