react_jsx의 특징

JSX 

(javaScript Extensions)
확장된 자바스크립트이 문법을 말함
 
=>  JS 와 html을 혼용 사용 가능 

JSX  주의 사항 
1. 중괄호 내부에는 자바스크립트 표현식만 넣을수있다. - for, if 안됨 , 삼항 연산자는 가능 
2. 숫자, 문자열, 배열 값만 렌더링 된다. -  boolean, undefined, 객체, null 등 안됨 
3. 모든 태그는 닫혀있어야함 
4. 최상위 태그는 반드시 하나여야만한다. 

 

 

 

---

 

 

import "./Main.css";


const Main = () =>{
 
    const user = {
        name : "성공을즐기자",
        isLogin : true,
    };

    if(user.isLogin){
        return (
            <div className="logout">   
                <h1>{user.name}님 환영합니다.</h1>
                <button >로그아웃</button>
            </div>
        );  
    }else{
        return (
            <div>
                <h1>로그인이 필요합니다.</h1>
                <button  > 로그인</button>
            </div>
        );
    }

 
};

export default Main;

 

 

1. user라는 객체를 만들어준다.

2. user의 isLogin의 값에 따라 다른 html를 return 해준다.

3. JSX에서는 class 가 아닌 className이라고 쓴다. 

 

 

 

Main.css를 import해줬다.

main.css는 

.logout{
    background-color: lightblue;
    border-bottom: 5px solid blue;
}

 

 

이렇게 간단하다.

 

그러면 isLogin상태일 때만 logout css가 적용될것이다. 

 

 

---

 

<isLogin 이 true > 

   

 

<isLogin이 false >