React

학습목표

React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.
create-react-app 으로 간단한 개발용 React 앱을 만들 수 있다.

React 3가지 특징

선언형이다.

JSX를 활용한 선언형 프로그래밍으로 코드만 보고 어떠한 내용인지 확인하기 쉽다.

컴포넌트 기반이다.

서로 독립적이고 재사용이 가능하기 떄문에 기능 자체에 집중하여 개발할 수 있다.

다양한 곳에서 활용할 수 있다.(범용성)

자바스크립트 프로젝트 어디에든 유연하게 적용될 수 있다.
페이스북에서 관리되어 안정적이고, 가장 유명하다.

JSX ?

• JavaScript 를 확장한 문법
• 실제 브라우저에서는 실행이 불가능하여 Babel 로 컴파일 해야함.
• 기존에 HTML 파일에서 자바스크립트 파일을 불러내어 페이지를 구성하였다면, JSX를 사용하면 자바스크립트 만으로도 구현이 가능해진다.

JSX 없이도 React 요소?
충분히 만들 수 있다.
하지만 코드가 복잡해지고 가독성이 떨어진다.

return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

import React from "react";
import "./styles.css";

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

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

  // JSX 를 활용한 React
  return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

JSX 규칙

• 여러 엘리먼트를 작성하는 경우, 최상위에서 한번 더 태그로 감싸줘야한다.

<div> // opening tag
	<div>
    	<h1>Hello</h1>
    </div>
    <div>
    	<h2>world</h2>
    </div>
</div> // closing tag

• 클래스 사용시, className 으로 표기

<div> // opening tag
	<div> // 만약 class라고 작성하면 자바스크립트 클래스로 인식하므로 주의해야한다.
    	<h1 className="greeting">Hello</h1>
    </div>
    <div>
    	<h2>world</h2>
    </div>
</div> // closing tag

• JavaScript 표현식을 사용하고플땐 {}사용

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

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

  // JSX 를 활용한 React
  return <h1>Hello, {formatName(user)}!</h1>; // <- {formatName(user)} 이부분임
  // {}를 사용하지않으면 일반 텍스트로 인식함
}

• 사용자 정의 컴포넌트는 대문자로 시작해야한다

function App() {
...
}

• 조건부 렌더링은 삼항연산자!!!

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

• 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용하고
  반드시 key JSX 속성을 넣어야한다.

function Blog() {
  // postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방합니다.
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

이를 이용해 블로그나, 갤러리와 어떠한 데이터를 추가로 넣어야 할 경우
직접 하드코딩하여 넣는 것이 아닌, 자동으로 추가되게끔 만들 수 있다.