🔑난 안피곤하다... 난 안피곤하다...💡 React Ref 란? 📃 Ref는 Reference의 줄임말로, React 요소 또는 DOM 요소를 참조(Reference)하여 포커스를 설정하거나 특정 요소를 관리할 때 사용됩니다. Ref는 React에서 DOM 요소에 직접 접근하거나 조작해야 할 때 활용됩니다💻Class 컴포넌트에서 Ref 사용import { Component, createRef } from "react";class MyComponent extends Component { constructor(props) { super(props); // Refs를 생성 this.inputRef = createRef(); this.buttonRef = createRef(); ..

🔑내 삶에는 어떤 이벤트가...💡 이벤트 핸들러(Event Handler)란?📃 이벤트 핸들러는 React에서 사용자와의 상호작용(예: 클릭, 입력, 마우스 이동 등)을 처리하는 함수입니다. React에서는 CamelCase 표기법을 사용합니다. onClick, onChange, onSubmit 등이 대표적입니다💻클릭 이벤트 처리하기 import React from 'react';function EventPractice() { const handleClick = () => { alert('버튼이 클릭되었습니다!'); }; return ( 클릭하세요 );}export default EventPractice;⬆️ 버튼을 클릭하면 handleClick 함수가 실행되어 알림 창이 뜹니다..

🔑토끼와 거북이에서 "거북이"가 되자💡 클래스 컴포넌트 Class Component📃 클래스형 컴포넌트는 React에서 Component를 상속하여 정의된 컴포넌트입니다. 구조화된 객체 형태로 this를 통해 다양한 속성과 메서드를 사용할 수 있습니다.💻MyComponentClass.jsimport React, { Component } from 'react'class MyComponentClass extends Component { render() { console.log(this) // this는 컴포넌트 인스턴스를 가리킵니다 const { name, age } = this.props return ( 안녕하세요 제 이름은 {name}입니다 나..

🔑일단 의자에 앉아있자... 멍도 의자에서 때리자...💡 JSX에서는 하나의 부모 요소만 반환 가능하다📃 React에서는 다양한 컴포넌트를 조합해서 사용할 때, 각 컴포넌트에서 return하는 요소는 반드시 하나의 부모 요소여야 한다는 점에 유의해야 합니다💻오류 발생// 동일한 레벨에 여러 개의 요소를 반환하면 오류가 발생합니다.function App() { return ( React 요소 알아보기 React 컴포넌트의 return은 하나의 부모 요소만 반환해야 합니다. );}export default App;⬆️ JSX에서는 하나의 부모 요소만 반환할 수 있습니다. 위 예시처럼 여러 개의 요소가 동일한 레벨에서 반환되면 오류가 발생합니다.💻해결 방법 1 Fragmentfuncti..