[React] 입문 - JSX로 UI 표현하기

JSX로 UI 표현하기

JSX란?

확장된 자바스크립트 문법을 의미한다.

이렇게 자바스크립트랑 HTML 코드를 혼용해서 작성가능하다. 

 

⚠️ JSX 주의 사항

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

- 자바스크립트 표현식? 삼항 연산자나 변수의 이름처럼 특정 값으로 평가

    중괄호 안에 if문을 작성하면 오류 발생

2. 숫자, 문자열, 배열 값만 랜더링

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

  return (
    <main>
      <h1>main</h1>
      {/* js값을 html로 렌더링하고 싶으면 js코드에 중괄호를 작성해야된다.  */}
      {/* 삼항 연산자도 사용이 가능하다 */}
      <h2>{number % 2 === 0 ? '짝수' : '홀수'}</h2>
      {obj.a}
    </main>
  );
};

export default Main;

 

객체를 랜더링 할 경우

{obj}만 쓰면 오류 발생, 점 표기법을 통해 문자열이나 숫자 값을 렌더링한다. 

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

4. 최상위 태그는 하나여야한다. 

    적절한 태그가 없을 경우 빈태그로 묶어줘도 괜찮다.

 

컴포넌트가 조건에 따라 각각 다른 UI를 렌더링하도록 만들어보기

const Main = () => {
  const user = {
    name: '이정환',
    isLogin: true,
  };
  return <>{user.isLogin ? <div>로그아웃</div> : <div>로그인</div>}</>;
};

export default Main;

조건에 따라 로그아웃, 로그인이 된다.

 

삼항 연산자가 아닌 조건문을 통해 작성가능하다. 

const Main = () => {
  const user = {
    name: '이정환',
    isLogin: true,
  };
  if (user.isLogin) {
    return <div>로그아웃</div>;
  } else {
    return <div>로그인</div>;
  }
  // return <>{user.isLogin ? <div>로그아웃</div> : <div>로그인</div>}</>;
};

export default Main;

DOM 요소에 스타일을 적용하는 방법 → JSX에서는 스타일을 설정하는 두가지 방법

1. 요소에 직접 스타일을 설정하는 방법 → 카멜 케이스 작성

    단점 - 스타일 규칙이 많아질 수록 가독성 나빠진다.

const Main = () => {
  const user = {
    name: '이정환',
    isLogin: true,
  };
  if (user.isLogin) {
    return <div style={{ backgroundColor: 'red' }}>로그아웃</div>;
  } else {
    return <div>로그인</div>;
  }
  // return <>{user.isLogin ? <div>로그아웃</div> : <div>로그인</div>}</>;
};

export default Main;

2. 별도의 CSS 파일을 만들어서 스타일링한다. 

생성한 CSS 파일을 모듈 시스템으로 부터 불러온다. 

main.jsx파일에 import 구문을 작성한다. 

컴포넌트에서 CSS 파일을 불러올때는 import 뒤에 파일의 경로만 입력하면 알아서 불러온다.

 

✔️ className으로 작성하기!

import './Main.css';
const Main = () => {
  const user = {
    name: '이정환',
    isLogin: true,
  };
  if (user.isLogin) {
    return <div className="logout">로그아웃</div>;
  } else {
    return (
      <div div className="logout">
        로그인
      </div>
    );
  }
  // return <>{user.isLogin ? <div>로그아웃</div> : <div>로그인</div>}</>;
};

export default Main;

.logout {
  background-color: red;
}