[React] JSX 문법

JSX란

✨JSX(JavaScript XML)는 자바스크립트에 XML을 추가한 자바스크립트의 확장 문법이다.

JSX는 하나의 파일에서 html문법과 javascript 문법을 동시에 사용할 수 있어서 편리하며 가독성이 높다.

// 실제 작성된 JSX
function App() {
	return (
      <h1>Hello React</h1>
    );
}

// 바벨로 컴파일 된 자바스크립트
function App() {
	return React.createElement("h1", null, "Hello React");
}

✅ 브라우저로 실행 되기 전, 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트로 컴파일된다.
✅ JSX는 리액트로 프로젝트를 개발할 때 사용되지만 공식적인 자바스크립트 문법은 아니다.

JSX 문법

반드시 하나의 부모 요소가 감싸 안아야 하는 형태이며, 이 형태를 지키지 않을 시 에러가 난다.

//정상⭕
function App() {
	return (
      <div>React</div>
    );
}

//에러❌
function App() {
	return (
      <div>React</div>
      <div>Vue</div>
    );
}

JSX 조건문 - 삼항 연산자

JSX 안에서는 if else 문법을 바로 사용할 수 없기 때문에 if 문법 대신 삼항연산자를 사용한다. JSX 중괄호 안에서 사용가능 하다.

적용

function App (){
  let [modal, setModal] = useState(false);
  return (
    <div className="app">
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

다음은 모달창이 false일 때 안보이고, true일 때 보이는 이벤트이다.
useState를 선언하여 false두고, 중괄호를 열어 삼항연산자로 true일 때 이 나오고, false일 때 null로 나오는 구조이다.

여기서 어떤 컨텐츠를 클릭 할 때, 창이 나오도록 State도 같이 변환해야 줘야 완성된다.

<div className='list'>
  <h4 onClick={() => { setModal(!modal) }}>{listName[1]}</h4>
</div>

State 변경 함수를 이용하여 modal이 아닐때 라는 뜻으로 반대 상태를 반환한다.

JSX 반복문 - map

JSX 안에서 if문과 마찬가지로 for문도 바로 사용하기 힘들기 때문에 map함수를 사용한다. 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다

• array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행.
• 콜백함수에 파라미터 어레이 안에 있던 모든 자료를 하나씩 출력.
• return에 계산식을 array로 담아준다.

적용

let [listName, listChange] = useState(['제목1', '제목2', '제목3']);
let [like, likeChange] = useState([0, 0, 0]);
{
  listName.map((a, i) => {
    return (
      <div className='list' key={i}>
        <h4 onClick={() => { setModal(!modal) }}>{a}</h4>
		<span onClick={() => {
  		  let copy = [...like];
  		  copy[i] = copy[i] + 1;
  		  likeChange(copy);
		}}>👍</span>{like[i]}
		<p>리스트</p>
	  </div>
	)
  })
}

.list과 좋아요 버튼을 map을 이용해서 반복적으로 생성 시켜 주었다.
map의 콜백함수로 배열 0번째 부터 받아오고, like는 ...함수를 이용해 배열 복사본을 만들고, 배열의i번째에 +1을 해주었다.