[React를 다루는 기술] 2장 - JSX

JSX란?

• 자바스크립트의 확장 문법.
• 브라우저에서 실행되기 전에 번들링 되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환된다.

🎯 JSX의 장점

1. 보기 쉽고 익숙하다

    return{
        <div>
            Hello <b>react</b>
        </div>
    }

일반 자바스크립트

    return React.createElement("div",null,"Hello ", React.createElement("b",null,"react"));

1. 높은 활용도

   HTML 태그 뿐 아니라 컴포넌트도 JSX 안에 작성 가능

    return{
        <div>                      // HTML 태그
            <SampleComponent />    // 컴포넌트
        <div>
    }

JSX 문법

1. 감싸인 요소
   • 컴포넌트에 여러 요소가 있다면 부모 요소 하나로 감싸야 한다. ( 트리 구조로 만들기 )
   • 트리 구조로 만들어야 Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적이다.

    return{
        <div>   // 부모 요소 하나로 감싸기
            <h1>첫번째 요소</h1>
            <h2>두번째 요소</h2>
        <div>
    }

1. 자바스크립트 표현
   • { }을 이용해서 JSX안에서 자바스크립트 표현식 사용.

    cosnt name = '리액트';
    return <h1>{name} 안녕!</h1>     // 리액트 안녕!

1. if문 대신 조건부 연산자
   • if문을 사용할 수 없기 때문에 삼항연산자 사용

   cosnt name = '리액트';
   return (
       <div>
           {name==='리액트'} ? (<h1> TRUE </h1>) : (<h1> FALSE </h1>)
       </div>
   )

1. && 연산자를 사용한 조건부 렌더링
   • 특정 조건을 만족할 때만 내용을 보여주고 싶을 때.

    cosnt name = '리액트';
    return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>        // True 일 때만

1. undefined 렌더링하지 않기
   • undefined는 렌더링 되지 않고 오류 발생

   • 방지 하기 위해 OR(

     ) 사용한다.

    const name = undefined;
    return name || '값이 undefined 입니다.'

1. 인라인 스타일링

   • 함수 안에 객체를 이용해 스타일 속성들을 미리 정의할 수 있다.

   • 이 객체를 태그 요소 style 안에 적용 가능하다.

   • 스타일 속성중 하이푼(-)으로 표현되는 속성은 -을 없애고 카멜 표기법으로 작성해아 한다.

    // 스타일 미리 적용
    const style = {
        backgroundColor: 'black'    // camel 표기법
    }

    return <div style={style}>스타일 적용</div>

1. class 대신 className
   • CSS, JS 에서 클래스를 사용할 때 일반적인 class 대신 className을 사용한다.

    return <div className="react">{name}</div>

1. 꼭 닫아야 하는 태그
   • 일반적인 HTML에서 안 닫아도 되는 태그들은 JSX에서는 꼭 닫아야 한다.

    <input>내용</input>
    <input />   // 태그사이에 내용이 없는 경우

1. 주석
   • {/* … */} 사용

### ESLint와 Prettier ###

• ESLint는 문법 검사 도구이다. (도움이 많이 됨)
• Prettier는 코드 스타일 자동 정리 도구이다. (시간 절약에 도움이 됨)