[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;

• 파일 경로만 입력해도 자동으로 불러옴
• html에서는 class라고만 했는데 자바스크립트랑 html을 함께 쓰고있기 때문에 html의 예약어인 class를 쓸 수 없어서 className이라고 함

실행화면

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'