React

• 메타(前 페이스북)에서 개발 및 관리하는 JavaScript Library
• 특징
  - 선언적: 절차적인 방식의 JavaScript와는 달리 "어떻게"를 고민하지 않아도 됨
  - Virtual DOM
  - Component: 재사용 가능한 UI 구성 단위, 독립 사용, 유지보수 효율, 다른 컴포넌트와 조합 및 포함 가능 등의 특징
  - 클래스 컴포넌트(사용 빈도 ↓)
  - 함수 컴포넌트: 라이프 사이클을 관리하는 Hook 함수 (사용 빈도 ↑)
  - JSX: React에서 사용하는 JavaScript 확장 문법으로, JavaScript 파일에서 HTML 마크업와 JavaScript 로직을 동시에 작성할 수 있음

JSX 문법

1. JSX element

// HTML처럼 작성 가능하며 변수 저장 및 함수의 인자로 넘길 수도 있습니다.
const welcome = <p>Welcome</p>;

2. JSX attribute

// 턔그의 attribute는 camelCase로 작성합니다. 그리고 className처럼 실제 HTML에서 쓰이는 것과 다른 속성명일 수 있습니다.
<span className="text-bold">안녕하세요</span>

3. Self-Closing Tag

// 어떤 태그라도 닫힘 표시를 사용할 수 있습니다.
<img src="url" alt="value" />

4. Inline Styling

// inline style에서도 css property는 camelCase로 쓰며, 중괄호로 2회 묶어서 처리합니다. 안쪽의 중괄호는 JavaScript object를 의미합니다.
<div style={{ backgroundColor: "red", color: "black" }}>
	배경 영역
</div>

5. JavaScript 표현식

// {} 안에 유효한 JavaScript 표현식을 작성할 수 있습니다.
const Introduce = (name) => {
	return <h1>{name} 님, 저는 AI입니다.</h1>;
};

6. Event 처리

// 태그에 직접 이벤트와 이벤트 핸들러(Event Handler)를 부여할 수 있습니다. 이벤트는 앞에 on을 붙여 camelCase로 작성합니다. 그리고 문자열이 아닌 함수로 이벤트를 전달합니다.
<button type="button" onClick={submitClick}>회원가입</button>

7. Nested JSX

// 반드시 최상위를 감싸고 있는 태그가 있어야 합니다.
const Introduce = (name) => {
	return (
		// 이러한 태그로 감싸지 않으면 문법 오류입니다.
		<div>
			<span>{name} 님, 저는 AI입니다.</span>
		</div>
	)
}

8. React.Fragment

// Nested JSX 문법과 같이 최상위 태그로 감싸야 하지만, 특별한 의미나 스타일이 없다면 React.Framgent를 사용합니다.
const Introduce = (name) => {
	return (
		<React.Fragment>
			<span>{name} 님, 저는 AI입니다.</span>
		</React.Fragment>
	)
}

// 축약형으로도 사용이 가능합니다.
const Introduce = (name) => {
	return (
		<>
			<span>{name} 님, 저는 AI입니다.</span>
		</>
	)
}