[React] 리액트 JSX 문법정리 및 const, let, var 차이를 알아보자

JSX 문법 정리

① return에는 하나의 엘레멘트만 담을 수 있다.

 

② const, let, var

 

1. const : 한번 선언된 상수는 다시 재정의 할 수 없다.

const good='good';
hello='change good'; // 오류

const good ='good!';
{
  const good = 'inner good!'; 
  console.log(good); // inner good!
}
console.log(good); // good!

괄호안에 good을 선언하였고 const의 scope은 괄호 블록 안에 있기 때문에
괄호를 벗어나 바깥에 good 상수를 선언할 수 있다.

2. let : 선언해도 값이 재정의가 가능하다.

let good ='first good';  // first good
good = 'changed good';

let good='first good';  
let good='second good';

하지만 변수를 두 번 선언하는 것은 불가하다.

3. var : 지역변수로 쓰였는데도 불구하고 변수값이 바깥에서도 변경되어 쓰이지 않는다.

var good ='good!'
function goodMorning() {
  var good ='good in function!';
  console.log(good);
}

goodMorning();
console.log(good);

 

③ 변수 바인딩 {변수}

 

④ JSX if문 사용이 불가능함 그래서 삼항 연산자를 쓴다. {조건 ? "표현식" : "표현식"}

return (
    <div>
      <div>Hello World</div>
      <div>{point >= 60 ? '합격' : '불합격'}</div>
      <div>{name ?? '홍길동'}</div>
      {list.map((data) => (
        <div>{data}</div>
      ))}
    </div>
  );

⑤ 대체 연산자

 

⑥ 반복문 for문법을 많이 쓰지않는다. => 그 이유는 map()이 return 해주기 때문이다.

 

⑦ null과 undefined 자바 스크립트는 초기화 하지 않으면 undefined로 정의된다.

function App() {
  let point = 65;
  let name; // undefied 타입

⑧ 컬렉션 만들기

function App() {
  let list = [1, 2, 3, 4];

⑨ 오브젝트 만들기

const user = {
  id: 1,
  password: '1234',
  work: function () {
    console.log('일한다.');
  },