[React] JSX 규칙

JSX는 리액트 컴포넌트를 작성하면서 return 문에 사용하는 문법

HTML과 비슷하나 자바스크립트 객체.

​

JSX 규칙

1. 태그는 반드시 닫아줘야 한다.

빈요소인 경우 xml 방식으로 처리

<input type="text" />

​

2. 최상단에서는 반드시 div 혹은 Fragment(<>) 로 작성

<> <p>hello react!</p> <input type="text" /> </>

​

3. JSX 안에서 자바스크립트 값을 사용하고 싶을때는 { }를 사용

<div> hello {name} </div>

 

​

4. 조건부 렌더링을 하고싶으면 &&연산자나 삼항 연산자를 사용 권장

<div> { true ? console.log('참') : console.log('거짓') } </div>

​

5. 인라인 스타일링은 항상 객체 형식으로 작성

<div style={{ backgroundColor: 'red' }}>react</div>

 

6. 별도의 스타일파일을 만들었으면 class 대신 className 을 사용

<div className="style">react</div>

 

7. JSX의 주석은 {/* */}을 사용. (js 내부에서의 주석은 //)

<div> {/* 주석은 이렇게 */} <h1>react</h1> </div>​