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

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

🔑그냥 버티자, 버티면 다 나한테 돌아온다💡 단축 속성명(Shorthand Property Name) 📃 동적인 자바스크립트는 객체를 생성할 때, 속성이름과 속성 값이 필요하지만, 아래와 같이 속성 이름을 생략할 수 있는 경우가 있습니다💻CODEconst name = "Jayden"const obj = { name, age: 21}console.log(obj) //{name: 'Jayden', age: 21}⬆️ 객체를 만들 때, 속성 이름이 변수 이름과 같다면 name: name과 같이 길게 작성할 필요 없이 name만 적어, name이라는 속성에 해당하는 값을 name 변수의 값으로 자동 할당합니다.💻Use Case 1const returnObj = (name, age) => { //or..

🔑Writing Key Point in Posting💡 호이스팅 Hoisting📃 진짜 많이 언급되는 것 같습니다. Hoisting은 자바스크립트에서 변수 선언과 함수 선언이 해당 코드 최상단으로 끌어올려지는 현상을 의미합니다💻CODEconsole.log(add(2, 4)); // 6function add(a, b) { return a + b;}⬆️ 뭔가 이상한 점이 보이시나요? add(2, 4)를 함수가 선언되기 이전에 사용을 했는데, 콘솔값이 출력이 됩니다. 이러한 현상을 "호이스팅"이라고 합니다. 💻CODEconsole.log(func());let func = function hello() { console.log("hello")}⬆️ 이러한 경우는 실행이 될까요? ⬆️ 정답은 No 입..