[SeSAC] JSX

JavaScript 코드와 XML(HTML)이 혼용될 수 있는 파일 확장자이다

JS 기반 문법에 HTML을 작성할 수 있다.

JS를 사용해도 되지만 JS코드에서 HTML을 작성하는 과정의 번거로움을 덜어주는 역할을 한다.

HTML을 함수에 담아 재사용 할 수 있기 때문이다

Component

컴포넌트란 재사용 가능한 UI 요소를 의미한다.

렌더링이 가능한 요소를 반환하는 함수에 구성된다.

다시 말하면 JSX 요소를 반환하는 함수를 리액트에서는 컴포넌트라고 한다.

HTML에서 사용했던 태그처럼 사용이 가능하여 UI 요소를 다룰 때 유용하다.

규칙

하나의 루트 엘리먼트로 반환

function App() {
  return ( 
    <h1>제목</h1>  // 에러 발생
    <p>내용</p>
  );
}

export default App;

단 하나의 엘리먼트로 감싸진 구조로 반환이 되어야 한다.

function App() {
  return (
    <div>
      <h1>제목</h1>
      <p>내용</p>
    </div>
  );
}

export default App;

혹은 태그로 감싸면 을 제외한 내부 태그들이 출력된다

이름을 생략해 <></>으로 작성해도 무방하다

function App() {
  return (
    <>
      <h1>제목</h1>
      <p>내용</p>
    </>
  );
}

export default App;

모든 태그는 닫아야 한다.

function App() {
  return (
    <>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      > // 에러발생
    </>
  );
}

export default App;

단일 태그에 경우 꼭 '/' 기호로 닫아주어야 한다.

function App() {
  return (
    <>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      /> // 닫아주어야 정상동작한다.
    </>
  );
}

export default App;

대부분 Camal Case로 속성 작성

CSS의 background-color를 JS로 하면 backgroundColor로 작성한다.

'-'(마이너스)는 연산이 가능한 기호이기 때문에 혼동을 제한하기 위함이다.

또한 JS 예약어로 되어있는 속성들은 일부 바뀌어 작성된다

class 속성 -> className

for 속성 -> htmlFor

checked 속성 -> checked={true}

{}의 활용

변수 || 리턴이 있는 함수 || 3항연산자 || 문자열 || Object 등 값이 존재하는 경우에는 사용 가능하다
중괄호 안에 원하는 값을 넣어 JS에서 사용되는 값을 전달하게 된다.

• 요소(태그)의 속성

function App() {
  // 각각의 변수에 데이터를 저장하고 있고
  // 필요에 따라 데이터를 변경하는 것도 가능하다!
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';

  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}
export default App;

• 태그의 내용

function App() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}
export default App;

• 삼항 연산자

function App() {
  const grade = 80;
  return (
    <h1>
      I got {grade} on this exam, and I got
      {grade > 60 ? " pass" : " fail"}
    </h1>
  );
}

export default App;

• Object

function App() {
//  cosnt style = {
//       backgroundColor: "black",
//       color: "pink",
//      }
  return (
    <ul
    // style={style}
      style={{
        backgroundColor: "black",
        color: "pink",
      }}
    >
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

export default App;

• 함수 return

function add(a, b) {
  return a + b;
}

function App() {
  return (
    <h1> 두 수의 합 : { add(5, 7) }</h1>
  );
}

export default App;

조건문

크게 3가지 방법이 있다.

• if문

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
    // return null; // 아무것도 표시하지 않을 수 있음
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

• 삼항 연산자

function Item({ name, isPacked }) {
  return (
    <li className="item">{isPacked ? <del>{name + " ✅"}</del> : name}</li>
  );
}

• 논리 연산자

function Item({ name, isPacked }) {
  return (
    <li className="item">{name} {isPacked && "✅"}</li>
  );
}

논리 연산자의 경우 ON || OFF로 생각하면 좋다
boolean 값이 true 일 경우 체크 이모지가 추가되고 반대면 보여지지 않는다