jsx

리액트 컴포넌트를 작성할 때 쓰는 문법이며, HTML 이랑 비슷하지만 지켜야하는 규칙이 있다.

1. 감싸인 요소

• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 감싸주어야 한다.

2. 자바스크립트 표현

• JSX 안에서는 자바스크립트 표현식을 쓸 수 있다.
  JSX 내부에서 코드를 { } 로 감싸면 된다.

3. if 문 대신 조건부 연산자

• JSX 내부의 자바스크립트에서는 if 문을 사용할 수 없다.
  대신 JSX 밖에서 if 문을 사용에 값을 설정하거나, { } 안에 조건부 연산자(삼항연산자)를 사용하면 된다.

4. AND 연산자(&&)를 사용한 조건부 렌더링

• && 연산자 로 조건부 렌더링을 할 수 있는 이유는
  리액트에서 false를 렌더링할 때는 null 과 마찬가지로 아무것도 나타나지 않기 때문이다.

• 주의 : falsy 한 값인 0은 예외적으로 화면에 나타난다.

5. undefined 를 렌더링하지 않기

• 리액트 컴포넌트에서는 함수에서 undefined 만 반환해 렌더링하는 상황을 만들면 오류가 발생한다.
  만약 어떤 값이 undefined일 수도 있다면 OR 연산자를 사용해 오류를 방지할 수 있다.

6. 인라인 스타일링

• 리액트에서는 DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어줘야 한다.
  스타일 이름 중에 background-color 처럼 - 문자가 포함되는 이름은 - 을 제거해 카멜 표기법으로 작성해야 한다.
  즉, background-color 이 backgroudColor 로 작성된다.

7. class 대신 className

• JSX 에서는 class 가 아닌 className 으로 설정해 주어야 한다.

8. 꼭 닫아야 하는 태그

• JSX 에서는 태그를 닫지 않으면 오류가 발생한다.

9. 주석

• JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 작성하는 방법과는 다르다.

[React] JSX 문법