1. JSX 문법

첫 리액트 포스팅은 !! React에서 사용하는 문법 JSX에 대해 쓰려고 한다.

 

바로 본론으로~

 

 

 

⭐️ JSX가 뭘까??

• JSX(Javascript XML)는 Javascript에 XML을 추가한 확장문법.
• JSX는 리액트로 프로젝트 개발할 때 사용되므로 공식적인 Javascript 문법은 아님.
• 브라우저는 Javascript형태의 코드를 읽기 때문에,
  브라우저에서 실행하기 전에 바벨을 사용하여 JS 형태의 코드로 변환.
• JSX는 하나의 파일에 JS와 HTML 동시 작성.
• 위의 이유 때문에 가독성이 높고 작성이 쉬움.

 

 

---

 

🖋️ 그럼 JSX를 어떻게쓰는거야?? (문법)

 

JSX는 기본 규칙이 존재한다. 어떤게 있는지 살펴보자!

 

 

 

1. 구성요소에서 여러 요소를 반환하려면 단일 상위 태그로 요소를 래핑해야함.

    쉽게 말해서, 반드시 부모요소 하나가 감싸는 형태여야함.

 

이유는, 가상의 돔에서 컴포넌트 변화를 감지할 때, 효율적으로 비교하기 위해

컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하기 때문

 

Syntax Error 발생

div태그로 감싸주어 정상작동

Fragment 사용하여 정상작동

마지막 사진을 보시면 빈 태그가 보일것이다.

이 빈 태그는 Fragment라고 하는 것이며,

JSX의 문법 중 태그는 무조건 닫아줘야하는 문법이 있다.

 

코딩하다가 실수로 닫는 태그를 안붙여줄 수도 있기 때문에

Fragment를 열고 닫아줌으로써 부모요소로써

여러 하위 요소들을 감싸주는 역할을 해주는 것이다.

 

---

 

 

2. 자바스크립트 표현식

 

쉽게 말해서, 자바스크립트 표현식을 써야한다!! 하면

JSX내부에서 그 코드를 {}로 감싸줘야한다.

 

그게 무슨말이냐?? 아래의 예로 살펴보자

 

 

name이라는 변수를 선언하고, 그 name을 가져다가 써야할 때

자바스크립트 표현식을 써야한다. 그때!! name을 {}로 감싸준다는 것이다.

 

 

위처럼 객체에 담아서  plla2.name, plla2.hobby을

{} 중괄호에 담아서 값을 불러올 수 있다는 것이다.

 

 

---

 

 

3. if문(for문) 대신 삼항연산자 사용

 

if문과 for루프는 Javascript 표현식이 아니기 때문에,

JSX 내부 자바스크립트 표현식에선 사용이 불가능.

 

그렇기 때문에 조건에 따라 다른 렌더링을 해야할 땐,

JSX 주변 코드에서 if문을 사용하거나

{}안에서 삼항연산자를 사용해야함.

 

return 외부에서 if문 사용

return 내부에서 삼항연산자 사용

 

 

---

 

 

4. React Dom은 HTML 어트리뷰트 이름 대신

camelCase 프로퍼티 명명 규칙을 사용해야함.

 

 

4-1. JSX 스타일링

• JSX 에서 자바스크립트 문법을 사용하려면
  중괄호를 쓴다. 따라서 스타일 적용할 때도 객체 형태로 넣음.
• 카멜 표기법으로 작성해야함. ex) font-size -> fontSize

 

 

 

4-2. class 대신 className

• HTML, CSS 클래스를 사용할땐 class 속성을 사용하였다.
• 하지만 JSX에서는 class가 아닌 className을 사용해야함.

 

 

---

 

 

5. JSX 내에서 주석 사용 방법

 

JSX 내에서는 {/*...*/} 의 형식으로 주석을 사용함.

 

기본 주석사용 방법

 

만약, 시작태그를 여러줄로 작성할때는

내부에서 // 의 형식도 사용 가능

 

시작태그를 여러줄 쓸경우 주석사용

 

---

 

 

이렇게 JSX의 문법들을 알아보았다.
아직은 너무 익숙치 않아서 어리버리 하지만
좀 하다보면 분명히!! 금방 적응될 것이다.
그때까지 견디고 공부 더해보자 파이팅~!!

 

 

참고

[React] 2. JSX란? (정의, 장점, 문법)