[React] JSX 기본 문법

1. HTML 기본 태그와 선택자

div와 span

많은 HTML 태그를 외울 필요는 없다. 기본적으로 div와 span만으로도 대부분의 구조를 만들 수 있다.

• div : 블록 요소로, 기본적으로 줄이 바뀐다.
• span : 인라인 요소로, 기본적으로 줄이 바뀌지 않는다.

id 선택자

id는 요소를 식별하기 위한 이름이다. 하나의 페이지에서 고유한 값을 사용하는 것이 원칙이다.

div#no1 {
    color: blue;
}

특정 요소 하나를 선택하고 싶을 때 주로 사용한다.

class 선택자

여러 요소에 같은 스타일을 적용하고 싶을 때 class를 사용한다.

div.my-div {
    color: orange;
}

하나의 class를 여러 요소에서 사용할 수 있기 때문에 공통 스타일을 적용할 때 유용하다.

2. Tailwind CSS와 className

Tailwind CSS에서는 미리 만들어진 CSS 클래스를 조합해서 스타일을 적용할 수 있다.

React의 JSX에서는 class 대신 className을 사용한다.

<div className="border p-2 rounded">
    내용
</div>

일반적인 HTML에서는 class를 사용한다.

<div class="border p-2 rounded">
    내용
</div>

3. const와 let

JavaScript에서는 변수를 선언할 때 const와 let을 주로 사용한다.

const

const는 상수(constant)를 선언할 때 사용한다.

한 번 할당한 값을 다른 값으로 다시 할당할 수 없다.

const age = 20;
// age = 30; // 오류

let

let은 값을 변경하거나 다시 할당할 수 있는 변수를 선언할 때 사용한다.

let age = 20;
age = 30;

4. 배열의 filter()와 map()

JavaScript에서는 배열을 처리할 때 filter()와 map()을 자주 사용한다.

filter()

조건에 맞는 요소만 골라 새로운 배열을 만든다.

const ages = [10, 20, 30];
const rst = ages.filter((age) => age >= 20 && age < 30);
console.log(rst);
// [20]

map()

배열의 각 요소를 원하는 형태로 변환해서 새로운 배열을 만든다.

const ages = [10, 20, 30];

const rst = ages
    .filter((age) => age >= 20 && age < 30)
    .map((age) => age + "살");

console.log(rst);
// ["20살"]

filter()와 map()은 연결해서 사용할 수도 있다.

5. JSX란?

JSX는 JavaScript 코드 안에서 HTML과 비슷한 문법으로 UI를 작성할 수 있도록 해주는 문법이다.

JSX 자체가 JavaScript와 같은 것은 아니다.

React에서는 JSX를 사용해 화면에 표시할 UI를 작성한다.

function App() {
    const ages = [10, 20, 30];

    return (
        <>
            {ages.map((age) => (
                <div>{age}살</div>
            ))}
        </>
    );
}

JSX 안에서 JavaScript의 변수나 표현식을 사용하려면 {}로 감싸준다.

<div>{age}살</div>

배열의 map()도 마찬가지이다.

{ages.map(...)}

map()의 두 번째 매개변수로 index를 사용하면 현재 요소의 순서도 확인할 수 있다.

ages.map((age, index) => (
    <div>{index + 1}번 : {age}살</div>
))

key 속성

React에서 배열을 이용해 반복적으로 JSX 요소를 생성할 때는 key를 지정하는 것이 좋다.

{ages.map((age, index) => (
    <div key={index}>{age}살</div>
))}

key는 React가 각각의 요소를 구분하기 위해 사용하는 값이다.

id는 개발자가 HTML 요소를 식별하기 위해 사용하는 것이고, key는 React가 반복되는 요소를 효율적으로 관리하기 위해 사용하는 것이라는 차이가 있다.