IT 공부

리액트 컴포넌트 반복: map과 key로 리스트 렌더링 최적화 반복 렌더링은 리액트에서 가장 자주 쓰이는 패턴입니다. Array.prototype.map으로 데이터를 컴포넌트로 변환하고, 변경 최소화를 위해 각 항목에 안정적인 key를 부여합니다. 이 글에서는 map 기본 패턴부터 key 선택 규칙, 인덱스 key 안티패턴 재현, 성능 팁까지 한 번에 알아봅니다. 1) 핵심 요약 2) map 기본 패턴 가장 단순한 리스트 렌더링

리액트 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