All'alba vincerò

At dawn, I will win!

2024/08/07 3

HTML과 React JSX의 주요 차이점

📌 HTML  vs  React JSX  HTMLJSX태그 class  className forhtmlFor valuevalue,  defaultValuecheckedchecked,  defaultChecked 태그style 속성에 문자열 style 속성에 {객체}    ℹ️ 태그의 className ✅ HTML ➡︎ class 사용Hello World  ☑️ JSX ➡︎ className 사용Hello World   ℹ️  태그의 htmlFor ✅ HTML ➡︎ for 사용Username:  ☑️ JSX ➡︎ htmlFor 사용Username:   ℹ️  태그의 defaultValue ✅ HTML ➡︎ value 사용  ☑️ JSX ➡︎ value,  defaultValue 사용value: 값을 동..

React 2024.08.07

[JS] call / apply / bind: this 명시적 바인딩

✨ this를 명시적으로 바인딩 = 함수가 실행될 때 this가 참조하는 객체를 명확하게 지정하는 것 this 값을 제어하거나 함수의 실행 방식을 조정함수의 실행 컨텍스트를 유연하게 변경하고 제어 📌 call(): 함수에 인자를 개별적으로 풀어서 전달함수.call(thisArg, arg1, arg2, ...);함수를 호출할 때 this 값을 설정하고, 그 이후에 이어지는 인수들을 개별적으로 전달함수 즉시 호출 주로 상속이나 메서드 호출 시 유용  function greet(greeting, punctuation) { console.log(greeting + ", " + this.name + punctuation);}const person = { name: "Alice" };greet.call(pe..

Javascript 2024.08.07

[React] useID: 접근성 속성을 위한 고유 ID 생성

📌 useIdconst id = useId() : 접근성 어트리뷰트에 전달할 수 있는 고유 ID를 생성하는 React Hook 컴포넌트의 최상위에서 호출하여 고유 ID를 생성 고유 ID 문자열을 반환 useId를 리스트의 key를 생성하기 위해 사용하면 안 된다❌import { useId } from 'react';function PasswordField() { const passwordHintId = useId(); // ...  접두사 지정하여 사용하기도 함('my-first-app-', 'my-second-app-')import { createRoot } from 'react-dom/client';import App from './App.js';const root1 = createRoot(..

React 2024.08.07