[React] 리액트 기초 공부-JSX 문법

2.4 JSX 문법

2.4.2 자바스크립트

1. JSX 안에서는 자바스크립트 표현식을 쓸 수 있다. {}로 감싸면 된다.

import React, {Component} from 'react';

class App extends Component{
  render(){
    const text = 'are you good';
    return (
        <div>
              <h1>hello react</h1>
              <h2>{text}</h2>
          </div>
    );
  }
}

export default App;

노트. ES6의 const와 let

1) const : 한번 지정하면 변경이 불가능한 상수를 선언할 때 사용
2) let : 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드
3) ES6 이전에는 var 키워드 사용, var의 scope는 함수 단위, 이게 어떤 것을 의미하는지 봅시다.

function myFunction(){
  var a = "hello";
  if(true){
    var a = "no";
    console.log(a); // no
  }
  console.log(a); // no 
}
myFunction();

보여지는 현상  
>> if block 안에서 a를 생성하여 "no"를 할당하고 출력  
>> if block을 빠져 나와도 a에는 "no"가 담겨 있음

나름 대로의 해석  
>> if block 내부에서만 유효한 지역변수가 생성되는 것이 아니라,  
>> a = "no"; 와 같은 할당만 이루어지는 것 같음, 'var a = "no";'의 var는 의미가 없는 것이지.

4) let, const는 scope가 블록 단위임, 함수 단위가 아니라

function myFunction(){
  let a = 1;
  if(true){
    let a = 2;
    console.log(a); //2
  }
  console.log(a); // 1
}
myFunction();

2.4.3 if 문 대신 조건부 연산자

1. JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다.
2. JSX 밖에서 if문을 사용하거나, {} 안에 삼항 연산자를 사용하면 된다.
3. {condition ? "when true" : "when false"}
4. false일 때, 보여줄 게 없다면 {condition ? "when true" : null}
5. 위는 다음과 같다. {condition && "when true"}

2.4.5 인라인 스타일링

1. 리액트에서는 CSS 스타일을 JS 객체 형식으로 만들어서 적용한다.

import React, { Component } from 'react';

class App extends Component{
  render(){
    const text = "hello world";
    const condition = true;
    const style = {
      backgroundColor: 'gray',
      border: '1px solid black',
      height: Math.round(Math.random() * 300) + 50,
      width: Math.round(Math.random() * 300) + 50,
      WebkitTransition: 'all',
      MozTransition: 'all',
      msTransition: 'all'
    };

    return(
      <div>
        <h1>hello react</h1>
        <h2>{text}</h2>
        {condition && 'show what you got'}
        <div style={style}></div>
      </div>
    );
  }
}
export default App;

// js의 객체 key에서는 '-'를 사용할 수 없다네 
// background-color는 backgroundColor와 같이 바꿔서 작성한다. 
// 웹 브라우저 prefix인 -mos, -webkit을 사용할 때는 Mos, Webkit으로 바꿔서 사용
// 예외적으로 -ms는 소문자로 시작하게, ms

2.4.6 class 대신 className

.my-div{
  background-color: aqua;
  font-size: 15px;
}

// css 문법 .my-div는 어떤 의미인가?
// 선택자라는 것을 공부하면 된다.
// .my-div에서 .은 class 선택자
// 스타일을 한 그룹의 요소에 적용할 때, class를 사용한다. 

2.4.7-8 꼭 닫아야 한다, 태그. && 주석

1. JSX에서는 Virtual DOM에서 트리 형태의 구조를 만들어야 하기 때문에 모든 코드를 닫아준다.
2. self-closed 요소 내부에서만 주석을 작성할 수 있다.

<div>
  // 이건 추석으로 처리되지 않는다.
</div>
<div
    // 이건 주석으로 처리된다.
    // 그리고 아래와 같이 />가 꼭 새 줄에 있어야만 합니다.
/>