React

React와 JSX

서론JSX는 React와 밀접하게 사용되지만, 사실 JSX와 React는 서로 다른 개념이다. JSX는 문법 확장(syntax extension)이고, React는 JavaScript 라이브러리다. 많은 개발자들이 두 개념을 혼동하지만, JSX는 React와 독립적으로 사용할 수 있다. 이 글에서는 JSX의 정의, 왜 JSX를 사용하는지, 그리고 새로운 JSX 변환 방식이 등장한 이유에 대해 알아보겠다.JSX의 규칙 JSX는 HTML과 비슷해 보이지만, 좀 더 엄격하다. 또한 동적인 정보를 표시할 수 있는 기능이 있다. 이 점이 JSX를 단순한 HTML 대체물이 아니라 특별한 문법 확장으로 만들어준다. 반면 React는 상태 관리, 컴포넌트 기반 구조 등 다양한 기능을 제공하는 라이브러리다. 1. 하나의..

React에서 조건부 렌더링

서론 React에서 조건부 렌더링은 상황에 따라 특정 UI 요소를 표시하거나 숨기는 데 중요한 역할을 한다. 사용자가 인터페이스와 상호작용하거나 애플리케이션 상태가 변경될 때, 특정 요소를 렌더링할지 여부를 결정해야 할 때가 많다. 이 글에서는 조건부 렌더링의 여러 방법에 대해 살펴본다.null을 반환하여 아무것도 렌더링하지 않기 UI를 구성하다 특정 조건이 충족될 때 아무것도 렌더링하지 않기를 원할 수 있다. 예를 들어, 사용자가 선택하지 않은 항목은 목록에서 아예 보이지 않도록 하고 싶을 때가 있다. React 컴포넌트는 항상 무언가를 반환해야 하므로, 이 경우 null을 반환하면 된다.function Item({ name, isPacked }) { if (isPacked) { return n..

React 컴포넌트 이해하기: UI의 기본 단위

서론컴포넌트는 React로 UI를 구축하는 핵심 개념이다. 컴포넌트는 UI를 구성하는 블록으로, React 애플리케이션의 모든 요소는 컴포넌트로 나뉜다. 이번 글에서는 React 컴포넌트의 개념과 특징, 그리고 이를 효과적으로 사용하는 방법에 대해 살펴본다.컴포넌트란? 컴포넌트는 HTML, CSS, JavaScript 코드를 결합하여 재사용 가능한 UI 요소를 만드는 방법이다. 버튼의 rendering 로직과 markup을 한 컴포넌트 내에서 함께 관리함으로써, 이 둘이 항상 동기화 상태를 유지할 수 있게 한다. React에서는 JavaScript가 HTML을 관리하기에 rendering 로직과 markup이 같은 위치, 즉 컴포넌트 내에 존재한다. React 컴포넌트는 기본적으로 JavaScript 함..

React로 UI 구성: 단계별 접근 가이드

React로 사용자 인터페이스(UI)를 구축할 때는 먼저 UI를 구성 요소로 나누는 것부터 시작한다. 그런 다음 각 컴포넌트의 다양한 시각적 상태를 설명하고, 마지막으로 데이터를 통해 컴포넌트를 연결하게 된다. 이 글에선 React로 UI를 구축하는 단계별 접근 방법을 살펴보겠다.1단계: UI를 컴포넌트 계층으로 분해하기 UI를 React로 구축할 때 가장 먼저 해야 할 일은 UI를 컴포넌트 계층으로 분해하는 것이다. 이 과정에서 중요한 원칙은 단일 책임 원칙(Single Responsibility Principle)이다. 즉, 컴포넌트는 하나의 역할만 수행하도록 설계하는 것이 이상적이다. 만약 컴포넌트가 너무 커진다면, 이를 더 작은 컴포넌트들로 분해하는 것이 좋다. UI와 데이터 모델(json 형태를..

React lifecycle 이해하기

Introduce framework에서의 lifecycle은 component가 DOM에 추가되어 브라우저에 의해 렌더링되는 시점(마운트)부터 DOM에서 제거되는 시점(언마운트)까지 여러 단계를 포함한다. 각 프레임워크마다 다른 lifecycle을 가지며 컴포넌트가 마운트될 때, 렌더링될 때, 언마운트될 때, 그리고 이들 사이의 여러 단계에서 특정 작업을 수행할 수 있다. 이 글에서는 React의 핵심 개념인 Virtual DOM, React Fiber, Reconciliation, Scheduling, Commit Phase, Render Phase 등에 대해 다룰 것이다. 이러한 개념을 이해하여 React 애플리케이션의 성능과 사용자 경험을 최적화하는 데 도움을 받을 수 있길 바란다.Prelimina..

SPA와 MPA의 차이, 작동 원리에 대해서 (feat CSR, SSR)

서론 모던 웹사이트들은 대부분 라이브러리와 프레임워크를 이용해서 만들어진다. 이는 유저들과 웹사이트와의 상호작용이 늘어남에 따라 UI를 더 쉽게 구성하고 사용자에게 더 나은 경험을 제공하기 위한 웹 애플리케이션을 개발하는 필요성이 증가하고 있기 때문이다. 현재 사용되는 라이브러리와 프레임워크들은 각기 다른 아키텍처와 렌더링 방식을 사용하고 있다. 이러한 방식들의 차이와 장단점을 이해함으로써 적절한 라이브러리와 프레임워크를 선택하는 데 도움을 받을 수 있다. 많은 사람들이 SPA(Single Page Application)와 CSR(Client-Side Rendering)을 동일시하고, SSR(Server-Side Rendering)과 MPA(Multi-Page Application)를 동일시하는 경향이 ..

React와 JWT로 자동 로그인 구현하기

Introduction  개인 프로젝트로 X(구 트위터) 클론코딩을 진행 중 로그인을 구현하기 위해 찾아본 내용들을 정리해보고자 한다. 로그인을 구현하기 위해서는 쿠키, 세션, 헤더, JWT에 대한 선수 지식이 있으면 좋다. 일반적으로 로그인은 세션 혹은 JWT를 이용하여 구현하는데 나는 JWT와 aws lambda를 이용하여 자동 로그인을 구현하였다. 이 글에서 간략한 배경 지식과 JWT와 세션의 차이에 대해 설명해 보고자 한다.Preliminaries쿠키 쿠키는 사용자 정보를 저장하는 데 사용되는 작은 데이터 조각이다. 쿠키는 서버에서 브라우저에 정보를 저장하기 위해 쓴다. 쿠키는 토큰이나 세션과 대비되는 개념이 아니며 매번 반복되는 요청을 줄이기 위해 브라우저에 정보를 저장하여 서버에 통신할 때 쿠..

동적 라우팅을 이용한 게시글 별로 달라지는 URL 구현

서론 게시판이나 프로필 페이지 등을 개발하다보면 URL이 엄청 많이 필요한 경우가 있다. 물론 일일이 route를 이용해서 작성할 수도 있겠지만 페이지 수가 사용자들의 활동에 따라 더 늘어날 수도 있기에 근본적인 문제 해결 방법은 아니다. 이럴땐 URL의 특정 부분에 변수를 사용하여 컴포넌트를 동적으로 렌더링하는 동적 라우팅을 이용하면 쉽게 해결할 수 있다. 동적 라우팅 사용법 먼저 우리의 희망 react-router-dom을 설치하자. 이 글은 v6를 기준으로 작성하였다.npm install react-router-dom 그 다음으로 동적 라우팅을 사용할 페이지에 변수를 전달하는 과정이 필요하다. import React, {useEffect, useState} from "react";import { L..