SEB Section 1 React

React

• React는 프론트엔드 개발을 위한 JS 오픈소스 라이브러리이다.
• 리엑트의 3가지 특징
  1. 선언형
     • 코드를 자세히 분석하지 않아도 코드의 의도를 잘 알 수 있도록 개발하는 것이다.
     • HTML / CSS / JS로 나눠서 작성 하기 보다 JSX를 활용하여 작성한다.
  2. 컴포넌트 기반
     • 컴포넌트는 하나의 기능을 구현하기 위해 여러 코드를 묶어둔 것이다.
     • 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다. 또한 유지보수, 유닛 테스트가 용이하다.
  3. 범용성
     • 어디에든 유연하게 적용될 수 있다.

JSX는 무엇일까?

• React는 JSX를 활용하여 작성을 한다고 하였다. 그렇다면 JSX는 무엇일까?
• JSX는 JS를 확장한 문법이다. 이 문법을 이용하여 React의 엘리먼트를 만들 수 있다.
• JSX는 브라우저가 바로 실행할 수 있는 JS코드가 아니다. 그래서 브라우저가 이해할 수 있도록 JS코드로 변환을 해주어야 한다.
• 이때 이용하는 것이 ‘Babel’이다. Babel은 JSX를 브라우저가 이해할 수 있도록 컴파일 한다. 컴파일을 한 후 화면에 렌더링을 할 수 있다.
• React는 DOM과 다르게 CSS와 JSX를 가지고 웹 어플리케이션을 만들 수 있다.

JSX를 왜 쓸까?

• 기존의 DOM을 만들기 위해서는 HTML과 JS파일을 연결을 시키고, 해당하는 태그를 찾아 그 태그에 적용하고자 하는 코드를 작성을 해서 보기에 불편한 경험을 했을 것이다.
• React DOM은 해당 기능을 컴포넌트로 만들어 그 기능을 위한 코드들을 컴포넌트에 담아두면 되기 때문에, 기능과 디자인을 한 눈에 볼 수 있다.

JSX 규칙

• 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 하나의
  엘리먼트 안에 포함 시켜야한다.

<div>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h2>World</h2>
  </div>
</div>

• 엘리먼트에 class 속성을 지정하려면, classname으로 표기해야한다.
• JS를 쓰고자 한다면 중괄호를 이용해야한다.
• 사용자 정의 컴포넌트는 대문자로 시작해야한다.

function App() {
  const name = "Josh Peraz";
  return (
    <div classname="greet">
      <h1>Hello</h1>
    </div>
  );
}

• 조건부 렌더링은 삼항연산자를 사용한다.

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

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

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

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

  return <div>{content}</div>;
}