[React] React 기초

React

리액트는 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리로 유저 인터페이스를 만드는 데 사용한다. 구조가 MVC, MVW등인 프레임워크와 달리, 오직 View만 신경쓰는 라이브러리이다.

JSX

JSX는 자바스크립트의 확장 문법으로 브라우저가 바로 실행할 수 있는 자바스크립트 코드는 아니지만 바벨(babel-loader)을 이용해 브라우저가 이해할 수 있는 자바스크립트로 컴파일 한다.

장점

DOM에서 엘리먼트를 생성하는 방식은 다음과 같다.

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

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

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

같은 형식을 리액트에서 만들면

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;

더 길다고? 더 불편해보인다고? 천만에 말씀이다. 위 html 코드는 html문서와 js 문서를 연결시켜줘야 한다. 즉, html도 작성해야 하고 js도 작성해서 연결해줘야 구동된다는 뜻이다. 반면에 리액트는 단 한개의 js파일에서 html과 js로 나누어졌던 두 가지의 일을 한 번에 처리해준다.

위 코드들은 매우 간단하기 때문에 이해하지 못하더라도 당장 몇 백줄이 넘어가는 코드를 작성해야 한다면? 리액트를 쓰지 않는다는 것은 라이터를 옆에 두고 장작에 불 붙이려는 스프링캠프의 강xx씨와 같다고 볼 수 있다. (절대 비하의도는 없습니다. x호동님 사랑합니다.)

이 밖에도 컴포넌트 단위로 작성되어 구조를 한눈에 봐도 이해하기 쉬워지고, 가독성도 좋다는 장점이 있다.

문법

JSX는 HTML과 JS와는 다른 문법을 가진다.

1. 감싸인 요소

   컴포넌트에 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야 한다.

   function App() {  
     return (
       <div>
         <h1>리엑트를</h1>
         <h2>배워봅시다</h2>
       </div>
     );
   };
   

   2) 자바스크립트 표현

   자바스크립트를 사용할 땐 반드시 중괄호를 이용해야 한다. 중괄호를 이용하지 않으면 일반 텍스트로 인식.

   function App() {
     const text = '배워볼까요?'
     return (
       <div>
         <h1>리엑트를</h1>
         <h2>{text}</h2>
       </div>
     );
   };
   

   3) if문은 조건부 연산자로

   JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다. 따라서 조건에 따라 다른것을 렌더링 해야할 때는 JSX 밖에서 if문을 사용하거나 {}안에 조건부 삼항 연산자를 사용하면 된다. 후자를 추천

   function App() {
     const text = '배워볼까요?';
     const text2 = '배웁시다!';
     const condition = true;
     return (
       <div>
         <h1>리엑트를</h1>
         <h2>{condition ? {text}:{text2}}</h2>   
       </div>
     );
   };
   // 만약 특정 조건을 만족할 때는 보여주고 만족하지 않을때 보여주고 싶지 않다면? false 자리에 null을 입력하면 된다.
   

   4) class 대신 className

   JSX는 JS와 다르기 때문에 JS 키워드인 class보다 className를 사용해야 한다. class를 사용할 수는 있지만 웹 브라우저의 콘솔창을 확인해보면 경고 메시지를 확인할 수 있다.

   5) Map()함수 이용

   여러개의 HTML 엘리먼트를 표시할 때는 “map()”함수를 사용한다.

   const posts = [
     { id: 1, title: "리액트는", content: "어렵지만" },
     { id: 2, title: "리액트를", content: "정복하자" }
   ];
   function App() {
     return (
       <div className="App">
         {posts.map((el) => {
           return (
             <div key={el.id}>
               <h3>{el.title}</h3>
               <p>{el.content}</p>
             </div>
           );
         })}
       </div>
     );
   }
   

Component

컴포넌트는 하나의 기능 구현을 위해 여러종류의 코드를 묶어둔 단위를 말한다.
말이 조금 어렵다고 느껴지더라도 실제로 구현된 이미지를 보면 굉장히 이해가 빨리 된다.

가장 대표적인 유튜브 페이지를 살펴보면

전체적인 틀을 잡아주는 page 컴포넌트가 있고 그 안에 Top 컴포넌트를 포함해 sidebar 컴포넌트, 콘텐츠들을 보여주는 content 컴포넌트, 그리고 그 안에 또 세세한 컴포넌트들이 존재한다.
이렇게 UI 요소들을 나눠놓은 구역을 컴포넌트라 부르고, 페이지는 이 컴포넌트들을 합친 개념이라고 보면 된다.

컴포넌트단위로 나눠서 개발하게 되면 재활용이 용이하다는 장점이 있다. 하나의 코드를 여러곳에서 활용할 수 있기 때문에 관리도 쉬워지고 개발 시간도 단축된다.