01. JSX란?

01. JSX 문법

JavaScript XML의 약자로, 리액트에서 사용하는 특수한 문법이다. JSX는 자바스크립트의 문법을 확장해주는 Babel을 통해 JavaScript로 변환할 수 있다.

---

02. JSX 규칙

JSX 가 JavaScript 로 제대로 변환이 되려면 지켜주어야 하는 몇가지 규칙이 있다.

1. 카멜케이스 준수
2. class은 자바스크립트 예약어로, className으로 코드 작성
3. 태그는 꼭 닫아야 한다.

   <main> /* 에러 발생 */
   
   <main> </main> /* 정상 작동 */

   📝 Self Closing tag

   태그 안에 들어가는 것이 없는 경우에는 바로 닫을 수 있다.

    <main> </main>  /* 정상 작동 */
   
    <main /> /* 정상 작동 */

4. 최상위 태그는 꼭 1개여야 한다.
   이유는, 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.

   function App() {
   	return (
   		<div>
   			<h1>Hello GYUUUL 1!</h1>
   			<h1>Hello GYUUUL 2!</h1>
   		</div>
   );
   }

---

03. Fragment

JSX 규칙 중 4번은 보면 "최상위 태그는 꼭 1개여야 한다."라는 규칙이다.
하지만 감싸는 목적으로만 계속 div를 사용하면, 코드가 복잡해지고 table 관련 태그를 사용할 때도 애매해진다. 그래서 나온 것이 리액트의 Fragment이다.

  <Fragment>

  <header>
    <h1>Hello GYUUUL 1</h1>
  </header>
  <main>
    <h1>Hello GYUUUL 2</h1>
  </main>

</Fragment>

  <>

  <header>
    <h1>Hello GYUUUL 1</h1>
  </header>
  <main>
    <h1>Hello GYUUUL 2</h1>
  </main>

</>

Fragment는 첫 번째처럼 Fragment 태그를 이용하여 사용할 수도 있고, 두 번째처럼 빈 태그로 사용할 수 있다.

---

04. JSX 스타일 적용

JSX에 CSS 문법을 적용시킬 땐 방법이 두 가지가 있다.

1. src 폴더에 App.css 파일 생성
2. JSX에 style 속성 적용

첫 번째 방법으로 한다면 기존 CSS에 스타일 속성 작업한 것처럼 하면 된다.

하지만 두 번째 방법은 스타일을 정의할 때 '-'를 사용할 수 없다. 그렇기 때문에 c카멜 케이스를 사용하여 작성합니다.

  <div style={{backgroundColor:"black", color:"white"}}></div>

이와 같이 background-color 라고 작성하는 대신 backgroundColor 처럼 작성한다.

---

🚨 HTML에 style을 적용할 때와 JSX에 style을 적용할 때 차이점

• HTML에 style을 적용할 때

  <h1 style='background-color:black; color:white' >Hello GYUUUL! </h1>

• JSX에 style을 적용할 때
  📢 중괄호를 두 번 사용해야함

  <h1 style={{backgroundColor:"black", color:"white"}}> Hello GYUUUL! </h1>

---

인라인 스타일

in-line 스타일로 적용할 때 오브젝트 형태로 작성해야 한다. 오브젝트 형태는 아래와 같이 key와 value를 짝을 지어 작성한다.

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

---

05. 자바스크립트 사용

JSX에서 자바스크립트 변수명을 사용할 때는 중괄호로 감싸줘야 한다.

function App() {
	const name = 'GYUUUL';
  return (
		<div>
			<h1 style={{backgroundColor:"black", color:"white"}}>
				Hello {name} !
			</h1>
		</div>
  );
}

export default App;

// Hello GYUUUL ! 출력

스타일도 변수에 담아 사용할 수 있다.

import './App.css';

function App() {
  const name = 'GYUUUL';
  const someStyle = {backgroundColor:"black", color:"white"}; //카멜케이스 유지
  return (
    <div>
      <h1 style={someStyle}>
        Hello {name} !
      </h1>
  </div>
  );
}
export default App;

---

직접 해보기 ( 1 )

📝 새로고침 할 때마다 현재시간 표시 되는 걸 JSX로 나타내기

import './App.css';

function App() {
 const someStyle = {backgroundColor:"black", color:"white"};

  let now = new Date();	// 현재 날짜 및 시간
  let year = now.getFullYear();
  let month = now.getMonth()+1;	
  let date = now.getDate();
  let hours = now.getHours();
  let minutes = now.getMinutes()
  let seconds = now.getSeconds();

  return (
  <div>
      <h1 style={{color:'red'}}>년: {year} </h1 >
      <h1 style={someStyle}>월/일: {month}/{date}</h1>
      <h1 style={someStyle}>시간: {hours}시 {minutes}분 {seconds}초</h1>
  </div>
  );
}

export default App;

• npm start 후 localhost:3000 접속 결과
  

---

직접 해보기 ( 2 )

📝 컴포넌트 만들고 그 안에 있는 배열의 값이 true면 배경색 지정해보기

1. src 폴더에 components 폴더 생성 후 TripList.jsx와 TripList.css 파일을 생성한다.

2. TripList.jsx와 TripList.css에 각각 코드를 작성한다.

• TripList.jsx

  import './TripList.css'
  
  let list = [
      { no: 1, area: "대전", visited: false },
      { no: 2, area: "부산", visited: true },
      { no: 3, area: "목포", visited: false },
      { no: 4, area: "제주도", visited: true },
  ];
  
  function TripList(){
  
      let areas = list.map((item, index)=>{
          return(
          // map한 결과가 areas에 저장된 후 반환
          <li key={index} className={item.visited? "list-area-item active":"list-area-item"}>{item.area}</li>
          )// 형제 요소들은 각각 고유한 키값을 가져야함= 최적화 관련
          // visited가 true면 클래스명이 list-area-item active, false면 list-area-item이다.
      });
  
      return <ul className="list-area">{areas}</ul>   
  }
  
  export default TripList;

---

• TripList.css

  .list-area {
      padding: 0;
      list-style: none;
  }
  .list-area-item {
      border: 1px solid black;
  }
  /* 선이 겹쳐서 2px이 되는 걸 막아줌 */
  .list-area-item+.list-area-item {
      border-top: none;
  } 
  .list-area-item.active {
      background-color: royalblue;
      color: aliceblue;
  }

---

• App.js

  import './App.css';
  import TripList from './components/tripList/TripList'
  //웹팩때문에 css파일을 불러올 수 있음
  
  function App() {
  
    return (
      <div>
        <TripList />
    	</div>
    );
  }
  export default App;

---

• npm start 후 localhost:3000 접속 결과
  

---