[React] JSX (JavaScript eXtension)

---

 

#1. JSX

1. JSX의 개념

1) JSX란?

• JavaScript eXtension의 약자로 리액트에서 사용 가능한 자바스크립트 확장 문법이다.
• 리액트에서는 HTML을 표현할 때 JSX를 사용하여 표현한다.
• 겉으로 보기엔 HTML과 다를게 없어 보이지만, 빌드 시 Babel에 의해 자바스크립트로 변환된다.
• 자바스크립트 코드를 HTML 처럼 표현할 수 있다는게 장점이다.
• JSX는 공식적인 문법이라고 할 수는 없다.

 

2) JSX 사용 시 주의사항

• HTML 요소에 class 값을 정의할 때는 class="" 를 사용하지 않고 className="" 을 사용한다.
  • class 단어는 ES6의 클래스 문법과 겹치는 예약어이기 때문이다.
• 요소에서 이벤트를 핸들링하는 onclick 같은 단어는 onClick 처럼 카멜표기법을 사용해야 한다.
• 주석은 <!-- 주석 --> 이 아닌, {/* 주석 */} 을 사용한다.
• HTML Custom-Element는 <my-element>와 같이 표기했지만, React에서는 <MyElement /> 와 같이 Pascal Case로 표기한다.
• JSX 내부에서 JS를 사용할 때는 { }를 사용한다. {console.log("example")}
• HTML에서는 닫는 태그 </>를 안붙여도 오류가 안나지만, JSX에서는 오류가 발생한다.
  • 반드시 닫는태그를 명시해야한다. (ex <hr> → <hr />)

 

2. JSX 사용하기

1) 요소 사용하기

const Example = () => {
  return (
  
    <div>
      <h1>example1</h1>
      <h2>example2</h2>
    </div>
    
  );
};

• 컴포넌트에 여러 요소가 있다면(2개 이상) 반드시 부모 요소로 감싸는 형태여야 한다. (보통 <div />로 감싼다)
  • 리액트의 Virtual DOM은 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

※ 어떤 태그라도 Self-closing tag가 가능하다.

<input> → <input />
<div></div> → <div />
<br> → <br />

 

2) 속성 사용하기

• 속성은 항상 쌍따옴표로 감싸야한다.
  • 속성명을 몇몇개 다르게 지정해야하는 것 빼고는 크게 다를게 없다

const Example = () => {
  return (
    <div>
      <h1 className="ex1">example1</h1>
      <h2>example2</h2>
    </div>
  );
};

 

3) 변수 사용하기

• JSX에서 JS를 사용할 때는 { }를 감싸서 사용한다. (변수, 함수 등 호출할 때)
• { } 안에서는 간단한 사칙연산이 가능하다.
• HTML 속성에 변수를 출력할 경우 따옴표를 사용하면 안된다.

const Example = () => {

  // === 사용자 정의 함수 === //
  const name = "React";
  const num = 1;
  const color = "#f00";

  return (
    <div>

      {/* 기본 변수 출력하기 - 간단한 사칙연산 가능 */}
      <h3>
        {name} 공부중! <br />
        {num} + 1 = {num+1}
      </h3>

      <p>
        {/* 속성값은 쌍따옴표로 감싼다. */}
        이 색은 <font color="#00f">파랑색</font>입니다.<br />

        {/* HTML 속성에 변수를 출력할 경우 따옴표를 사용할 수 없다. */}
        이 색은 <font color={color}>빨간색</font>입니다.
      </p>

    </div>
  );
};

 

4) 함수 사용하기

• { } 에 감싸서 함수를 호출한다. (함수 사용방법은 JS와 동일)

const Example =() => {
  
  // === 사용자 정의 함수 === //
  const myEllipsis = (num) => {
    
    const myNumber = 5;
	
    // myNumber가 매개변수 값보다 작을 경우 myNumber 리턴, 그렇지 않으면 매개변수 값 리턴
    if(myNumber < num) {
      return myNumber;
    } else {
      return num;
    }
  };

  return (
    <div>
      {/* 사용자 정의 함수 호출하기 */}
      <p>{myEllipsis(10)}</p>
    </div>
  );
};

 

5) 조건분기

- AND(&&) 연산자

• 조건 && 조건이 참인 경우 출력할 내용 형식으로 사용
• AND 연산자는 모든 조건이 참이 되어야 참이기 때문에 하나라도 거짓인 경우 출력하지 않는다.

const Example = () => {
  
  const isLogin = true;

  return (
    <div>
    
      {isLogin === true && <p>로그인 되셨습니다.</p>}
      {isLogin === false && <p>로그인 해주세요.</p>}
      
    </div>
  );
};

// 로그인 되셨습니다. 출력

 

- OR(||) 연산자

• 조건 || 조건이 거짓인 경우 출력할 내용 형식으로 사용
• 조건이 참인 경우 표시되는 내용이 없다.
  
  • 즉, 조건이 거짓일 경우에 내용을 출력하고자 할 때 사용한다.

const Example = () => {
  
  // 출력할 내용이 없는 경우
  // -> undefined, null, 0, false, ""(빈문자열) 중 하나를 return 할 경우 정상적인 화면 렌더링이 이루어 지지 않음
  // 특히 undefined 변수를 바로 리턴하는 경우 에러 발생
  const articleList = undefined;

  return (
    <div>
	
      {/* 처음부터 거짓이지만, or 연산자는 하나만 참이여도 참이기 때문에 출력한다. 그래서 조건이 거짓인 경우 사용 */}
      {articleList || <p>조회된 게시글이 없습니다.</p>}

    </div>
  );
};

// 조회된 게시글이 없습니다. 출력

 

- 삼항 연산자

• {조건 ? (조건이 참인 경우 출력할 내용) : (조건이 거짓인 경우 출력할 내용)} 형식으로 사용한다.
• 조건이 거짓인 경우를 사용하지 않고자 한다면 null 을 사용한다. ({조건 ? 참 : null})

const Example = () => {
  
  const isLogin = true;

  return (
    <div>
      {
        isLogin === true ?
        <button type="button">로그아웃</button> :
        <button type="button">로그인</button>
      }
    </div>
  )
};

// 로그아웃 버튼 출력

 

6) 반복문 사용하기

• 반복적으로 처리되는 컴포넌트 요소는 각 항목을 식별하기 위해 고유한 값을 갖는 key 속성을 포함해야한다. (React 권고사항)

const Example = () => {
  
  // 목록정의 태그를 구성하기 위한 사용자 정의 함수
  const createListItem = (count) => {
    // <li>...<li> 단위를 저장할 배열
    let li =[];

    // 주어진 count 수 만틈 저장할 배열
    for(let i = 0; i < count; i++) {
    // 반복적으로 처리되는 컴포넌트 요소는 각 항목을 식별하기 위해 고유한 값을 갖는 key 속성을 포함해야한다. (React 권고 사항)
      li.push(<li key={i}>item-{i}</li>);
    }

    return li;
  };

  return (
    <div>
      {/* 함수 호출 */}
      <ul>{createListItem(5)}</ul>
    </div>
  );
};