JSX

기초로 돌아가서 다시한번 정리를 해야할것같아서 쓴다.

JSX란 ?

• Javascript를 확장한 문법. JavaScript XML의 약자. React에서 사용된다.

특징

• HTML과 유사한 구문. HTML에서 쓰는 div, h1, p 같은 태그를 JSX에서도 사용 가능하다.

• JavaScript의 통합.
  ex)

  const name = "홍길동";
  const greeting = <h1>안녕하세요, {name}!</h1>;
  function formatName(user) {
  return user.firstName + ' ' + user.lastName;
  }
  const user = {
  firstName: 'Harper',
  lastName: 'Perez'
  };
  const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
  );
  
  
  ----------------------------------------------------
  
  
  function formatName(user) {
  return user.firstName + ' ' + user.lastName;
  }
  const user = {
  firstName: 'Harper',
  lastName: 'Perez'
  };
  const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
  );

• JSX는 React의 컴포넌트를 정의하는 데 사용된다. 컴포넌트는 UI의 독립적인 조각으로, 재사용 가능하고 관리하기 쉬운 형태로 설계됨.

  function Welcome(props) {
    return <h1>안녕하세요, {props.name}!</h1>;
  }
  function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
  }
  

• JSX는 React의 컴포넌트를 정의하는데 사용됨. 컴포넌트는 UI의 독립적인 조각으로, 재사용 가능하고 관리하기 쉬운 형태로 설계된다.

function Welcome(props) {
    return <h1>안녕하세요, {props.name}!</h1>;
}
//welcome 컴포넌트는 name이라는 속성을 받아서 인삿말을 출력. 이 컴포넌트를 여러번 사용 가능.
const element = <a href="https://www.reactjs.org"> link </a>;
const element = <img src={user.avatarUrl}></img>;

• 브라우저는 JSX를 직접 이해하지 못하므로, Babel과 같은 도구를 사용하여 JSX 코드를 일반 JavaScript로 변환해야한다. 변환된 코드는 React의 createElement 함수를 호출하는 형태로 바뀜

const element = <h1>안녕하세요!</h1>;
// Babel에 의해 변환된 결과
const element = React.createElement('h1', null, '안녕하세요!');

• JSX는 HTML 보다 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용함. ex) class -> className, tabindex -> tabIndex

  장점

• 가독성 : Html코드와 비슷해 코드의 가독성이 좋아짐.
• 직관적인 UI 구성
• JavaScript의 표현식을 사용할 수 있어 동적 UI를 쉽게 생성 가능.