React

리액트 useRef 사용법: DOM 제어, input focus, 이전 값 저장하기 useRef는 렌더링 사이에 값을 보존하거나, 실제 DOM 요소에 직접 접근해 포커스·스크롤·스타일을 제어할 때 쓰는 훅입니다. ref.current 값을 바꿔도 리렌더링은 일어나지 않으므로 화면에 보여줄 값은 여전히 useState로 관리하는 것이 원칙입니다. 1. useRef 핵심 요약 2. 예제 1 — DOM 직접 제어(스크롤·하이라이트) 버튼을 클릭하면 지정 박스로 스무스 […]

리액트 useEffect 사용법: 의존성 배열과 생명주기 이해 useEffect는 컴포넌트가 렌더링된 뒤 실행되어 이벤트 리스너 등록/해제, 타이머, API 호출 등 외부 동기화 작업을 담당합니다. 의존성 배열로 실행 시점을 제어하며 전통적인 componentDidMount·Update·Unmount에 대응합니다. 아래에 의존성 배열의 정확한 동작을 표와 예제로 자세히 알아봅니다. 1. useEffect 기본 형태 2. 의존성 배열 깊게 이해하기 의존성 배열은 “이 값들이 바뀌면 이펙트를

React 이벤트 처리 방법: onClick·onChange·onSubmit 예제 리액트 이벤트는 브라우저 이벤트를 SyntheticEvent로 표준화해 제공합니다. JSX에서는 카멜케이스 속성에 함수 레퍼런스를 전달해야 하며, 상황에 따라 preventDefault()로 기본 동작을 막거나 stopPropagation()으로 전파를 차단할 수 있습니다. 아래 예제로 onClick·onChange·onSubmit의 핵심 패턴을 바로 실습해 보세요. 1. 리액트 이벤트 기본기 리액트는 브라우저 이벤트를 SyntheticEvent로 감싸 브라우저 간 차이를 줄이고 일관된 API를 제공합니다(React

리액트 state 관리: useState 기본 사용법과 동작 원리 리액트(React)는 컴포넌트의 동적인 데이터를 다루기 위해 state 개념을 제공합니다. state는 UI와 데이터의 일관성을 유지하는 핵심 도구이며, 함수형 컴포넌트에서는 useState 훅을 사용해 관리합니다. 이 글에서는 state 변경 규칙(불변성)과 함께, 카운터 예제, 입력 폼 예제를 통해 useState의 기본 원리를 알아봅니다. 1. useState 기본 사용법 useState는 배열을 반환하며, 첫 번째

리액트 props 사용법: 부모에서 자식으로 데이터 전달하기 props는 부모 컴포넌트가 자식 컴포넌트로 값을 전달하는 표준 방법입니다. 이 글에서는 props 기본 문법, props.children으로 래핑된 콘텐츠 전달하기, 기본값 설정(ES6 기본 매개변수 · defaultProps)까지 예제와 함께 알아봅니다. “props는 읽기 전용(read-only)”이라는 원칙을 꼭 기억하세요. 1. props 기본 문법 부모는 JSX 속성 형태로 값을 전달하고, 자식은 props 객체(또는 구조 분해

리액트 JSX 문법 규칙: 인라인 스타일링·className·닫는 태그·주석 리액트 JSX는 HTML과 비슷해 보이지만 몇 가지 중요한 규칙이 있습니다. 초보자가 자주 헷갈리는 인라인 스타일링, className, 반드시 닫는 태그, 주석을 정리했습니다. 이 규칙만 숙지해도 JSX 작성 시 오류를 줄이고, 코드 가독성을 높일 수 있습니다. 1. 인라인 스타일링은 카멜 표기법 사용 JSX에서 인라인 스타일링은 객체 형태로 작성해야 하며, CSS

React JSX 기초: 표현식·조건부 렌더링·리스트 출력 이 글에서는 React에서 UI를 작성할 때 핵심이 되는 JSX 문법에 대해 알아봅니다. 표현식 삽입, 조건부 렌더링, 리스트 렌더링 예제를 통해 JSX 사용법을 익히고, 주요 팁과 주의사항을 정리해 보세요. 1. JSX란? JSX(JavaScript XML)는 JavaScript 코드 안에 HTML 구조를 작성할 수 있게 해 주는 문법입니다. 브라우저가 이해하는 순수 JavaScript로 변환되기 때문에,

React 시작하기: 환경 구축 & 첫 컴포넌트 만들기 이 글에서는 Node.js 설치 후 Create React App 또는 Vite를 이용해 React 프로젝트를 생성하고, 첫 컴포넌트인 HelloWorld를 작성·렌더링하는 과정을 단계별로 알아봅니다. 이를 통해 React 개발 환경 구축부터 간단한 컴포넌트 실행까지 빠르게 이해할 수 있습니다. 1. 환경 요구사항 React 개발을 시작하려면 아래 소프트웨어가 필요합니다. ▶ 이전 게시물 참고

React 개념 정리: 가상 DOM·컴포넌트·장단점 분석 React는 페이스북(Facebook)에서 개발한 UI 라이브러리로, 단일 페이지 애플리케이션(SPA) 개발을 효율적으로 만들어 줍니다. 컴포넌트 기반 구조와 가상 DOM 기술을 통해 빠른 렌더링과 재사용성을 제공합니다. 1. 핵심 특징 1.1 컴포넌트 기반 아키텍처 컴포넌트는 독립적인 UI 단위입니다. 하나의 화면을 여러 컴포넌트로 분리하여 관리하면, 코드 재사용성과 유지보수성이 크게 향상됩니다. 1.2 가상 DOM(Virtual DOM)