React 기초1

학습 내용

리액트(React)란 페이스북에서 개발한 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리이다. 프론트앤드 현업에서 가장 많이 쓰이는 개발 도구라고 할 수 있다. 그래서 프론트앤드로 취업을 하고자 할 때 React를 요구하는 경우가 아주 많다고 한다. 이번에는 리액트에 대한 전반적인 성능과 간단한 특징에 대해서 살펴보고자 한다.

왜 리액트를 사용하는가?

많은 프론트앤드 개발자들이 리액트를 사용하는 이유로 선언형, 컴포넌트 기반 개발, 범용성을 들 수 있다. 선언형이란 이름을 잘 지어주는 것을 말한다. 보통 선언형이지 않는 경우는 코드를 보고 이 코드가 어떤 코드인지 알기 쉽지 않다. 그러나 리액트의 경우 코드를 자세히 분석하지 않더라도 코드의 이름을 보고 코드를 비교적 쉽게 파악할 수 있다. 이 이유는 리액트가 선언형으로 되어있기 때문이다. 두 번째로 컴포넌트 기반 개발이란 하나의 기능을 구현하기 위해 여러 종류의 코드를 묶어놓는 것을 말한다. 이것을 컴포넌트라고 하는데, 컴포넌트 기반으로 개발을 하면 컴포넌트들이 독립적으로 작동하기 때문에 유지보수 등과 같은 관리가 편하고 기능 작동에 집중하여 개발이 가능하다. 이로 인해 재사용을 하는 것에 있어 아주 강력하다. 마지막으로 범용성이 넓은데, 리액트는 라이브러리 기반으로 개발되었다. 그래서 기존에 사용하던 JS나 다른 프로젝트에 유연하게 사용할 수 있다. 대표적으로 JS프레임워크인 Angular와 비교할 수 있는데 Angular도 분명 강력한 개발 도구이지만 다른 프레임워크와 함께 사용할 수 없어 해당 생태계에만 종속된다는 단점이 있다. 이로 인해 당연히 기존 프로젝트와 연계하는 것이 어렵다. 그러나 리액트는 이렇지 않다는 것이다.

JSX란?

리액트를 잘 다루기 위해서 알면 아주 좋은 것이 JSX이다. JSX란 JavaScript XML의 줄임말인데, React에서 UI를 구성하기 위해 JavaScript를 확장하여 사용하는 문법이다. 이 문법을 사용하면 React 엘리먼트를 만들고 조작할 수 있다. 그러나 기존 JS사용과 다르게 JSX는 브라우저에 곧바로 실행할 수 없다. Babel이라는 프로그램을 통해 JavaScript로 컴파일을 거친 후 실행이 가능하다.

JSX를 사용하면 기존 웹 앱 개발을 위해 HTML, CSS, JS를 넘나들며 코드를 작성해야 하는 불편함을 상당히 해소할 수 있다. JSX와 CSS로만 가지고 개발을 할 수 있기 때문이다. 기존의 HTML과 JS를 사용하는 경우에는 JS와 HTML을 따로 작성해야 한다.

const user = {
  firstName: "Harper",
  lastName: "Perez"
};

function formatName(user) {
  return user.firstName + " " + user.lastName;
}
let heading = document.createElement("h1");
heading.textContent = `Hello, ${formatName(user)}`;
document.body.appendChild(heading);

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <script src="src/index.js"></script>
  </body>
</html>

그러나 JSX를 사용하면 이렇게 한화면으로 JS와 HTML을 볼 수 있어 이전보다 훨씬 명시적이다.

import React from 'react'

// 이렇게 구조와 동작에 대한 코드를 한 뭉치로 모은 것이 컴포넌트이다.
function App() { 

  const user = {
    firstName: 'Harper',
    lastName: 'Perez'
  };

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

  return (
    <>
      <h1>
         hello, {formatName(user)}!
      </h1>
    </>
  )
}

JSX 활용 규칙

JSX에서 여러 엘리먼트를 작성할 경우에는 작성하고자 하는 엘리먼트를 모두 한 번에 여는 태그와 닫는 태그로 감싸야한다.
HTML의 class와 다르게 JSX에서 class를 명시하고 할 때는 'className'을 사용한다.
JSX에서 JS표현식을 사용할 때는 {}(중괄호)로 감싸서 쓸 수 있다.
JSX에서 컴포넌트를 작성할 때 엘리먼트의 이름은 대문자로 시작한다.
여러 개의 HTML 엘리먼트를 표시할 때는 map 함수를 사용해야 한다. 이때 반드시 "key" JSX속성을 넣어야 한다.
JSX에서 조건문을 사용할 때는 if가 아닌 삼항 연산자를 사용해야 한다.

const Tweets = () => {
  return (
    <ul className="tweets">
    	// 엘리먼트를 여러개 사용할 때는 map함수 사용
      {dummyTweets.map((tweet) => {
        const isParkHacker = tweet.username === 'parkhacker'
        // 조건문을 사용할 때는 삼항연산자를 사용
        const tweetUserNameClass = isParkHacker
          ? 'tweet__username tweet__username--purple'
          : 'tweet__username'

        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src={tweet.picture}></img>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                <span className={tweetUserNameClass}>{tweet.username}</span>
                <span className="tweet__createdAt">{tweet.updatedAt}</span>
              </div>
              <div className="tweet__message">{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

저작자표시

'React' 카테고리의 다른 글

useState 동기적으로 사용하기 (0)	2022.11.08
[React] 상태 관리 (0)	2021.12.08
React 컴포넌트 디자인 (0)	2021.11.25
React 기초3 state & props (0)	2021.08.26
React 기초2 라우터(Router) (0)	2021.08.13