ch02. JSX 문법(1)

JSX 문법

1) 감싸인 요소

• 컴포넌트에 여러 가지 요소가 존재한다면 반드시 부모 요소 하나로 감싸야한다.
• virtualDOM에서 컴포 너트 변화를 감지해낼떄 효율적으로 비교 가능하게 컴포넌트 내부는 하나의 DOM트리구조로 이루어져야 되는 규칙이 존재하기 때문
• 반드시 div요소를 사용하지 않고 리액트 v16이상부터 도입된 Fragment기능 사용해도 된다.
• fragement는 <>이렇게 빈 값으로도 사용이 가능하다.

function App() {
   /************ 변 환 ************/
   /* 
     return ( //에러 코드 why? JSX는 요소 여러개가 부모요소 하나에 감싸져 있지 않기 떄문
       <h1>리액트 안녕</h1>
       <h2>잘 동작하니?</h2>
     );
   */
   /**** 방법 1 ***/
   /*
   return (
     <div>
       <h1>리액트 안녕</h1>
       <h2>잘 동작하니?</h2>
     </div>
   );
   */
   /**** 방법 2 ***/
   /*
   return (
     <Fragment>
       <h1>리액트 안녕</h1>
       <h2>잘 동작하니?</h2>
     </Fragment>
   );
   */
   /**** 방법 3 ***/
   return (
     <>
       <h1>리액트 안녕</h1>
       <h2>잘 동작하니?</h2>
     </>
   );
}

실행 결과

2) 자바스크립트 표현

• JSX 안에서는 자바스크립트 표현식이 사용 가능하다 -> {}로 코드를 감싸면 된다.

function App() {
  const name = 'Hello 리액트';//한번 선언시 변경이 불가능한 상수 선언
  //let : 동적인 변수를 담을때 사용하는 키워드, var : scope가 함수단위
  function myFunc(){
    var a = 'hello';
    if(true){
      var a = 'bye';
      console.log(a);//bye
    }
    console.log(a);//bye
    //if문 내부에서 새로선언 했음에도 if문 밖에서 a 조회시 변경된 값이 나온다.
    //let, const로 해결
  }
  myFunc();
  function  myFunc2(){
    let a =1;
    if(true){
      let a= 2;
      console.log(a);//2
    }
    console.log(a);//1
    //if문 내부에서 선언된 값이 if문 밖에서 변경 x
    //let a = 1;
    //let a = 2;
    //const a = 1;
    //const a = 2;
    //불가능
  }
  myFunc2();
 
  return (
    <>
      <h1>{name}</h1>
      <h2>잘 동작하니?</h2>
    </>
  );
}

실행 결과