JSX로 UI 표현하기

 

 

 

 

 

 

JSX (JavaScript eXtenstions)

: 확장된 자바스크립트 문법

 

 

변수 값 활용하기

{ 변수 }

• 컴포넌트 내부에 변수를 선언하고, 그 변수의 값을 {중괄호}를 이용하여 html로 렌더링하도록 만들 수 있다.

 

 

 

 

 

📌 주의사항

 

1. {중괄호} 내부에는 Javascript 표현식만 넣을 수 있다.

• 숫자, 문자열, 삼항 연산자(? 조건문), 변수명 등 ⭕
• if문, for문 불가 ❌

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

    return (
        <main>
            <h1>main</h1>
            <h2>{ number % 2 === 0 ? "짝수" : "홀수" }</h2>
        </main>
    );
};

 

 

 

 

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

• boolean형, null, undefined 불가 ❌

{ number % 2 === 0 ? "짝수" : "홀수" } // O
{10} // O
{number} // O
{[1, 2, 3]} // O
{true} // X
{undefined} // X
{null} // X

 

 

3. 객체(object)는 렌더링 불가❌

👉 점 표기법 (객체.key)을 사용해야 가능⭕

const obj = { a: 1};

{obj} // X
{obj.a} // O

 

 

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

• <img> 주의
  (<img>는 html에선 닫지 않고 사용해도 되지만, JSX에서는 반드시 닫아야 함)
• 최상위 태그는 반드시 하나여야 한다.
  <div></div>태그(태그를 다 묶음) or <></>(태그가 흩뿌려져 있음) 사용

 

 

---

 

 

조건에 따라 다른 UI 보여주기

• 삼항 연산자(?) 사용

const Main = () => {
    const user = {
        name: "이정환",
        isLogin: false,
    }

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

 

 

• if문 사용

const Main = () => {
    const user = {
        name: "이정환",
        isLogin: false,
    }

    if (user.isLogin) {
        return <div>로그아웃</div>
    } else {
        return <div>로그인</div>
    }
};

 

 

 

---

 

 

JSX에서 CSS 적용하기

 

1. CSS를 줄 태그에 className 설정

<div className="logOut">로그아웃</div>

 

 

2. CSS 파일에서 스타일 설정

.logOut {
    background-color: red;
}

 

 

3. import로 CSS 파일 연결하기

import "./CSS 파일명";

• 컴포넌트에서 CSS 파일을 불러올 때는 import 뒤에 파일 경로만 입력해도 됨

import './App.css'

 

 

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트