TSX

📑TSX란?

TypeScript 와 JSX를 함께 사용하는 파일 형식이다. .tsx 확장자를 사용하며, TypeScript 코드에서 JSX 문법을 사용할 수 있도록 지원한다. React 프로젝트에서 TypeScript를 도입할 때, TypeScript의 타입 검사 기능과 함께 JSX 문법을 활용하기 위해 사용한다.

 

 

📍주의사항

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.

• 자바스크립트 표현식이란 삼항 연산자나 변수의 이름처럼 특정 값으로 평가될 수 있는 코드를 의미한다.
• 중괄호 안에 중괄호를 추가하여 if문이나 for문과 같은 제어문을 작성하면 오류가 발생한다. (if문이나 for문은 한줄로 평가될 수 있는 값이 아니기 때문이다!)

const Main = () => {
    const number = 9;

    return (
        <main>
            <h2>{number + 10}</h2>
            <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>
            {10}
            {number}
            {{if(){}}} //사용불가
            {{for(){}}} //사용불가
        </main>
    );
};

export default Main;

 

2. 숫자, 문자열, 배열 값만 렌더링된다.

• boolean값과 undefined, null 값은 중괄호 안에서 사용하더라도 오류는 발생하지 않지만 화면에 렌더링되지 않는다.

const Main = () => {
const obj = { a: 1 };

    return (
        <main>
            {[1, 2, 3]}
            {true} //오류가 발생하진 않지만 렌더링 x
            {undefined} //오류가 발생하진 않지만 렌더링 x
            {null} //오류가 발생하진 않지만 렌더링 x
            {obj} //오류발생
            {obj.a}
        </main>
    );
};

export default Main;

• 객체 값을 넣는 경우 "객체는 렌더링 할 수 없다"라는 오류가 나오는데 만약 객체를 렌더링을 하고 싶다면 obj.a처럼 점표기법을 사용해 문자열이나 숫자 값이 렌더링 될 수 있도록 수정해줘야한다.

 

3. 모든 태그는 닫혀있어야 한다.

const Main = () => {
const obj = { a: 1 };

    return (
        <main>
           <img></img>
        </main>
    );
};

export default Main;

 

4. 최상위 태그는 반드시 하나여야만 한다.

• 최상위 태그란 리턴문의 소괄호 안에서 가장 높은 위치에 있는 태그를 의미하는데 TSX는 최상위 태그를 하나만 허용한다. 

⭕	❌
const Main = () => { return ( <main> {[1, 2, 3]} </main> ); }; export default Main;	const Main = () => { return ( <div>안녕</div> <main> {[1, 2, 3]} </main> ); }; export default Main;

 

 

🔽UI 표현하기🔽

//App.tsx

import "./App.css";
import Main from "./components/Main";

function App() {
    return (
        <>
            <Main />           
        </>
    );
}

export default App;

//Main.tsx

import cn from "classnames/bind";
import styles from "./Main.module.css";

const Main = () => {
    const cx = cn.bind(styles);

    const user = {
        name: "김철수",
        isLogin: true,
    };


//예시 1
    if (user.isLogin) {
        return <div className={cx("logout")}>로그아웃</div>;
    } else {
        return <div className={cx("login")}>로그인</div>;
    }

//예시 2
    return (
        <>
            {user.isLogin ? (
                <div className={cx("logout")}>로그아웃</div>
            ) : (
                <div className={cx("logout")}>로그인</div>
            )}
        </>
    );
};

export default Main;

로그인 상태일때 (isLogin: true)	로그아웃 상태일때 (isLogin: false)