[React/리액트] JSX(JavaScript XML) | CSS 부트스트랩 적용(className), 삼항 연산자(list.map())

 

 
 
 

부트스트랩 CSS 사용

<div className="card card-body bg-light mb-3">
  {x} + {y} = {x + y}
</div>

 

className 속성을 사용하여 부트스트랩 클래스를 요소에 추가할 수 있다.
card, card-body, bg-light, mb-3는 부트스트랩의 클래스 이름이다. 
 
 

컴포넌트 내부에서 직접 스타일 적용

<div style={{ backgroundColor: 'lightgray', padding: '10px', marginBottom: '10px' }}>
  {x} + {y} = {x + y}
</div>

 
style 속성을 사용하여 인라인 스타일을 설정할 수 있다.
스타일은 객체 형태로 전달되며, CSS 속성 이름은 카멜 케이스 형태로 작성되어야 한다.
 
 
 

---

 

삼항 연산자 

// 기본 구조
condition ? valueIfTrue : valueIfFalse

반응형

const CountryList = function() {
  const list = [
    { no: 1, country: '이집트', visited: false },
    { no: 2, country: '일본', visited: true },
    { no: 3, country: '콜롬비아', visited: false },
    { no: 4, country: '독일', visited: false }
  ];

CountryList 함수 컴포넌트는 국가 리스트를 나타내는 역할을 한다.
 
 

  let countries = list.map((item, index) => {
    const countryClass = item.visited ? 'list-group-item active' : 'list-group-item';
    return (
      <li key={item.no} className={countryClass}>{item.country}</li>
    );
  });

 
list.map()를 사용하여 국가 리스트를 JSX 요소로 변환한다.
각 국가 객체를 item으로 받아서 JSX 요소로 변환하는 과정을 진행한다.
 
방문한 나라라면?  
방문한 나라일 경우에는 특정한 스타일이 적용되고, 방문하지 않은 나라는 일반적인 스타일로 출력된다.

 
 

return (
    <ul className="list-group">{countries}</ul>
  );
};

return 문에서 변환된 JSX 요소를 출력한다.