[REACT] 이벤트 핸들링 기법

React 이벤트 핸들링의 기본React에서는 HTML 이벤트 속성을 camelCase(예: onClick)로 작성하며, 함수를 이벤트 핸들러로 전달해 사용자 행동에 반응합니다.기본 이벤트 핸들러 정의가장 간단한 이벤트 핸들링은 컴포넌트 내에서 함수를 정의하고 이를 JSX 요소에 연결하는 방식입니다.export default function ToggleButton() { function handleToggle() { alert('토글이 전환되었습니다!'); } return ( 토글 버튼 );}인라인 이벤트 핸들러 활용간단한 동작은 인라인으로 작성할 수 있습니다. 화살표 함수를 사용하면 코드가 간결해지며, 즉석에서 로직을 정의할 수 있습니다.import { useStat..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 14.
• textsms

[REACT] UI 트리 이해하기

UI를 트리로 모델링하는 이유HTML은 DOM 트리로, CSS는 CSSOM 트리로 표현되듯, React 역시 컴포넌트를 트리 형태로 관리합니다. 이는 부모 컴포넌트가 자식 컴포넌트를 포함하는 계층 구조를 형성하며, UI의 복잡성을 체계적으로 다룰 수 있게 합니다. 트리 구조는 React의 선언적 렌더링과 효율적인 업데이트 메커니즘의 기반이 됩니다.렌더 트리렌더 트리는 React 컴포넌트가 실제로 화면에 렌더링되는 방식을 보여주는 구조입니다. 각 컴포넌트는 트리의 노드로 나타나며, 부모-자식 관계를 통해 계층적으로 연결됩니다.예제: 렌더 트리// BlogApp.jsimport React from 'react';import Header from './Header';import PostList from './..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 13.
• textsms

[REACT] 컴포넌트의 최적화와 확장

React 컴포넌트 순수성React 컴포넌트는 본질적으로 JavaScript 함수입니다. 이 함수가 순수하면, 주어진 입력에 따라 동일한 JSX를 반환하며 외부 환경에 영향을 주지 않습니다.순수 컴포넌트의 장점서버 사이드 렌더링(SSR) 안정성순수 컴포넌트는 동일한 입력에 대해 항상 동일한 결과를 보장하므로, 서버에서 여러 요청을 처리할 때 일관된 렌더링을 제공합니다.성능 최적화입력값이 변하지 않으면 React는 불필요한 재렌더링을 생략하거나 캐싱할 수 있어, 애플리케이션의 속도가 향상됩니다.렌더링 중단 및 재개 가능성순수 컴포넌트는 렌더링이 중단되더라도 최신 입력값으로 언제든지 안전하게 재개될 수 있어, 복잡한 UI에서도 안정성을 유지합니다.React의 최신 기능 활용데이터 페칭, 트랜지션, Suspe..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 13.
• textsms

[REACT] 리스트 렌더링: 데이터 배열을 컴포넌트로 변환하기

기본 리스트 렌더링React 컴포넌트 내에서 배열의 각 항목을 반복하여 렌더링하려면 JavaScript의 map() 함수를 주로 사용합니다. 이 메서드는 배열의 각 요소를 새로운 값(여기서는 JSX 요소)으로 변환한 후, 새로운 배열을 반환합니다.export default function SubjectList() { const subjects = [ { id: 's1', name: '수학' }, { id: 's2', name: '과학' }, { id: 's3', name: '영어' } ]; const subjectItems = subjects.map((subject) => ( {subject.name} )); return ( 수강 과목 ..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 10.
• textsms

[REACT] 조건부 렌더링으로 동적 UI 구현하기

조건부 렌더링이란?조건부 렌더링은 특정 조건에 따라 컴포넌트가 서로 다른 JSX를 반환하도록 설계하는 기법입니다. React의 선언적 특성과 JavaScript의 유연성을 결합해, 코드 내에서 UI의 동적 변화를 자연스럽게 구현할 수 있습니다.if/else 문으로 조건 분기가장 간단한 방법은 if/else 문을 사용해 조건에 따라 다른 JSX를 반환하는 것입니다.function WelcomeMessage({ isLoggedIn, username }) { if (isLoggedIn) { return ( 환영합니다, {username}님! 오늘도 즐거운 하루 보내세요. ); } return ( 로그인이 필요합니다 계정에 ..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 10.
• textsms

[REACT] Props를 활용한 컴포넌트 간 데이터 전달

Props란 무엇인가?props는 "properties"의 줄임말로, 컴포넌트에 전달되는 인수로 생각할 수 있습니다. JSX에서 HTML 속성과 비슷한 방식으로 작성되며, 부모 컴포넌트가 자식 컴포넌트에 데이터를 넘겨줄 때 사용됩니다. 이때 props는 오직 읽기 전용이며, 컴포넌트 내부에서 변경할 수 없습니다.Props로 데이터 전달하기가장 기본적인 props 사용법은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 것입니다.function BookCard({ title, author, price = 10000 }) { return ( {title} 저자: {author} 가격: {price.toLocaleString()}원 );}export defaul..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 10.
• textsms