React/ part.2 JSX

 JSX란?

JSX(JavaScript Syntax eXtension) 리액트에서 사용하는 자바스크립트 확장 문법

HTML과 자바스크립트 로직을 하나의 자바스크립트 파일 안에서 모두 처리하기 위해 확장한 문법

 

< JSX 특징 >

태그처럼 생긴 문법

자바스크립트 정식 문법은 아니기 때문에 작성한 코드는 브라우저에서 동작하기 전에

Babel이라는 transcompiler를 통해 일반 자바스크립트 코드 형태로 변환된다.

 

< JSX로 작성하면 좋은점 >

자바스크립트 문법을 가져와 쓰기 때문에 편하다.

하지만 자바스크립트보다 직관적이다.

 

 

< JSX 문법 >

JSX 문법에 맞게 작성하는 것이 제일 중요하다.

1. JSX element
   • 자바스크립트 파일 어디에서나 HTML처럼 작성이 가능하다.
2. javaScript 표현식 값만 사용가능
   • { javascript }안에 작성해서 사용가능
   • if()문 또는 for()은 사용안됨 ⇒ 값이 아니기 때문에
   • 삼항연산자는 사용가능
3. JSX attribute
   • class → className으로 대체해서 사용
   • 태그의 속성명은 camelCase로 작성해야한다.
   • HTML에서 사용하는 속성명과 차이가 있을 수 있기 때문에 공식 문서 참고
4. Event 처리
   • 태그를 작성할 때 직접 이벤트와 이벤트 핸들러를 부여한다.
   • on + eventname (camelCase로 방식으로 작성) ⇒ onClick
   • onClick = {function name}
   • 문자열이 아닌 함수로 이벤트 핸들러를 전달
5. Inline Styling
   • style={{ 스타일 작성 object 타입으로 작성된다.}}
   • style 속성을 자바스크립트 객체로 받는다.⇒ camelCase로 작성, {{반드시 이중 괄호}} {겉의 괄호는 자바스크립트요소를 쓴다는 의미 {안의 괄호는 객체 요소를 의미}}
   • <h1 style={{ color: “red”, backgroundColor : “yellow” }}></h1>
   • 사용을 권장하진 않는다.
6. self-Closing Tag
   • 컨텐츠 없이 사용할 때 <div />와 같이 사용
   • 하나의 태그가 하나의 요소일 때 <img /> 와 같이 사용
7. Nested JSX
   • 항상 부모 요소가 있어야한다. 형제 관계끼리만 존재하면 에러가 난다. ⇒ 하나의 DOM 트리 구조로 이루어져야 한다.
   • React.Fragment 가 필요한 이유
8. React.Fragment
   • 추가적인 DOM element를 생성하지 않고 부모 요소를 추가 ⇒ 레이아웃에 영향을 주지 않음
   • <React.Fragment>…</React.Fragment> 혹은 <>…</>으로 사용 가능

 

 

---

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!