Wonderwall
-
React와 JSX, JSX의 특징들에 관하여
서론JSX는 React와 밀접하게 사용되지만, 사실 JSX와 React는 서로 다른 개념이다. JSX는 문법 확장(syntax extension)이고, React는 JavaScript 라이브러리다. 많은 개발자들이 두 개념을 혼동하지만, JSX는 React와 독립적으로 사용할 수 있다. 이 글에서는 JSX의 정의, 왜 JSX를 사용하는지, 그리고 새로운 JSX 변환 방식이 등장한 이유에 대해 알아보겠다.JSX의 규칙 JSX는 HTML과 비슷해 보이지만, 좀 더 엄격하다. 또한 동적인 정보를 표시할 수 있는 기능이 있다. 이 점이 JSX를 단순한 HTML 대체물이 아니라 특별한 문법 확장으로 만들어준다. 반면 React는 상태 관리, 컴포넌트 기반 구조 등 다양한 기능을 제공하는 라이브러리다. 1. 하나의..
-
useState와 useEffect를 사용할 때 흔히 저지르는 실수들
서론 React에서 상태 관리를 위해 useState와 컴포넌트의 lifecycle에 맞춰 동작하는 useEffect는 매우 자주 사용되는 훅이다. 하지만 이 훅들을 잘못 사용하면 예기치 않은 동작이나 성능 문제를 일으킬 수 있다. 이 글에서는 useState와 useEffect를 사용할 때 흔히 저지르는 실수들과 그 해결 방법을 다룰 것이다.1. setState는 즉시 실행되지 않는다 useState로 상태를 업데이트할 때 흔히 착각하는 부분은 setState가 즉시 상태를 업데이트한다고 생각하는 것이다. 하지만 React는 여러 상태 업데이트 요청을 모아서 한 번에 처리하는 특성을 갖고 있다. 아래 예제 코드를 보자.import React, { useState } from 'react';functio..
-
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 형태를..