🔑한번 보고 모르겠으면, 두번 보고, 세번 보고, 누가 이기나 해보자💡  useState로 Counter 구현하기📃 useState를 사용하여 간단한 Counter 기능을 구현한 후, 이를 기반으로 useReducer와의 차이점을 이해해 보겠습니다💻useState를 활용한 Counter 구현 import React, { useState } from 'react'const Counter = () => { const [count, setCount] = useState(0); const changeCount = e => setCount(count + Number(e.target.innerText)); return ( 현재 카운터 값은 {count} 입니다 +..

🔑아는 내용도 다시 한번💡 호이스팅과 다양한 함수 선언, ES6+ 문법 및 React 기본 개념📃 2주 동안 자바스크립트의 기본 문법과 동작 방식인 호이스팅, 다양한 함수 선언 방법, ES6+의 문법 요소(단축 속성명, 계산된 속성명, 전개 연산자, 비구조화), 그리고 React의 핵심 개념인 JSX 구조, 특수 Props(children), 이벤트 객체 활용, 컴포넌트 생명주기를 학습했습니다. 언급된 이 모든 내용은 실무에서 정말 많이 사용되기 때문에, 깊이 있게 알고 있는 것은 중요한 것 같네요.💻호이스팅과 함수 선언 방법// 함수 선언식 - 호이스팅 가능console.log(sayHello()); // 'Hello'function sayHello() { return 'Hello';}// 함..

🔑난 안피곤하다... 난 안피곤하다...💡 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 함수가 실행되어 알림 창이 뜹니다..