JSX 로 마크업 작성하기

소개

React 문서에 오신 것을 환영합니다! 이 랩에서는 JSX 를 사용하여 마크업을 작성하는 방법에 대한 소개를 제공합니다.

Skills Graph

JSX 로 마크업 작성하기

React 프로젝트는 이미 VM 에 제공되어 있습니다. 일반적으로 App.js에 코드만 추가하면 됩니다.

다음 명령을 사용하여 종속성을 설치하십시오.

npm i

위에서 보신 마크업 구문은 JSX 라고 합니다. 선택 사항이지만, 대부분의 React 프로젝트는 편의성을 위해 JSX 를 사용합니다.

JSX 는 HTML 보다 더 엄격합니다. <br />과 같은 태그를 닫아야 합니다. 또한 컴포넌트는 여러 JSX 태그를 반환할 수 없습니다. <h1>...</h1> 또는 빈 <>...</> 래퍼와 같이 공유된 부모로 묶어야 합니다.

// App.js
export default function Profile() {
  return (
    <>
      <h1>Hedy Lamarr</h1>
    </>
  );
}

HTML 을 JSX 로 많이 포팅해야 하는 경우, 온라인 변환기를 사용할 수 있습니다.

프로젝트를 실행하려면 다음 명령을 사용하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

npm start

데이터 표시

JSX 를 사용하면 마크업을 JavaScript 에 넣을 수 있습니다. 중괄호를 사용하면 JavaScript 로 "다시 탈출"하여 코드에서 일부 변수를 포함하고 사용자에게 표시할 수 있습니다. 예를 들어, 이것은 user.name을 표시합니다.

// App.js
const user = {
  name: "Hedy Lamarr"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
    </>
  );
}

JSX 속성에서도 JavaScript 로 "탈출"할 수 있지만, 따옴표 대신 중괄호를 사용해야 합니다. 예를 들어, className="avatar"는 "avatar" 문자열을 CSS 클래스로 전달하지만, src={user.imageUrl}은 JavaScript user.imageUrl 변수 값을 읽은 다음 해당 값을 src 속성으로 전달합니다.

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img className="avatar" src={user.imageUrl} />
    </>
  );
}

스타일 추가하기

React 에서는 className으로 CSS 클래스를 지정합니다. HTML class 속성과 동일하게 작동합니다.

<img className="avatar" />

그런 다음 별도의 CSS 파일에 대한 CSS 규칙을 작성합니다.

/* App.css */
.avatar {
  border-radius: 50%;
}

React 는 CSS 파일을 추가하는 방법을 규정하지 않습니다. 가장 간단한 경우 HTML 에 <link> 태그를 추가합니다. 빌드 도구 또는 프레임워크를 사용하는 경우, 프로젝트에 CSS 파일을 추가하는 방법을 배우려면 해당 설명서를 참조하십시오.

// App.js
import "./App.css";

JSX 중괄호 안에 더 복잡한 표현식을 넣을 수도 있습니다. 예를 들어, 문자열 연결과 같습니다.

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
  imageSize: 90
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={"Photo of " + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

위의 예에서 style={{}}은 특별한 구문이 아니라 style={ } JSX 중괄호 안에 있는 일반적인 {} 객체입니다. 스타일이 JavaScript 변수에 의존하는 경우 style 속성을 사용할 수 있습니다.

요약

축하합니다! JSX 로 마크업 작성 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.