React JSX ( JavaScript + XML ) 연습

 삼항연산자 써보기

 

1) number 에 1 이라는 값을 할당해주고

 

2) 삼항연산자 조건을 써서  number 라는 값이 10 보다 크면 첫번째 조건인  ' ( number ) 은 10 보다 크다 ' 를 출력하고

 number 가 10 보다  작을시  ' ( number ) 은 10 보다 작다 ' 를 출력 .

 

3 ) number 에 할당 되있는 값은 1 이므로 , 두번째 조건에 해당되서 출력시켜보면 

 

1 은 10 보다 작다.   라는 문장이 출력 된다.

 

 

 

---

React 에서 class 를 쓸때

 * React에서 class를 쓸때는 className 로 써줘야함.

 

---

 

 

* 문장에 색깔 주기 

import React from 'react'

export default function App() {

  const number = 1;

  const pTagStyle = 

    color: "green",

  };

  return (

    <div className="test-class">

 

      <p style={pTagStyle}>안녕하세요 리액트입니다.</p>

      

  </div>

  );

}

 

pTagStyle 이라는 변수 를 만들어주고 색상지정해주기.

색상을 바꾸고싶은 문장에 스타일을 주고 {} 를 열어서 pTagStyle 사용.     

 

<p style={pTagStyle}>안녕하세요 리액트입니다.</p>