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>
);
}결론
우리는 우리 구성 요소에 사용자 객체의 데이터를 표시 할 수 있습니다!
등록된 댓글이 없습니다.
