[React #19] JSX 문법 / 조건 렌더링 / CSS

01. JSX 문법

JavaScript Extensions 확장된 자바스크립 문법
JavaScript와 HTML을 혼용해서 사용할 수 있음
동적으로 특정 변수의 값을 html로 렌더링할 수 있음

✏️ 예시

중괄호를 이용하여 자바스크립트의 값을 html로 렌더링
중괄호 안에는 숫자나 문자열 값으로서 평가될 수 있는 모든 식이 들어갈 수 있음 (ex. 삼항연산자)

const Main = () => {
  const number = 10;
  return (
    <main>
      <h1>MAIN</h1>
      <h2>{number % 2 === 0 ? '짝수' : '홀수'}</h2>
    </main>
  );
};

export default Main;

02. JSX 주의사항

01) 자바스크립트 표현식만 가능

특정한 값으로 평가될 수 있는 식
중괄호 내부에는 조건문이나 반복문을 사용할 수 없음

02) 숫자, 문자열, 배열 값만 렌더링

boolean, undefined, null과 같은 값은 오류를 발생하지는 않지만 렌더링이 되지 않음
객체 자체는 렌더링 할 수 없고, 점표기법을 이용해서 값을 렌더링 할 수는 있음

03) 모든 태그는 닫기

html에서는 <img> 태그는 닫지 않았지만 꼭 닫아줘야 함 <img></img>

04) 최상위 태그는 반드시 하나여야 함

이렇게 최상위 태그가 <div>와 <main> 2개가 되면 오류가 발생함
최상위 태그로 감쌀만한 태그가 없다면 빈 태그로 사용해도 됨 <></>

03. 조건에 따른 화면 렌더링

const Main = () => {
  const user = {
    name: 'peazh',
    isLogins: true,
  };

  // 방법 1
  return (
    <>{user.isLogins ? <button>로그아웃</button> : <button>로그인</button>}</>
  );
  
  // 방법 2
  if (user.isLogins) {
    return <button>로그아웃</button>;
  } else {
    <button>로그인</button>;
  }
};

export default Main;

04. CSS 속성 설정

01) 파일에서 직접 변경

const Main = () => {
  const user = {
    name: 'peazh',
    isLogins: true,
  };

  if (user.isLogins) {
    return (
      <button style={{ backgroundColor: 'aquamarine', border: ' 1px solid' }}>
        로그아웃
      </button>
    );
  } else {
    <button>로그인</button>;
  }
};

export default Main;

02) css 파일 별도 생성

📑 Main.css

.logout {
  background-color: aquamarine;
  border: 1px solid;
}

📑 Main.jsx

import './Main.css';

const Main = () => {
  const user = {
    name: 'peazh',
    isLogins: true,
  };

  if (user.isLogins) {
    return <button className='logout'>로그아웃</button>;
  } else {
    <button>로그인</button>;
  }
};

export default Main;