Unwound Developer

다크모드 / 라이트모드 구현 방법최근에는 사용자 기기의 다크/라이트 테마 설정 값을 따라 웹 테마도 자동으로 변경되는 경우가 많아요.예를 들어 유튜브도 시스템 설정에 따라 테마가 바뀌는 대표적인 예시입니다.1. CSS에서 테마 컨트롤하기prefers-color-scheme 미디어 쿼리를 사용하면 사용자의 시스템 설정에 따라 다크 모드인지 라이트 모드인지 자동으로 판단할 수 있습니다. 이를 활용해 조건부 스타일을 적용할 수 있어요.코드 예시/* 라이트 모드 스타일 */body { background-color: white; color: black;}/* 다크 모드 스타일 */@media (prefers-color-scheme: dark) { body { background-color: black..

React에서 state는 컴포넌트가 관리하는 동적인 데이터를 의미합니다.컴포넌트의 상태를 나타내며, 값이 변경되면 해당 컴포넌트가 다시 렌더링됩니다.그렇다면 React state와 일반 변수와의 차이가 뭘까요?주요 특징:동적 데이터 관리: 사용자 입력, API 응답 등 변경 가능한 데이터를 저장.지역적(scope): 각 컴포넌트의 state는 해당 컴포넌트 내부에서만 관리.불변성(immutability): 직접 수정하지 않고, 항상 setState 또는 state setter 함수로 업데이트.간단한 예제:import React, { useState } from 'react'; function Counter() { const \[count, setCount\] = useState(0); // coun..