JavaScript

Framework/React

[React] 컴포넌트

리액트는 컴포넌트 단위로 개발합니다. 컴포넌트는 사용자 입장에서 HTML 요소와 크게 다르지 않습니다. 나 태그를 컴포넌트로 만든다고 했을 때, 컴포넌트 내부에서 jsx 문법을 써서 HTML 요소를 return 해서 만들 수 있습니다. 📌 구현할 HTML 요소 Hello, taedonn 📌 index.html => 리액트를 렌더링 할 베이스 파일 📌 렌더링 할 베이스 파일 📌 index.js => index.html에 렌더링 할 리액트 최상위 컴포넌트 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from ..

Framework/React

[React] JSX 알아보기

JSX는 JavaScript XML의 약자로, 리액트 컴포넌트의 독립화에 최적화된 언어입니다. JSX는 XML에 코딩하는 것처럼 HTML 코드를 JS 파일에 넣을 수 있습니다. 이러면 별도의 HTML 파일 호출 없이, 하나의 JS 파일로 하나의 컴포넌트를 완전히 구현할 수 있습니다. JSX는 리액트의 개발을 위해 만든 언어이기 때문에, 리액트와 마찬가지로 공식 자바스크립트 문법이 아닙니다. 문법 1. 카멜 케이스(Camel Case) 네이밍 규칙을 사용한다. JSX에서는 데이터가 객체로 전달되기 때문에 HTML 대신 카멜 케이스 네이밍 규칙을 사용합니다. // background-color => backgroundColor // font-size => fontSize 📌 변수에 저장해서 사용할 때 fun..

taedonn