TIL 19일차

시작하며

오늘은 React에 대해서 배웠는데 항상 새로운 내용을 학습할 때마다 초반에는 기초적인 개념을 배우는 단계이다 보니 원하는 기능을 구현하지 못해서 답답한 느낌이 든다. javaScript를 처음 배울 때에도 코딩 테스트 사이트의 문제들을 풀지 못해서 답답했었는데 지금은 모르는 method가 나오더라도 바로 찾아서 사용할 수 있게 되었다. React도 비슷한 단계까지 사용할 수 있도록 시간을 들여서 공부해야겠다.

React

정의
React란 javaScript의 라이브러리 중 하나로 선언형, 컴포넌트 기반, 범용성 등과 같은 특징이 있다. 개발과 유지보수를 페이스북에서 담당하고 있기 때문에 지속적으로 업데이트 되며, 웹페이지 뿐만 아니라 앱개발에도 사용될 수 있다.

JSX

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 React.createElement("h1", null, `Hello, ${formatName(user)}!`);

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

export default App;

JSX는 JavaScript XML의 줄임말로 React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. JSX를 이용하여 React 엘리먼트를 만들 수 있는데 브라우저가 바로 실행할 수 있는 javaScipt 코드가 아니기 때문에 Babel을 이용하여 컴파일해야 한다.

React를 사용하면 html과 javaScript를 별도로 작성해줄 필요없이 하나의 파일로 작성이 가능한데 위의 예시처럼 JSX를 사용하지 않고 코드를 작성했을때는 복잡해지고 가독성이 떨어지기 때문에 JSX를 사용해야 한다.

규칙

JSX는 javaScipt의 확장된 문법이기 때문에 쉽게 배울 수 있지만 다른 규칙이 존재하기 때문에 규칙에 맞게 코드를 작성해야 한다.

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다.
2. 엘리먼트 클래스 사용시, className으로 표기해야 한다.
3. javaScript 표현식 사용시, 중괄호({})를 사용해야 한다.
4. 사용자 정의 컴포넌트는 대문자로 시작해야 한다.
5. 조건부 렌더링에는 삼항연산자를 사용해야 한다.
6. 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용해야 한다.

map()

 const posts = [
    { id : 1, title : 'Hello World', content : 'Welcome to learning React!' },
    { id : 2, title : 'Installation', content : 'You can install React via npm.' },
    { id : 3, title : 'reusable component', content : 'render easy with reusable component.' },
    // ...
    { id : 100, title : 'I just got hired!', content : 'OMG!' },
  ];
  function Blog() {
  const postToElement = (post) => (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  const blogs = posts.map(postToElement);
  return <div className="post-wrapper">{blogs}</div>;
}

어떠한 배열에 있는 값을 화면에 표시하기 위해서는 일일이 작성해주기 보다는 map을 사용하면 배열 내의 값을 차례대로 태그를 포함하여 작성이 가능하다.

컴포넌트

컴포넌트란 하나의 기능 구현을 위한 여러 종류의 코드 묶음으로 UI를 구성하는 필수 요소이며 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있다. 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 하며 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다.

React에서는 HTML에서 구조를 짜고 기능을 별도의 javaScript 파일에서 구현하는 것이 아니라 컴포넌트 별로 관리가 가능하기 때문에 보다 직관적으로 유지보수가 가능하다.