[React.js] JSX로 UI 표현하기

JSX란

JavaScript에서는 함수가 HTML을 리턴하도록 만들수가 없다.

JS에서 HTML을 리턴하도록 만들면 문법적인 오류로 판단하기 때문에

그래서 React에서는 JSX라는 확장된 자바스크립트 문법을 사용한다.

JSX를 사용하면

const Main = () => {

    return (

        <main>

            <h1>main</h1>

        </main>

    )

}

이런식으로 JavaScrip와 HTML을 혼용하여 사용할수 있다.

const Main = () => {

    const number = 10;

    return (

        <main>

            <h1>main</h1>

            <h2>{number}</h2>

        </main>

    )

}

JSX에서는 이런식으로 변수에 데이터를 HTML에 박아넣을수 있다.

const Main = () => {

    const number = 11;

    return (

        <main>

            <h1>main</h1>

            <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>

        </main>

    )

}

const Main = () => {

    const number = 10;

    return (

        <main>

            <h1>main</h1>

            <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>

        </main>

    )

}

이런식으로 삼항연산자를 사용해서도 확용할수 있다.

 

JSX 주의 사항

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

      ㄴ if 문이나 for문은 사용할 수 없다.

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

      ㄴ null, undefined, true 를 사용하였을때 정상적으로 렌더링되지 않는다.

      ㄴ const obj = { a:1 } 형태의 오브젝트를 그대로 렌더링 하려했을때는 오류가 발생한다.

      ㄴ 오브젝트 형식의 값을 렌더링 하고싶을때에는 { obj.a } 객체의 값을 넣어주면 정상적인 렌더링이 된다.

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

      ㄴ <img> 이러한 형태로 그대로 마칠경우 에러메세지가 출력된다.

      ㄴ <img></img> 형태로 반드시 태그를 닫아야 한다.

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

      ㄴ 최상위 레벨에 태그가 두개 이상이 된다면 에러 메세지를 출력한다.

const Main = () => {

    const number = 10;

    return (

        <main>

            <h1>main</h1>

            <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>

        </main>

        <div>

           

        </div>

    )

}

이런식으로 최상위 레벨에 태그가 두개이상이 있으면 안된다.

만약 이렇게 써야한다면

const Main = () => {

    const number = 10;

    return (

        <>

            <main>

                <h1>main</h1>

                <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>

            </main>

            <div>

               

            </div>

        </>

    )

}

이런식으로 빈태그로 묶어줘도 된다.

HTML 렌더링에 조건 걸기

const Main = () => {

    const user = {

        name : "김태희",

        isLogin : true

    }

    if (user.isLogin) {

        return <div>로그아웃</div>

    } else {

        return <div>로그인</div>

    }

    // return (

    //     <>

    //         {user.isLogin ? <div>로그아웃</div> : <div>로그인</div>}

    //     </>

    // )

}

이런식으로 삼항연산자를 사용해도되고

if문을 사용해도 됩다.

isLogin 값이 true이면 로그아웃을

isLogin 값이 false이면 로그인을 출력하게 된다.

Dom요소에 styil 주기

styil 주는 방법에는 2가지가 있다.

첫번째는 태그에 바로 작성하는 방법이고

return <div style={{

            backgroundColor: "red",

            borderBottom: "5px solid blue",

        }}>로그아웃</div>

(결과)

이런식으로 styil을 주면 되는데

css코드 작성하듯이 background-color, border-bottom 이렇게 작성하면 안된다.

backgroundColor, borderBottom -을 빼고 뒤에 대문자로 표기하는 기법인

카멜 표기법(Camel Case)를 사용해야 한다.

 

두번째는 css 파일을 만들어 주는 방법이 있다.

Main.css

.logout{

    background-color: red;

    border-bottom: 5px solid green;

}

Main.jsx

import "./Main.css"

const Main = () => {

    const user = {

        name : "김태희",

        isLogin : true

    }

    if (user.isLogin) {

        return <div className="logout">로그아웃</div>

    } else {

        return <div>로그인</div>

    }

 

}

이렇게 Main.css를 임포트 해서 사용하면 된다.

JSX에서 class이름을 설정할때 class가 아닌 className을 사용한다

JSX에서는 Javascript와 HTML을 같이 쓰기 때문에 예약어인 class를 사용할 수 없기 때문에

className으로 사용을 한다.