---

JSX

• JavaScript 확장 문법. (JS 모든 기능 포함)
• React와 함께 사용 권장.
• React의 element 생성.
• return 문 안쪽은 JSX, 밖은 JS로 이루어짐.
• 브라우저는 JSX를 이해하지 못하므로, 리액트 앱을 배포할 때는 빌드($ npm run build )를 통해 HTML, CSS, JS로 트랜스파일링.

const element = <h1>Hello, world!</h1>;

표현식

• JSX의 중괄호 {} 안에는 모든 JS 표현식(값으로 평가받는 문) 삽입 가능. (표현식에 대한 내용은 여기)

const name = 'Minsu Park';
const element = <h1>Hello, {name}</h1>;
// Hello, Minsu Park

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: 'Harper',
  lastName: 'Kim',
};
const element = <h1>Hello, {formatName(user)}!</h1>;
// Hello, Harper Kim!

• 태그 속성(어트리뷰트)에도 표현식 삽입 가능.
• 단, 태그 속성에 삽입 할 때 중괄호 주변에 따옴표를 입력하지 않음.
• 동일한 속성에는 따옴표(문자열) 또는 중괄호(JS표현식)는 둘 중 하나만 사용 가능.

const element = <img src={user.avatarUrl}></img>;

표현식이 아닌 문(statement)

• JSX 또한 하나의 표현식.
• JSX 내부에서는 조건문, 반복문 등(표현식이 아닌 문) 사용 불가.
• 단축평가, 삼항연산자, 배열 내장 메서드 등으로 대체.

// 삼항연산자 내부에 JSX 위치 예시.
{sale ? <div className='alert alert-warning'>2초이내 구매시 할인</div> : null}

• IIFE(즉시실행함수), 화살표함수에서는 조건문과 반복문을 JS와 동일하게 이용 가능.

// event handler 내부의 화살표함수 예시.
<button
  onClick={() => {
    setLoading(true);
    setMoreButton((moreButton += 1));
    if (moreButton === 1) {
      axios
        .get('https://codingapple1.github.io/shop/data2.json')
        .then((data) => {
          const arr = [...shoes, ...data.data];
          setShoes(arr);
          setLoading(false);
        })
        .catch(() => {
          console.log('실패함ㅅㄱ');
          setLoading(false);
        });
    } else if (moreButton === 2) {
      axios
        .get('https://codingapple1.github.io/shop/data3.json')
        .then((data) => {
          const arr = [...shoes, ...data.data];
          setShoes(arr);
          setLoading(false);
        })
        .catch(() => {
          console.log('실패함ㅅㄱ');
          setLoading(false);
        });
    } else {
      alert('더 이상 상품이 없어요~~');
      setLoading(false);
    }
  }}>
  더보기
</button>;

camelCase

• JS에 가깝기 때문에 camelCase 명명 규칙 사용.
  • JSX에서 class 는 className 으로 명명.
• 단, 컴포넌트는 PascalCase 명명 규칙 사용.

태그

• 태그는 항상 닫혀야 함.
• 태그에 내용이 없을 때에는, Self Closing 태그를 이용.

  <Hello />
  <Hello />
  <input />
  <br />;

• 두개 이상의 태그는 무조건 하나의 태그로 감싸야함.

<div>
  <Hello />
  <Hello />
  <Hello />
  <input />
  <br />
</div>;

• 스타일 관련 설정 등의 이유로 <div> 태그로 감싸기 어려울 땐 Fragment 사용.

<>
  <Hello />
  <Hello />
  <Hello />
  <input />
  <br />
</>;

inline style

• inline style 지정시 객체형태로 작성.
• 또한 style 속성은 모두 camelCase로 명명.

<div
  style={{
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24,
    padding: '1rem',
  }}>
  inline style 예시
</div>;

---