Algorithm Cinema

중복된 여러 코드가 보기 싫다에서 탄생된 것이 props다.회원가입 form을 예시로, 아이디, 비밀번호, 뭐 등등 입력하는 칸거의 완전 똑같이 생겼는데 이걸 굳이 3줄 겹치는 내용을 적어야한다면 그것은 비효율적이겠다.import React, { useState } from 'react';export default function SignupForm() { const [id, setId] = useState(''); const [pw, setPw] = useState(''); return ( 아이디 setId(e.target.value)} className="border p-2 rounded" /> ..

React 상태 관리 제대로 이해하기React를 사용하다 보면 자주 마주치는 개념 중 하나가 상태(state)입니다. 하지만 상태의 작동 방식은 자칫 오해할 수 있는 비동기적 특성과 렌더링 사이클 덕분에 헷갈렸어서 시험기간 전 시간이 좀 남을때 글을 정리했습니다.1. 상태는 비동기적 특성을 지닌다.React에서 상태를 setState()로 변경하더라도, 즉시 반영되지 않습니다. 이는 React가 여러 상태 업데이트를 모아서 한 번에 처리하는 Batching 기법 때문입니다. 이 과정은 특정 렌더링 사이클 타이밍에 맞춰 일괄 처리됩니다. 따라서 변경되는 양상이 비동기적으로 보여서 상태는 정확히 비동기다. 라고도 오해할 수 있지만 그렇지는 않다고 합니다. 상태가 변경됨으로써, 리렌더링이 한번 이루어지고 나고..

웹 개발(프론트엔트 개발)을 할 때 스타일링 방식은 프로젝트와 팀의 스타일에 따라 다릅니다. CSS-in-JS, CSS-in-CSS, 그리고 Utility-First인 Tailwind CSS는 각기 다른 철학과 장점을 가집니다. 오늘은 대표적인 Emotion (CSS-in-JS)과 CSS-in-CSS, 그리고 Tailwind CSS를 비교하며, 언제 어떤 방식을 선택해야 할지 설명해 보겠습니다.  1. CSS-in-JS (Emotion) 개요 CSS-in-JS는 자바스크립트 파일 안에 CSS 스타일을 작성할 수 있게 해 주는 방식입니다.그 중 제가 선호하는 방식인 Emotion은 styled 컴포넌트나 css 함수를 통해 컴포넌트 기반의 스타일링을 제공합니다./** @jsxImportSource @emo..