🔮 React - 2. JSX(JavaScript XML)

JSX ?

JSX (JavaScript XML)은 JavaScript 언어의 확장으로, 개발자들이 JavaScript 코드 내에서 HTML과 유사한 구문을 작성할 수 있도록 합니다. 이는 사용자 인터페이스를 구축하는 인기있는 JavaScript 라이브러리인 React에서 널리 사용됩니다.

JSX를 사용하면 HTML처럼 보이지만 실제로는 JavaScript와 HTML의 혼합물인 코드를 작성할 수 있습니다.

• JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
• JSX는 기본적으로 자바스크립트 문법유사하므로 자바스크립트 예약어 사용을 피해야 한다.

✅ 짚고 넘어가기

1. 강력한 문법체크
   👉 HTML은 태그를 안닫아도 오류가 안나지만 JSX에서는 확실히 닫아야 한다.
2. 자바스크립트의 표준 문법이 아니기 때문에 크롬이 해석을 못 함.
   👉 따라서, 바벨을 이용하여 변환과정이 필요함(JSX -> ES5)
3. import / export 구문은 Node.js에서 지원하는 기능
4. 태그에 className만 씀
   👉 컴포넌트는 재사용 해야하기 때문에 유일한 값이어야 하는 id 안 씀
   👉👉 id를 대체할 수 있는게 있음 (ref) - 추후 추가 예정
5. return 문에는 HTML, 함수 영역에는 JavaScript

---

기본 코드

기본 코드 (App.js)

import './App.css';

function App() {
  const name = "양콩미";

  return (
    <div>
      <p>환영 합니다. {name} 님!!</p>
    </div>
  );
}

export default App;

렌더링 후 DOM에 붙일 때 한 번에 하나씩 하기 때문에 컴포넌트가 여러 개면 반드시!!!
부모로 감싸줘야 함!!!!

1. <div> 태그로 감싸기
2. <></> 🆕 (최근 유행(?))

---

1️⃣ 다항 연산자

예) 같은 홈 화면이지만 가입 여부에 따라 다르게 보여야 할 때

import './App.css';

function App() {
  const name = "리액트";

  return (
    <>
      {name === "리액트" ? (<h1>리액트 입니다.</h1>) : (<h1>리액트가 아닙니다.</h1>)}
    </>
  );
}

export default App;

2️⃣ AND(논리 연산자)

예) 서버에 정보가 내려왔는지 안내려왔는지에 따라 ..(async await에서 await 변수가 바뀔 때 렌더링 해라!!)

 

✨ OR도 쓸 수 있지만 이점이 없어서 주로 AND를 씀

✨ if문과 같은 조건문 불가

✨ 앞이 참이어야 뒤 확인 (앞이 거짓이면 아예 렌더링 안 함)

{name === "리액트" && <h1>리액트 화면을 갱신 합니다....</h1>}

---

CSS style 넣기

  ✨ 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어야 함
  ✨ 스타일 이름 중에서 background-color 처럼 하이픈이 포함되어 있으면 Camel 표기법으로 변경해야 함.

   🔮 VSCode 플러그인 : vscode-styled-components 설치하면 자동완성 됨

function App() {
  const name = "리액트";
  
  const style = {
    backgroundColor : "#eee",
    color : "royalblue",
    fontSize : "2em",
  };

---

import './App.css';

function App() {
  const member = {
    name : "홍길동",
    job : "개발자",
    addr : "서울시 강남구",
    gender : "남성"
  };
  function getGreeting(user) {
    return (user) ? (<h1>환영 합니다. {member.name}님!</h1>) : (<h1>환영 합니다. 방문자님.</h1>);
  }

  return (
    // class 키워드는 JSX 문법에서는 className으로 변경해야 함.(class로 하면 태그로 인식하기 때문)
    <div className="App">
      <p className="title-name">안녕하세요. 저는 {member.name} 입니다.</p>
      <p className="title-name">직업은 {member.job} 입니다.</p>
      <p className="title-name">사는 곳은 {member.addr} 입니다.</p>
      <p className="title-name">성별은 {member.gender} 입니다.</p>
      <div>{getGreeting(true)}</div>
    </div>
  );
}

export default App;