[React] JSX란?

function Header() {
  return (
    <header>
        <img src="src/assets/react-core-concepts.png" alt="Stylized atom" />
        <h1>React Essentials</h1>
        <p>
          Fundamental React concepts you will need for almost any app you are
          going to build!
        </p>
    </header>
  )
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <h2>Time to get started!</h2>
      </main>
    </div>
  );
}

JSX는 JavaScript XML의 약자로, React에서 사용되는 JavaScript의 확장 문법입니다. ( return() 안의 html 태그들 )

• HTML과 유사한 구문: JSX는 JavaScript 코드 안에서 HTML과 유사한 마크업을 작성할 수 있게 해줍니다.
• JavaScript 표현식 사용: 중괄호 {}를 사용하여 JSX 내에서 JavaScript 표현식을 삽입할 수 있습니다.
• 컴포넌트 렌더링: React 컴포넌트를 HTML 태그처럼 사용할 수 있습니다.
• 속성 정의: HTML 속성과 유사하게 컴포넌트나 요소의 속성을 정의할 수 있습니다.
• 트랜스파일 필요: JSX는 브라우저에서 직접 실행될 수 없으며, Babel과 같은 도구로 일반 JavaScript로 변환해야 합니다.
  JSX를 사용하면 React 애플리케이션의 구조를 더 직관적으로 표현할 수 있어 개발 효율성이 향상됩니다.

표현식이란?

표현식(Expression)은 하나의 값으로 평가될 수 있는 코드 조각입니다. 

특징:

• 항상 어떤 값을 반환합니다.
• 변수에 할당하거나 함수의 인자로 사용할 수 있습니다.

주요 유형:

• 리터럴: 5, "Hello", true
• 변수: x, y
• 연산자 사용: x + y, a * b
• 함수 호출: Math.random(), console.log("Hi")
• 객체/배열 생성: {name: "Kim"}, [1, 2, 3]

   let x = 5;           // 5는 표현식
   let y = x + 3;       // x + 3은 표현식
   console.log(2 * 4);  // 2 * 4는 표현식
   let z = (x > y) ? x : y;  // 삼항 연산자도 표현식

 

표현식 vs 문장:

표현식은 값을 생성하지만, 문장(Statement)은 작업을 수행합니다.
if, for 등은 문장이며 값을 반환하지 않습니다.

 

단... JSX 안에서 for문을 꼭 사용해야한다면 즉시실행함수 (IFFE)를 사용하면 된다

   {(() => {
     const elements = [];
     for (let i = 0; i < 5; i++) {
       elements.push(<div key={i}>{i}</div>);
     }
     return elements;
   })()}

 

예상 질문

1. 개발자의 관점에서: 컴포넌트를 조합하여 UI를 구축하는 것에 대한 장점 중 하나는?

 

작고 재사용 가능한 빌딩 블록.  

개발자로서, 일반적으로 더 작고 관리하기 쉬운 구성 요소에서 작업하는 것이 더 용이합니다. 또한 UI의 여러 부분에서 특정 구성 요소를 사용해야 하는 경우, 단순히 컴포넌트로 구축하여 재사용할 수 있습니다 (복사 & 붙여넣기 대신).

 

2. 리액트로 작업할 때: 어떻게 새로운 컴포넌트를 정의합니까?

 

JSX 코드를 반환하는 함수를 생성한다.

단순하게 리액트에서 컴포넌트는 렌더링 가능한 내용을 반환하는 함수입니다 - 특히 JSX 코드입니다.

정의가 되고 나면, 커스텀 컴포넌트는 마치 다른 컴포넌트들의 JSX코드의 내장 HTML 요소처럼 사용될 수 있습니다.

 

3. JSX의 목적은 무엇입니까?

 

컴포넌트 내, 타겟 HTML 코드를 정의할 수 있도록 합니다.

 JSX의 개념은 컴포넌트로부터 생성되어야 하는 타겟 HTML 코드를 더 쉽게 정의할 수 있도록 하는 것입니다.

또한, 타겟 UI/HTML 코드를 자바스크립트 코드 바로 안에 정의할 수 있도록 합니다 - 즉, 컴포넌트 바로 안입니다.

 

4. JSX 코드에서 사용한 컴포넌트로 하는 일은 무엇입니까?

 

웹사이트 DOM을 업데이트할 명령어를 수행하는 컴포넌트 트리를 불러온다.
 JSX 코드는 마치 트리(나무) 모양의 코드 구조를 띄며 리액트에게 각 컴포넌트들이 어떻게 연관되어 있고 UI는 어떻게 보여야 하는지 알려줍니다. 그 다음, 올바른 명령어를 실행하여 실제 DOM을 제어하며 타겟 구조/코드를 반영합니다

 

 

5. 커스텀 컴포넌트는 주로 어떻게 사용됩니까?

커스텀 컴포넌트는 JSX 코드 내 HTML 요소처럼 사용된다