[React] JSX 기본 규칙과 장단점
JSX는 자바스크립트 확장문법이다. 1. JSX를 사용하는 스크립트 파일은 상단에서 React를 꼭 불러와야 한다. 2. 태그는 꼭 닫혀있어야 한다. <div> 태그를 열었으면 </div>를 사용하여 태그를 꼭 닫아주어야 한다. html에서 <br>태그를 작성 할 때 처럼 태그를 안닫으면 리액트에서는 오류가 발생한다. 3. 최상위 태그는 꼭 1개여야 한다. 작성된 태그들 전부를 하나로 묶는 최상위 태그가 존재해야한다. 다르게 말하면 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다. 가장 간단한방법으로 태그 전체를 <div></div> 태그 안에 넣어 감싸는 것이고 스타일관련 설정을 할 때 혹은 table관련 태그를 작성하면서 문제가 발생될 수 있기 때문에 <Fragment></Fragment> 태그를 이용하여 태그들을 감싼다. Fragment가 에러가 뜰 경우 <React.Fragment></React.Fragment>를 사용하자! React.Fragment의 단축문법으로 <> </> 공백태그가 있다. 공백태그로 감싸도 된다! 4. JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, 논리 연산자를 사용한다. 반면에 if 조건문을 사용할 수는 없다. 만약에 if 조건문을 사용하려면 IIFE(즉시실행함수표현)을 사용해야한다. switch문을 사용하는것은 무관한다. 5. 리액트 컴포넌트에서는 class 대신에 className을 사용한다. 또한 css style 속성을 사용할때는 style='color: red; padding: 20px'등과 같이 작성하지 않고 객체를 사용하여 해당속성을 지정한다. JSX 문법은 중괄호 표기법을 사용하여 값을 출력할 수 있다. #선언시 const style = { backgroundColor : 'black&#