리엑트 JSX문법

jsx는 자바스크립트의 확장문법이며 xml과 비슷한 형태입니다. 이러한 형태는 브라우저에서 실행되기전 코드가 바벨을 사용하여 일반 자바스크립트 코드로 변환하여 사용합니다.

여기서 간단한 규칙을 지켜야됩니다.

1. 컴포넌트에 여러 요소가 있더라도 반드시 부모요소 한개로 감싸져야됩니다. 이는 리엑트 v16이상부터 도입된 fragment를 사용해도 됩니다. <></>를사용하여 감싸도 fragment와 같은 효과를 냅니다.

2. 자바스크립트 표현식을 사용하려면 {}로 감싸서 사용하면됩니다. 단순 변수를 가져오기 위해서도 {}를 사용한다면 그 안에 있는 내요을 가져올수도 있습니다.

3. 함수나 클래스형 내부에서는 조건문을 사용가능하지만 JSX내부에서는 if를 사용할수 없습니다. 대신 이항연산자나 삼항연산자를 사용하여 조건을 사용해야됩니다. {}를 사용하는것은 당연합니다.

4. &&연산자를 사용하여 조건부 렌더링이 가능합니다.

5. undefined를 렌더링하면 안됩니다.
   ex) const a=undefined; return a;
   위의 예시는 안되지만 return <>{a}</>는 가능합니다.

6. DOM요소에 스타일을 적용할때는 카멜표기법으로 객체형태로 넣어줘야됩니다.

7. class 는 클래스형 컴포넌트를 지칭하는 것이 되므로 DOM에 클래스를 넣고싶을때는 className으로 넣어주어야됩니디ㅏ.

8. HTML에서는 닫지않는 br태그등이 있지만 리엑트에서는 무조건 닫는태그로 작성해야됩니다. (self-closing)

9. 함수내부에서의 주석은 자바스크립트와 동일하지만 jsx내부의 주석은 {}를 넣어 자바스크립트로 바꾸어 주석을 넣어야됩니다.