유용한 JSX 문법 알아보기

JSX문법은 {}중괄호 안에 유효한 모든 Javascript 표현식을 넣을 수 있다.

---

표현식(expression) : 값을 산출하는 구문

구문이란?

• 프로그램을 구성하는 기본 단위
• 즉, 구문이란 리터럴을 사용해 표현식을 작성하고 값을 처리하기도 하는 명령문

값 : 표현식의 결과

1
10 + 10

표현식

// 숫자 표현식
10;
10 + 20;

//문자 표현식
("hello");
"hello" + "world";

//논리 표현식
30 > 20;
10 < 20;

//할당 연산자를 통한 표현식
i = 10;
total = 0;
fruits[1] = "apple";

// 함수 호출 표현식
sayHello();

**리터럴**

```jsx
1; //정수 리터럴
'Hello'; //문자열 리터럴
[1, 2, 3]; // 배열 리터럴
{age : 27}; // 객체 리터럴
function() {} //함수 리터럴

JSX에서 변수 넣기

name이라는 변수를 중괄호로 감싸 JSX에서 사용할 수 있다.

const name = "8PX";
const App = () => {
  return <div>{name}</div>;
};
// 결과 : 8PX

JSX에서 함수 사용하기

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'jisu',
  lastName: 'kim'
};

const App = () => {
  return <div>{formatName(user)}</div>
}
// 결과 : jisu kim

• 가독성을 위해 JSX를 여러 줄로 나눴다.
• 자동 세미콜론 삽입을 피하고자 괄호로 묶는 것을 권장한다.
• 참고자료 :
  https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi

JSX에서 if문처럼 사용하기

• JSX 내에서는 Javascript 표현식만 사용 가능하다.
• if문은 문장(statments)이므로 삼항 연산자를 사용해야 한다.

const isLogin = true;
const App = () => {
  // isLogin이 True이면 첫번째 요소인 <div>로그인 완료</div>의 표현식을 실행
    // isLogin이 False이면 두번째 요소인 <div>로그인 해주세요</div> 표현식을 실행
    return isLogin ? : <div>로그인 완료</div> : <div>로그인 해주세요</div>}
// 결과 : 로그인 완료

JSX에서 for문처럼 사용하기

for문은 문장이기 때문에 주로 map을 사용한다.

const fruits = ["사과", "감", "배", "딸기"];
const App = () => {
  // fruits를 한바퀴 씩 돌면서 fruits가 끝날 때까지
  // map 안에 있는 함수((fruit) => <div>{fruit}</div>)를 실행함
  // 함수 안에 있는 fruit은 fruits 리스트의 각 요소입니다.
  return fruits.map((fruit) => <div>{fruit}</div>);
};
// 결과 : 사과, 감, 배, 딸기

---

JSX 사용 시 주의 사항📌

1. React import하기

• JSX를 babel이 이해하고, Javascript로 변환하기 위해서는 import React from "react"를 해주어야 한다.

2. HTML처럼 태그를 반드시 닫기

• 태그를 닫지 않으면 컴파일 에러가 발생한다.

function App() {
  return (
    <div>Hello React!
  );
}

// 오류

3. HTML과 달리 반드시 최상위 태그(부모 태그)가 필요

• 그 이유는? 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있다.
• 최상위 태그가 없으면 컴파일 에러가 발생한다.
• 최상위 태그로 div를 사용하기 싫으면 <></> fragment를 사용하면 된다.
• fragment는 브라우저에 나타나지 않는 태그로 element들을 감쌀 때 사용한다.

import React from "react";

function App() {
    return (
        // 컴포넌트 최상위 부모 태그
        <div>
            <div>Hello React!</div>
            <button>button</button>
        </div>
    );
}

export default App;

변수 선언 방식

• 기본적으로 const를 사용하고, 재할당이 필요할 경우 let을 사용한다.
• 그 이유는? 객체를 재할당하는 경우는 흔치 않고, const를 사용하면 재할당을 방지해 주기 때문에 안전하다.
• 참고자료 :
  https://velog.io/@bathingape/JavaScript-var-let-const-차이점

---

참고하면 괜찮을 자료

https://developerntraveler.tistory.com/54