React의 정의와 특징

소재현·2022년 7월 31일
0

React

목록 보기
4/6

정의

React는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다

특징

절차적(명령형)

  • 원하는 결과를 만들기 위해서 어떻게 해야하는지에 중점을 두는 방식
  • 원하는 결과를 만들기 우히나 절차를 프로그래밍 하는 방식

선언적

  • 원하는 결과가 무엇인지에 중점을 두는 방식
  • 원하느 결과가 무엇인지 선언하는 형태로 프로그래밍을 하는 방식

Virtual DOM

컴포넌트

  • 독립적이고 재사용할 수 있는 소프트웨어 구성 요소
  • 프론트엔드에서 컴포넌트란? "독립적이고 재사용 가능한 UI단위"
  • 컴포넌트 === 레고블럭
  • 레고블럭을 조립해서 큰성을 만들듯이 작은 UI를 조합해서 큰UI를 구성

컴포넌트의 특징

클래스 컴포넌트

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>This is Class Component!</h1>;
  }
}

export default App;
  • 클래스 컴포넌트에서는 위와 같이 반드시 render() 메서드가 있어야 하고, 그 안에서 화면에 보여줄 JSX(Javascript Syntax eXtension) 를 반환합니다. state 및 lifecycle(라이프사이클) API를 통해 관련 기능을 사용할 수 있습니다.

함수 컴포넌트

import React from 'react';

const App = () => {
  return <h1>This is Function Component!</h1>;
};

export default App;
  • 함수 컴포넌트는 render() 메서드 없이 JSX를 반환하는 방식으로, 클래스 컴포넌트에 비해서 훨씬 간단하고 단순하지만 state와 라이프사이클을 관리하지 못한다는 단점으로 인해 잘 사용되지 않았습니다. 하지만 React 16.8 버전에서 Hook 기능이 추가되면서 함수 컴포넌트에서도 state를 사용할 수 있게 되었고, 그 후부터 클래스 컴포넌트보다는 함수 컴포넌트가 더 많이 사용되기 시작했습니다.

JSX

JSX특징

  • SX는 HTML 태그와 유사한 형태로 사용하기 때문에 보기 쉽고 익숙합니다. 또한, 별도의 .html, .js 파일이 아닌 하나의 자바스크립트 파일에서 HTML 마크업과 자바스크립트 로직을 동시에 작성할 수 있기 때문에 편리합니다.

JSX 문법

  • JSX element
    JSX 문법을 통해 자바스크립트 파일 어디에서나 필요한 곳에 HTML처럼 작성할 수 있습니다. 아래 예시처럼 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있습니다.
const hi = <p>Hi</p>;
  • Javascript 표현식
    JSX 내부에서 자바스크립트 값을 출력하고 싶다면, { ... JavaScript... } 와 같이 { } 안에 유효한 자바스크립트 표현식을 작성할 수 있습니다.
// Greetings.js
import React from 'react';

const Greetings = () => {
  const name = '김개발';

  return <h1>{name}님, Welcome to Wecode!</h1>;
};

export default Greetings;
  • JSX attribute
    태그의 attribute name(속성명)은 camelCase로 작성해야 합니다. 또, attribute를 추가하고 싶을 때는 실제 HTML에서 쓰는 attribute name(속성명)과 다를 수 있으니 React 공식문서를 참고해주세요. 예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 합니다.
/* HTML
<h1 class="greetings">Welcome to Wecode!</h1>

/* JSX
<h1 className="greetings">Welcome to Wecode!</h1>
  • Event 처리하기
    기존에 바닐라 자바스크립트로 구현할 때, 해당하는 DOM 요소에 직접 접근해 이벤트 리스너(Event Listener)를 부착하는 방식으로 이벤트를 처리했습니다.
    JSX에서는, 태그를 작성할 때 직접 이벤트와 이벤트 핸들러(Event Handler)를 부여할 수 있습니다.
    • 이벤트는 앞에 on을 붙여 camelCase로 작성합니다.
    • 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.
// JS
const title = document.getElementsByClassName("title")[0];
title.addEventListener("click", handleClick);
// JSX
<h1 className="title" onClick={handleClick}>
  Welcome to Wecode!
</h1>
  • Inline Styling
    style 속성은 HTML에서 문자열로 받는 것과 달리 camelCase를 요소로 가지는 자바스크립트 객체를 받습니다. 그렇기 때문에 아래처럼 중괄호를 두 번 겹쳐서 쓰는 형태로 사용합니다. 바깥의 { }는 JSX 문법을 의미하며 안쪽의 { }는 자바스크립트 객체를 의미합니다.
// HTML
<h1 style="color:red;background-image:yellow">Welcome to Wecode!</h1>

// JSX
<h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Welcome to Wecode!
</h1>

  • Self-Closing Tag
    어떤 태그라도 self closing tag로 사용할 수 있습니다. <img>와 같이 하나의 태그가 요소인 경우, 기존 HTML은 /으로 끝내지 않아도 되지만 JSX에서는<img />와 같이 항상 /으로 끝내줘야 합니다. <div />와 <div></div>는 같은 표현입니다.

  • Nested JSX
    반드시 최상위를 감싸고 있는 하나의 태그가 있어야 합니다.

// Bad
const Greetings = () => {
  return (
    <h1>김개발님!</h1>
    <h2>위코드에 오신 걸 환영합니다!</h2>
  );
}

// Good
const Greetings = () => {
  return (
    <div>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </div>
  );
}

Bad 예시의 경우, h1 태그와 h2 태그를 감싸고 있는 태그가 없기 때문에 에러가 발생합니다. Good 예시처럼 최상위를 하나의 태그로 감싸주어야 합니다.
(JSX를 하나의 태그로 감싸야 하는 이유는, 리액트의 Virtual DOM에서 컴포넌트 변화를 효율적으로 비교할 수 있도록 한 컴포넌트는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다)

  • React.Fragment

앞서 JSX에서는 반드시 최상위를 하나의 태그로 감싸야 한다고 했습니다. 그런데 최상위를 감싸고 있는 태그에 특별한 의미나 스타일이 없다면 불필요한 요소를 생성하게 됩니다. 이 때 유용하게 사용되는 것이 <React.Fragment>입니다. Fragment는 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화할 수 있는 기능입니다.

const Greetings = () => {
  return (
    <React.Fragment>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </React.Fragment>
  );
};

축약형인 <> ... </> 문법으로도 동일하게 사용할 수 있습니다.

const Greetings = () => {
  return (
    <>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </>
  );
};
profile
소재현
이전 포스트

CRA

다음 포스트

React-Router & Sass

0개의 댓글