[React]React와 JSX 이해

1. 리액트란?

프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리

📋 리액트의 3가지 특징

👉 선언형(Declarative)

• 리액트는 JSX를 활용한 선언형 프로그래밍을 지향하며 하나의 파일에 명시적 으로 작성.
• 한 페이지를 HTML/CSS/JS로 나누기보다, JavaScript와 HTML을 결합한 문법(JSX)을 기반으로 명시적으로 코드를 작성한다.

👉 컴포넌트 기반(Component-Based)

• 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발.
• 컴포넌트로 분리하면 서로 독립적 이고 재사용 이 가능.
• 유지보수에 용이하고, 독립적이서 컴포넌트 간 의존성이 줄어들고 유닛 테스트를 하기에도 편함.
  기능 자체에 집중하여 개발할 수 있다.

👉 범용성(Learn Once, Write Anywhere)

• 어떤 JavaScript 프로젝트에서든 유연하게 적용될 수 있다.
• 리액트 네이티브로 모바일 개발을 할 수 있다.

---

2. JSX란?

HTML을 JS처럼 편리하게 사용하기 위한 리액트 JS 확장 문법

• JSX란 JavaScript XML 의 줄임말이다.
• JSX 문법을 이용하여 React 엘리먼트를 만들 수 있다.
• 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 'Babel'을 통해 브라우저가 이해할 수 있는 JavaScript 코드로 변환한다.
  Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 한다(JSX는 HTML처럼 생겼지만 HTML 아님).

📋 DOM과 React JSX

👉 DOM: HTML CSS JavaScript
👉 React JSX: CSS JSX

• JSX를 사용하면 JavaScript 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있게 된다.
• 주의: JSX는HTML이 아니다.

❓ JSX를 쓰는 이유

React는 JSX를 이용하여 DOM 코드보다 명시적으로 코드를 작성 할 수 있기 때문이다.
DOM에서는 JavaScript를 사용하기 위해 script 태그 등을 통해 JavaScript와 HTML을 연결한다.

<script src="src/index.js></script>

하지만 React에서는 JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.

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

위와 같이 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라 한다.

❓JSX 없이 React 요소를 만들 수 있을까

JSX 없이 React 요소를 만들 수 있다. 다만, 코드가 복잡해지고 가독성이 떨어지는 단점이 있다.

📋 JSX 문법

JSX 규칙

👉 하나의 엘리먼트 안에 모든 엘리먼트가 포함

• JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.

// 잘못된 예시
<div>
  <h1>Hello</h1>
</div>
<div>
  <h1>Hello</h1>
</div>

// 올바른 예시
<div>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h1>Hello</h1>
  </div>
</div>

👉 엘리먼트 클래스 사용 시, className으로 표기

• 만약 class로 작성 시 React에서 자바스크립트 클래스로 받아들이기 때문에 주의해야 한다.

<div className="textBox"> Hello </div>

👉 JavaScript 표현식 사용 시, 중괄호 {} 이용

function App() {
  const name = 'Jone';
  return (
    <div>
    	Hello, {name}
    </div>
  );
}

👉 사용자 정의 컴포넌트는 대문자로 시작(PascalCase)

• 만약 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식함.

function Hello() {
	return <div>Hello</div>
}

👉 조건부 렌더링에는 삼항 연산자 사용

• if문이 아닌 삼항 연산자 이용해야 함.

<div>
  {
  	(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
  }
</div>

👉 여러 개의 HTML 엘리먼트를 표시할 때, map() 함수 이용

• map 함수를 사용할 때 반드시 key JSX 속성을 넣어야 한다.
  만약 'key' JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣으라는 경고창 표시된다.

const content = posts.map(post) => {
	<div key={post.id}>
      <h3>{post.title}</h3>
	</div>
}

---

3. Component란?

하나의 기능 구현을 위한 여러 종류의 코드 묶음이다.

📋 컴포넌트로 생각하기

const Component = () => {
  return(
  	<>
      <div>{정의1}</div>
      <div>{정의2}</div>
    </>
  )
}

• 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있고, 이 컴포넌트는 애플리케이션 내부적으로 최상위 컴포넌트(root)의 역할을 한다.
• 최상위 컴포넌트는 자식 컴포넌트를 가질 수 있고, 이는 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다.

---

4. 실습

✍ DOM으로 엘리먼트 생성하기

const user = {
  firstName: "HTML",
  lastName: "DOM"
};

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const heading = document.createElement("h1");
heading.textContent = `Hello, ${formatName(user)}`;
document.body.appendChild(heading);

✍ React 로 엘리먼트 생성하기

import React from "react";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  
  return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

• HTML과 JavaScript를 한 곳에 작성. 하나의 파일에서 구조와 동작을 한 눈에 파악할 수 있다.

✍ JSX 활용법

• postToJSX함수는 post라는 매개변수를 통해 한 포스트의 정보를 담은 객체를 받아 JSX 표현식으로 바꿔 리턴해주는 함수.
• 배열 메서드 map을 활용

const posts = [
  {
   id: 1,
   title: "Hello World",
   content: "Welcome to learning React"
  },
  {
   id: 2,
   title: "Installation",
   content: "You can install React from npm"
  }
];

export default function App() {
  const postToJSX = (post) => {
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  };

  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(postToJSX)}
    </div>
  );
}