JAN's History

React에서 컴포넌트를 설계할 때 우리는 흔히 UI와 상태 로직 관리를 한 컴포넌트 안에 섞어서 작성합니다.예를 들어 드롭다운 메뉴를 만든다고 하면 버튼 클릭, 메뉴 열고/닫기 상태, 선택된 항목 관리, 렌더링 되는 리스트 아이템과 스타일까지 모두 한 컴포넌트에서 처리하는 경우가 많죠. 이렇게 작성하면 초기에 빠르게 기능을 구현할 순 있지만, 컴포넌트가 커지고 다양한 UI 요구사항이 생기면 재사용성과 유지보수성이 떨어질 수 있습니다. 여기서 등장한 것이 바로 헤드리스(Headless) 컴포넌트 입니다. 헤드리스 컴포넌트는 UI를 직접 렌더링하지 않고, 상태와 동작(로직)만 제공하는 컴포넌트를 말하는데요! 즉, 어떻게 보여줄지는 사용자에게 맡기고 기능과 상태만 제공하는 구조라고 할 수 있습니다.드롭다운 ..

https://ko.react.dev/learn/escape-hatches 를 보고 정리한 블로그입니다.1. Ref로 값 참조하기컴포넌트 ref를 어떻게 추가할까?useRef 는 React에서 제공하는 훅이며, 다음처럼 사용한다.import { useRef } from "react"; const ref = useRef(initialValue);initialValue는 ref.current의 초기값ref 객체는 { current: initialValue } 형태이며, ref.current를 통해 값을 읽고 쓸 수 있다.ref의 값이 어떻게 업데이트 될까?ref.current 는 일반 객체처럼 직접 수정할 수 있다.ref.current = 5;변경 시 리렌더링 X렌더 시 값 유지useState vs useR..

https://ko.react.dev/learn/managing-state 를 보고 정리한 블로그입니다.1. State를 통해 Input 다루기컴포넌트의 다양한 시각적 State를 확인한다. 무엇이 State 변화를 트리거하는지 알아내고 변화의 흐름을 정의한다.메모리의 state를 useState로 표현한다.불필요한 state변수를 제거한다.좋은 state 설계는 가능한 한 state를 단순화(합치기)해서 "불가능한 상태"를 없앤다.state 설정을 위해 이벤트 핸들러를 연결한다.즉, 핵심 흐름 상태를 -> 선언하고 -> 이벤트로 상태를 업데이트하면 -> React가 상태에 맞춰 UI를 자동으로 보여준다2. State 구조 선택하기State 구조화 원칙연관된 state 그룹화하기 - 두 개 이상의 sta..

https://ko.react.dev/learn/responding-to-events 를 보고 정리한 블로그입니다.1. 이벤트에 응답하기 (Responding to Events)React에서는 브라우저 DOM 요소에 이벤트 핸들러(event handler) 를 연결하여 사용자 입력에 반응할 수 있다JSX에서 이벤트 핸들러 추가하기HTML처럼 onclick, onchange가 아니라 카멜케이스로 onClick, onChange 사용값으로는 문자열이 아니라 함수 자체를 전달해야 함Click me이벤트 핸들러 함수 만들기컴포넌트 안에 함수 정의 후 이벤트에 연결한다.합일반적으로 handleSomething 형식의 네이밍을 사용function MyButton() { function handleClick() {..

1. 첫 번째 컴포넌트컴포넌트란?UI를 구성하는 재사용 가능한 단위HTML, CSS, JavaScript를 하나의 함수 형태로 묶은 것마치 를 쓰듯이, 형태로 사용컴포넌트 정의하고 사용하기React는 트리구조로 구성되어 하나의 부모 컴포넌트 안에 여러 자식 컴포넌트를 가질 수 있다.function App() { return ( );} //❌ 컴포넌트 안에 컴포넌트를 정의하지 말기//➡️ 이렇게 하면 매번 Gallery가 렌더링될 때마다 Profile 함수도 새로 만들어져서 불필요한 리렌더링, 성능 저하가 발생function Gallery() { function Profile() { return />; } ..

https://ko.react.dev/learn 를 보고 정리한 블로그입니다!1. 컴포넌트 생성 및 중첩하기React 앱은 컴포넌트 단위로 구성된다.React 컴포넌트는 마크업을 반환하는 자바스크립트 함수이다.함수 하나를 만들고 return 안에 JSX만 쓰면 바로 컴포넌트!그리고 컴포넌트 안에 컴포넌트를 넣으면 중첩도 가능하다.function MyButton() { return ( I'm a button );} export default function MyApp() { return ( Welcome to my app );} 처럼 React 컴포넌트 이름은 항상 대문자로, HTML 태그는 소문자로 시작해야한다.+ JSX란 JavaScript 코드 안에서 H..

리액트 + 타입스크립트를 사용하다보면 ReactNode, ReactElement, JSX.Element 같은 타입이 자주 등장하죠..이게 처음엔 꽤나 헷갈립니다.ㅠㅠ이 글에서는 이 세 가지 타입이 각각 무엇인지, 어떤 상황에서 사용하는지, 그리고 실제 예시까지 함께 정리해보겠습니다.이번 글에서는 초보자도 확실히 이해할 수 있도록 아래 내용을 순서대로 설명해볼게요JSX가 어떻게 동작하는지 (React.createElement + Babel)ReactNode / ReactElement / JSX.Element의 차이각각 언제 사용해야 하는지예제 가득한 실전 코드최종 비교 정리표먼저, JSX는 어떻게 동작할까?우리가 흔히 쓰는 JSX는 사실 자바스크립트 문법이 아닙니다.브라우저는 JSX를 이해하지 못해요.그래..

웹 개발을 하다 보면 SPA(Single Page Application)와 MPA(Multi Page Application)라는 개념을 자주 접하게 되는데요.둘 다 웹 애플리케이션을 만드는 방식이지만, 사용자 경험과 기술 구조에서 큰 차이가 있어요!이 글에서는 두 방식의 개념, 동작 방식, 장단점, 그리고 React를 예시로 한 구현 방식까지 상세하게 살펴보겠습니다 ✅ SPA(Single Page Application) SPA는 말 그대로 하나의 HTML 페이지에서 모든 동작이 이루어지는 방식이에요.브라우저는 최초에 하나의 HTML 파일 (index.html)과 필요한 자바스크립트 번들을 서버로부터 받아오고, 이후에는 사용자의 동작(클릭, 이동 등)에 따라 필요한 컴포넌트를 클라이언트에서 동적으로 렌더..