리액트의 호흡 제 1형, JSX

리액트를 쓰기 위해 가장 먼저 익히게 되는 첫번째 개념. JSX입니다.

일단 어떻게 생겨먹은 놈인지 상판떼기부터 봅시다.

import './App.css';

function App() {
  let post = '강남 우동 맛집'

  return (
    <div className="App">
      <div className='black-nav'>
        <div>개발 blog</div>
      </div>
      <div className='list'>
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

난해하죠.

funtion 보니까 자바스크립트 같긴 한데,
return 문에 이상한 HTML 같은 게 껴있어요, 근데 이게 JSX래요
JS가 Javascript인 건 알겠는 데 X는 뭐냐구요

(출처 : AWS what is )

XML확장 마크업 언어래요
Extensible Markup Language(XML) 이라고 확장된 마크업 언어라는데 뭔말인지 모르겠어요

마크업 언어 뭐예요, 구조 짤 때 쓰는 거, HTML이잖아요
그래서 Javascript에서 HTML도 쓸 수 있는 거예요
저번시간 HTML 1개 만 써서 관리하기 편한 것 때문에 리액트를 쓴다고 했는 데,
보여 질 게 많은 데 어떻게 HTML 하나로 다 구현합니까?

그 방법 으로 쓰는 게 JSX문법 입니다.
원래 DOM이라고, 리액트 쓰기 이전에 HTML CSS JS를 합치기 위한 구조에서는
이런 식으로 요소를 추가하고 붙여 줬어요

const ul = document.querySelector("ul");

const li = document.createElement("li");
li.innerText = 'hello world!';
ul.appendChild(li);

근데 이러면 단점이 뭐예요
태그나 요소 클래스나 id 등을 일일히 찍어서 구조 구조 하나하나 다 2자줘야해요.

아무리 복붙해도 페이지가 100개가 넘어가면 손아프고 눈아프고 머리도 아프겠죠

이거 편하게 해주려고 나온 게 컴포넌트입니다.
반복되는 구조를 기능별로 묶어서 추가하거나 삭제할 페이지를 관리하고
기존 HTML에 갈아 끼우기만 화면, 빠르고 손쉽게 관리하기도 좋아요

funtion app() {
	return (
		<ul>
			<li></li>
		</ul>
	);
}

제가 볼땐 순수 자바스크립트로 DOM에 추가하는 ul.appendChild(li); 같은 가독성 떨어지는 코드보다, 지금 보는 이 JSX문법이 훨씬 알아보기 쉬워요. 이거 그대로 HTML에 추가된다는 얘기잖아요

이렇게 생긴 애를 컴포넌트라고 부릅니다.
이름이 App이니 단순하게, App컴포넌트 라고 부르면 됩니다.

처음에 본 코드 한번 다시 볼게요

import './App.css';

function App() {
  let post = '강남 우동 맛집'

  return (
    <div className="App">
      <div className='black-nav'>
        <div>개발 blog</div>
      </div>
      <div className='list'>
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

이 코드에 문제점이 하나가 있다면
글제목이 ‘글제목’으로 고정이 되어있다는 거예요

글제목을 진짜 글제목이라고 올리면 그거 누가 봅니까
진짜 '글제목'이라고 올릴 거 아니잖아요

그래서 근데 글 제목을 하나로 고정하는 게 아니라 그때 그때 값을 바꿔주고 싶어요

직접 입력한 값으로 이름을 바꾸고 싶으려면 어떻게 해야할지
다음엔 변하는 데이터, 즉 현재 상태를 저장하고 있다가 필요할 때 보여주는 방법에 대해 말해 보도록 하겠습니다.

3줄 요약
JSX = Javascript + HTML
retrun문에 HTML넣어서 컴포넌트를 만들어준다.
1개의 HTML에 컴포넌트를 갈아끼는 방식으로 DOM을 형성한다.