2024.1.18 TIL

Today I Learned

React 학습을 시작하면서 배우게된 JSX(JavaScript XML) 에 대해 정리 해보려 한다.

먼저 자바스크립트 XML(JSX) 은 React에서 UI를 표현하기 위한 문법적 확장이다. JSX는 React 엘리먼트를 생성하기 위해 XML 또는 HTML과 유사한 구문을 사용한다. 이는 React에서 사용하는 컴포넌트, 이벤트 핸들러, 속성 등을 보다 직관적으로 작성할 수 있도록 도와준다.

기본적인 JSX 형태는 다음과 같다

jsx
Copy code
const element = <div>Hello, World!</div>;

위의 코드에서 <div>Hello, World!</div>는 JSX로 작성된 React 엘리먼트이다. 이것은 가상 DOM(Virtual DOM)에서 사용되며, React가 이를 실제 DOM 엘리먼트로 변환하여 브라우저에 렌더링한다.

JSX의 특징들

태그: JSX는 XML 또는 HTML과 유사한 태그 문법을 사용한다. 엘리먼트를 생성할 때는 태그를 사용하며, 열리는 태그와 닫히는 태그가 쌍을 이루어야 한다.

const element = <div>Hello, World!</div>;

자바스크립트 표현식: JSX 내에서 자바스크립트 표현식을 사용할 수 있다. 중괄호 {} 안에 자바스크립트 코드를 삽입할 수 있다.

const isUserLoggedIn = true;
const loginStatus = <p>{isUserLoggedIn ? "Welcome back!" : "Please log in."}</p>;

컴포넌트 사용: JSX에서는 사용자가 작성한 컴포넌트를 사용할 수 있다.

function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}
const element = <Greeting name="KIM" />;

가독성과 편의성: JSX는 가독성이 뛰어나며, 코드를 더 직관적으로 작성할 수 있도록 도와준다.

❗주의사항

닫는 태그가 필요:

JSX에서는 모든 엘리먼트에 대해 반드시 닫는 태그가 필요하다. 또는 self-closing 태그를 사용할 수 있다.

// 올바른 예
const element1 = <img src="image.jpg" />;

// 올바른 예
const element2 = <input type="text" />;

// 잘못된 예
const element3 = <img src="image.jpg">; // 오류 발생

class 대신 className 사용:

JSX에서는 HTML 클래스를 설정할 때 class 대신 className을 사용해야 한다.

// 올바른 예
const element = <div className="container">Hello</div>;

// 잘못된 예
const element = <div class="container">Hello</div>; // 오류 발생

style 속성은 객체로 설정:

JSX에서 style 속성을 설정할 때는 객체로 설정해야 한다.

// 올바른 예
const element = <div style={{ color:'blue'}}>Hello</div>;

// 잘못된 예
const element = <div style="color: blue;">Hello</div>; // 오류 발생

감싸인 요소(Wrapper Element):

JSX에서 여러 엘리먼트를 반환할 때는 반드시 하나의 부모 엘리먼트로 감싸야 한다.

// 올바른 예
const element = (
  <div>
    <p>Hello</p>
    <p>World</p>
  </div>
);
// 잘못된 예
const element = <p>Hello</p><p>World</p>; // 오류 발생

어렵다... 이제 React의 초입 구간인데 벌써부터 어려운 것 같다 😭
그래도 중요한 건 꺾이지 않는 마음..! 열심히 해보자!