[React] JSX

📌JSX 란

• 확장된 JavaScript 문법이다

  < JSX 특징 >

  • JavaScript, HTML 혼용이 가능하다
  • 변수를 만들고, HTML에 {변수명} 이런식으로 렌더링도 가능하다
    여기서의 {변수명}은 숫자, 문자열, 값으로 평가되는 식 다 가능하다

📌JSX 주의사항

1. {} 내부에는 자바스크립트 표현식만 넣을 수 있다

예를 들어서 조건문또는 반복문 등은 사용이 불가하다

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

Boolean undefined null 과 같은 값은 화면에 렌더링 되지 않는다

• (객체 사용할 때)
  ex1. {obj} 이렇게는 사용이 불가하고 키 값도 같이 적어줘야 한다 ex2.{obj.a} 이렇게 사용해야 오류가 안 난다

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

예를 들어서 HTML 일 경우에는 <img> 태그는 닫는 태그가 아니다. 그렇지만 jsx에서는 <img>태그도 셀프 클로징을 해주어야 한다 <img />

4. 최상위 태그는 반드시 1개여야 한다. 태그가 2개 이상일 경우 오류가 발생한다

📌JSX style 속성

1. 요소에 직접 스타일 속성을 설정

• camelCase 표기법으로 작성 해야한다
• return문 안에 style 속성이 많아지면 가독성이 좋지 않은 방법이다
• class는 JavaScript 예약어이기 때문에 className으로 사용해야 한다

<div style = {{backgroundColor : "red",}} //중괄호 두개인 이유는 객체전달 때문이다

//Main.jsx
import '"./Main.css"; //컴포넌트에서 css파일 불러오는 방법인데, import뒤에 파일경로만 불러와도 알아서 불러와줌
const Main = () => {
  const user = {
    name: "이다영",
    isLogin: false,
  };
    
  if (user.isLogin) { // 조건문 사용
    return <div>로그아웃</div>;
  } else {
    return <div>로그인</div>;
  }
  
  return (
    <>
      {user.isLogin ? (// 삼항연산자 사용
        <div className="logout"
       //style={{ 
            //backgroundColor: "red",
       		//boderBotton: "5px solid blue", // 속성이 많아지면 가독성이 좋지 않은 방법
          //}}
        >
          로그아웃
        </div>
      ) : (
        <div>로그인</div>
      )}
    </>
  );
};

export default Main; // 내보내기. 외부에서 파일을 사용할 수 있게 만들어줌

2. 별도의 CSS 파일을 만들어서 스타일 속성 적용

/*Main.css*/
.logout{
	background-color: red;
    border-bottom: 5px solid blue;
}