React 공식문서 읽기 [day02 : React 학습하기]

3.  데이터 표시하기

- JSX는 HTML 마크업을 자바스크립트 안에 넣을 수 있게 해줍니다. 

- 중괄호( Curly braces ){} 는 HTML 마크업에서 자바스크립트로 "이스케이프(escape, 다른 환경으로 이동한다.)"하여 코드에서 일부 변수를 "임베드(embed, 다른 곳에 끼워넣다.)"하여 사용자에게 표시할 수 있습니다.

위에 적은 중괄호에 대한 설명을 Chat GPT가 적절한 문장으로 표현해주었다.

"중괄호 {} 는 자바스크립트 세계로 돌아가는 문이에요." 

 

그렇다 JSX에서 중괄호{}는 HTML마크업에서 자바스크립트의 변수를 사용할 수 있게 해준다.

 

예를 들어,

className="avatar"는 "avatar" 문자열을 CSS로 전달하는 방식이고,

src={ user.imageUrl }는 자바스크립트 user.imageUrl 변수 값을 읽은 다음 해당 값을 src 로 전달( passes)합니다.

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

 

다음 예시로 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 중괄호 안에 있는 일반 {} 객체입니다. 스타일이 자바스크립트 변수에 의존하는 경우 style 어트리뷰트를 사용할 수 있습니다.

 

4-1. 조건부 렌더링( Conditional rendering )

React에서 조건문을 작성하는 데에는 특별한 문법이 필요 없습니다. 일반적인 자바스크립트 코드를 작성할 때 사용하는 것과 동일한 방법을 사용합니다.

 

예를 들어 if 문(혹은 조건부 삼항연산자( the conditional operator ))을 사용하여 조건부로 JSX를 포함할 수 있습니다.

let content;
 // IF 조건문 사용 예시
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

// 조건부 삼항연산자 사용 예시
<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

 

 

4-2.목록 렌더링( Rendering Lists )

컴포넌트 리스트를 렌더링하기 위해서는 for 반복문 및 map() 함수와 같은 자바스크립트 기능을 사용합니다.

 

예를들어, 제품 배열(array)을 map()함수를 통하여 <li>태그로 변환합니다.

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

 * <li>에 key 어트리뷰트가 있는 것을 주목하세요.

key={product.id}는 React에서 리스트를 렌더링할 때  목록의 각 항목에 대해서 형제 항목 사이에서 해당 항목을 고유하게 식별하는 문자열 또는 숫자를 전달해야 합니다. React는 나중에 항목을 삽입, 삭제 또는 재정렬할 때 어떤 일이 일어났는지 알기 위해 key를 사용합니다.