리액트 기초반 1주차(3)

JSX 규칙

1. 태그는 꼭 닫아주기

2. 무조건 1개의 엘리먼트를 반환하기 - 2개여도 안되고 0개여도 안됨(반환값 없으면 null)

3. JSX에서 javascript 값을 가져오려면 {} 중괄호 안에 변수명을 넣어주면 된다.

 * 리턴안에서는 if문을 쓸 수가 없고 삼항연산자는 쓸 수 있다.

4. class이름을 지정할 때 class대신 className을 쓴다.

<div className="App">

5. 인라인으로 style 주기

style도 객체 즉, dictionary로 넘겨줘야한다.

// 중괄호를 두 번 쓰는 이유? 딕셔너리{key: value}도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}