JSX

About JSX

• React에서 UI를 구성할 때 사용하는 문법으로, JavaScript를 확장한 문법 (JavaScript XML) ⇒ 이 문법을 이용해서 React 엘리먼트를 만들 수 있습니다.
• 그동안 HTML요소를 만들고, JS를 설정한 뒤, 다시 HTML에 해당 설정 내용을 반영했다고 한다면, React JSX는 JS로 요소를 만들고 마지막에 HTML에 업데이트/반영해줍니다.
• 브라우저가 바로 실행할 수 있는 JS코드는 아닙니다. “Bable”을 통해 JSX를 브라우저가 이해할 수 있는 JS로 컴파일 후, JS를 브라우저가 읽고 화면에 렌더링 합니다.

DOM 그리고 React JSX

• CSS&JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다.
• 즉, 컴포넌트 하나를 구현하기 위해 필요한 파일이 줄고, 한 눈에 컴포넌트 확인 가능!
• JSX를 사용하면 JS만으로 마크업 형태의 코드를 작성하여 DOM에 배치
• HTML과 비슷한 문법을 활용하기 때문에 디자이너와의 협업에 편리합니다.

---

Why JSX?

• 한 눈에 볼 수 있는 기능과 디자인
• 개발자가 코드만 보는게 아닌 구조를 바라보게 돕습니다.
• 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋 → 컴포넌트

//React without JSX

return React.createElement(
	"h1", null, `Hello, ${formatName(user)}!`

//React with JSX -> 복잡성 줄고, 가독성 높이기

return <h1>Hello, {formatName(user)}!</h1>;

---

JSX 활용 규칙

• 하나의 element 안에 모든 elements가 포함 (최상위에서 opening tag & closing tag로 감싸기)

• element class 사용 시, className으로 표기 (class로 작성 하면 html 클래스 속성 대신, js 클래스로 받아들이기 때문에 주의)

• JS 기본 문법 사용 가능 → JavaScript 표현식 사용 시, 중괄호{} 이용 (그렇지 않으면, 일반 텍스트로 인식) 
  • ex. {변수명, 함수 등}

⭐️ 함수 : 화살표 함수 표현식으로 선언되었을 때, {function}이 아닌 {function()}으로 호출형으로 써주자

• • JSX에서 style속성 집어 넣을 때 : style = {object 자료형으로 만든 스타일}
    • {{color: "blue}}

• 사용자 정의 컴포넌트는 대문자로 시작 (PascalCase) (소문자로 시작시, 일반적인 HTML 엘리먼트로 인식)

• 여러 개의 HTML 엘리먼트를 표시할 때, map()함수를 이용
  • 이때, 반드시 "key" JSX 속성을 넣어야 한다!!
  • 그렇지 않으면, 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됨!

- 이때, key 속성의 위치는 map method 내부에 있는 첫 엘리먼트에 넣어줍니다.
- key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 합니다. (예상 가능하며 유일해야 하기 때문)
- 고유 id가 없는 경우에나 배열 index를 넣어서 해결 (BUT, this is as a last resort! 최후의 수단으로만..)

          ❗️ -> 고유한 id가 아닌 index를 key로 사용한다면 새로운 아이템이 맨 앞에 들어올 경우 index가 하나씩 밀려서 key가 들어간 형제노드들을 전부 update해야한다.