분류 Reactjs

JSX로 간단한 데이터 표시 - challenge1

컨텐츠 정보

  • 조회 308 (작성일 )

본문

React의 기본 요소 중 하나는 구성 요소를 개발할 때 HTML 요소를 사용할 수 있는 기능입니다.


https://scotch.io/courses/10-react-challenges-beginner/display-simple-data-with-jsx 


JSX를 사용하면 간단한 마크업을 HTML로 작성할 수 있습니다. JSX는 종종 React에서 배우기가 어려운 것으로 간주되지만 JSX는 실제로 자바 스크립트이기 때문에 살펴볼 가치가 있습니다.


JSX를 배우면 더 나은 JavaScript 개발자가 될 것입니다. 


이 React 도전 과제에서는 데이터를 가져와 JSX를 사용하여 표시합니다.


Challenge : JSX를 사용하여 데이터 표시 


이 과제에서는 사용자 데이터를 제공하고 JSX를 사용하여 사용자 데이터를 표시해야 합니다. 주요 작업은 다음과 같습니다.

시동 코드(Starter Code) 


https://codesandbox.io/s/4q3nk5kxo7 


styles.css 파일에는 이미 몇 가지 스타일이 있음을 알 수 있습니다. 부담 없이 사용하십시오.


마지막 페이지는 다음과 같습니다.


보너스 포인트 


보너스 도전 과제는 다음과 같습니다.


사용자 세부 사항에 대한 재사용 가능한 구성 요소를 작성하십시오. 소품을 사용하여 데이터를 전달하십시오.


시작하려면 이 CodeSandbox를 실행하십시오. https://codesandbox.io/s/4q3nk5kxo7 


솔루션 : JSX에서 데이터 표시 


JSX는 React에서 HTML과 유사한 구문을 사용하여 구성 요소를 작성하는 기능을 제공합니다. JSX 요소에 데이터를 전달하기 위해 핸들 막대와 같은 중괄호 {...}를 사용합니다. 이 중괄호는 JSX로 자바 스크립트로 처리하도록 알려줍니다.


JSX는 중괄호 안에 있는 모든 것을 JavaScript로 평가합니다. 


이를 통해 변수, 함수를 전달하고 식 e.t.c를 평가할 수 있습니다. 


자료 


상용구 CodeSandbox에서 사용자 데이터가 제공됩니다.


const user = {
  name: 'Chris on Code',
  location: 'Las Vegas',
  foodType: 'Everything',
  age: 28,
  likes: 'Coding into the wee hours of the morning',
  twitterUsername: 'chrisoncode',
  avatar:
    'https://scotch-res.cloudinary.com/image/upload/v1556479698/xRZsnhr0_400x400_cpyg2t.png'
};

이 데이터를 DOM에 표시하고 제공된 클래스를 사용하여 출력의 스타일을 지정해 보겠습니다.


JSX를 사용하여 데이터 표시 


App() 구성 요소에서 핸들 바처럼 괄호를 사용하여 사용자 데이터를 다음과 같이 전달하십시오.


// Import dependencies

const user = {
    // User data
}

function App() {

  return (
    <div className="App">

            {/_ Show user data here _/}
      <div className="user-deets">
        <img src={user.avatar} alt={user.name} />

        <h3>
          <a href={url}>{user.name}</a>
        </h3>

        <p>
          <strong>Location</strong> {user.location}
        </p>
        <p>
          <strong>Eats</strong> {user.foodType}
        </p>
        <p>
          <strong>Age</strong> {user.age}
        </p>
        <p>
          <strong>Likes</strong> {user.likes}
        </p>

        <p>
                    {/_ Twitter Link_/}
          <strong>Twitter</strong>{' '}
          <a>@{user.twitterUsername}</a>
        </p>
      </div>

      <ScotchInfoBar />
    </div>
  );
}

이제 데이터가 표시됩니다. 우리는 사용자의 아바타를 <img src에 바인딩 했으며 img 태그에도 alt 속성을 추가했습니다.


사용자 이름을 표시하려면 JSX 중괄호 {user.name}을 사용합니다. 


사용자의 Twitter에 연결 


우리는 데이터를 표시 할 수 있었고 HTML 속성 (src)에도 바인딩 할 수 있었습니다. 다음으로 사용자의 Twitter에 대한 링크를 만들어야 합니다. 우리는 트위터 사용자 이름 (chrisoncode)을 가지고 있습니다. Twitter 링크를 만들려면 다음을 수행 할 수 있습니다.


<a href={`https://twitter.com/@${user.twitterUsername}`}>@{user.twitterUsername}</a>

이를 통해 ES6 템플릿 문자열과 링크를 만들 수 있습니다. 우리는 사용자 이름 (h3)에이 링크를 사용하고 싶으므로 이를 유지할 url 변수를 만들어 보겠습니다.


JSX 템플릿을 반환하기 전에 데이터를 조작할 수 있습니다. 템플릿 리터럴을 사용하여 사용자의 유효한 Twitter URL을 만들 수 있습니다. App() 구성 요소 :


function App() {
     const url = `https://twitter.com/${user.twitterUsername}`;

    return (
    <div className="App">

            {/_ Show user data here _/}

      <ScotchInfoBar />
    </div>
  );
}

우리는 완전한 유효한 URL을 가지고 있으며 컴포넌트에서 반환 된 JSX의 맨 아래에 트 리뷰 페이지에 링크 된 앵커 요소에 href로 전달합니다.


function App() {
  const url = `https://twitter.com/${user.twitterUsername}`;

  return (
    <div className="App">
      {/_ Show user data here _/}
      <div className="user-deets">
        <h3>
          <a href={url}>{user.name}</a>
        </h3>

                // User data here

        <p>
          <strong>Twitter</strong>{' '}
          <a href={url}>@{user.twitterUsername}</a>
        </p>
      </div>

      <ScotchInfoBar />
    </div>
  );
}

결론


우리는 우리 구성 요소에 사용자 객체의 데이터를 표시 할 수 있습니다!



JSX