JSX

JSX

• JSX 는 JavaScript XML 의 줄임말로, 리액트에서 UI 를 구성할 때 사용하는 JS 확장 문법이다.
• JSX 는 브라우저가 바로 실행할 수 있는 코드가 아니므로, Babel 이라는 컴파일러를 이용하여 JS로 컴파일 시켜주어야 브라우저에서 읽고 렌더링 시킬 수 있다.
• DOM의 경우 HTML, CSS, JS 를 이용하지만, React DOM 의 경우 JSX, CSS 만으로도 개발이 가능하다.
  → React 를 사용하는 경우 DOM 은 사용하지 않는다.
• JSX는 마크업과 JS를 함께 다루므로, 더 직관적으로 코드를 이해할 수 있다.

컴포넌트

• JSX를 이용하여 만든 마크업과 기능을 한곳에 묶은 코드덩어리(코드셋)

JSX 문법 규칙

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다.
  → 즉, 가장 바깥에 단 하나의 태그만 있어야한다.
  → 하나의 태그에 모든 태그를 담아 리턴해야함.
• 요소에 클래스를 지정하고 싶은 경우 class 가 아닌 className 을 사용하여야한다.
  → class 로 작성할 경우 JS의 class로 인식함
• JS를 작성할때는 반드시 중괄호{} 를 이용하여야 하며, 그냥 작성하는 경우 일반 텍스트로 인식한다.

// JSX
let name = 'KROCK'
const Component = () => { // 대문자로 시작한다.
  return (
    <div> {// 감싸는 태그}
      <div className="class">컴포넌트 내부입니다.</div>
      <div>나의 이름은 {name} 입니다.</div> {// 중괄호 내부는 JS로 읽힌다.}
      <div>컴포넌트 내부입니다.</div>
    </div>
  )
}

• react 엘리먼트를 작성하는 경우 이름을 대문자로 시작해야하며, 소문자로 작성하는 경우 HTML의 엘리먼트로 인식한다.

// JSX

const App = () => {
  return (
      <main>
        <Component />
        <component /> {// 소문자로 작성시, HTML의 빈태그로 판단한다.}
      </main>
  );
};

• if 문을 사용하여 HTML 태그 내부에서 조건부 렌더링(출력)을 해야하는 경우 if 대신 삼항연산자를 사용한다.
• 금지된다기 보다는 가독성의 차이가 큰 것 같다.
• 아래 처럼 작성하면 오류가 발생하지만, 함수로 지정하여 결과값을 리턴받는 형태로 작성하면 (복잡 할 뿐)가능은 하다.

// JSX

const Component = () => { 
   //요기
	return (
    <div>
      {
        if(obj.key === 'name'){
          return '이름입니다.'
        } else {
          return '이름이 아닙니다.'
        }
      }
    </div> {// 안된다.}

    <div>
      {
        obj.key === 'name' ? '이름입니다.' : '이름이 아닙니다.'
      }
    <div> {// 된다.}

• HTML 태그 내부에서 if 문의 결과 값을 사용하고 싶다면, 컴포넌트의 return 위에서 함수를 작성하고 호출하거나, 그 값을 변수에 할당한 변수를 작성하여야 한다.

map()

• 리액트에서 여러 개의 HTML 엘리먼트를 반복하여 일정 형태로 작성하는 경우 map() 을 이용 할 수 있다.
• 이 경우 그 정보들은 객체안에 있는 데이터여야 하며, 해당하는 map() 메소드 내부에 있는 첫번째 요소의 속성값을 감싸는 요소의 key 속성값으로 지정하여야 한다.
• 키가 없는 배열의 특성상 그 인덱스를 key로 사용할 수 있기는 하지만, 배열의 사용은 지양한다.
  (마지막 수단)

//JSX

const objs = [
  { id: 1, content: "content 1" },
  { id: 2, content: "content 2" },
  { id: 3, content: "content 3" }
];

const App = () => {
  return (
    objs.map((obj) => {
    return(
      <div key = {obj.id}>  // 객체의 첫번째값을 key의 속성값으로 가진다.
        <div>{obj.content}</div> // 내부의 내용을 출력한다.
      </div>
      )
    })
  )
}

---

+

JSX 에서 빈태그 작성

• JSX 에서 빈태그를 작성 할 때, 반드시 해당 태그를 끝낸다는 것을 명시적으로 작성해야한다.

const App = () => {
  return (
    <div>
      <img src="주소">  {// 마지막에 '/' 를 작성하지 않으면 오류가 발생한다.}
      <img src="주소" /> 
    <div>
  )
}