React 시작하기

정연희·2021년 9월 18일
0

React

목록 보기
1/1

목차

  • React란?
    - component의 필요성
  • JSX란?
  • props와 state
  • React Hook

React란?

"React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다."

출처: https://ko.reactjs.org/tutorial/tutorial.html

React는 동적인 UI 인터페이스를 만들기 위해서 사용되는 인기 있는 Javascript 라이브러리입니다. 이 라이브러리 없이도 DOM을 조작할 수 있지만, 사용자와의 인터랙션을 많이 발생하는 웹페이지일 경우 많은 이벤트 및 규칙을 요구합니다. 처리해야 할 이벤트, 변수 등이 많아지면 결국 업데이트도 많이 해야하게 되면서 효율성을 매우 떨어리는 상황이 발생하게 됩니다. 하지만 React는 Virtual DOM이라는, 실제 DOM이 아닌 JavaScript 객체로서의 가상 DOM을 사용하기 때문에 속도가 매우 빠르고 그 한계를 극복합니다. 이런 이유로 React라는 라이브러리가 생겼으며 많은 개발자들이 React를 기반으로 한 웹 프로젝트를 만들게 됩니다.

Component의 필요성

컴포넌트란 특정 기능을 단위로 하는 조각입니다. 웹페이지는 기본적으로 header, body, foter로 구성되어있는데 이런 것들도 컴포넌트로 볼 수 있습니다. 컴포넌트라는 조각들이 모여 한 웹페이지를 만든 것입니다. 이때, 이것의 특징은 재사용 및 확장할 수 있습니다. 컴포넌트는 독립적으로 반복하여 사용할 수 있으며, 컴포넌트들을 유기적으로 연결하여 효율적인 웹페이지를 만들 수 있다는 것입니다. 전자제품을 만들 때 기능별로 부품을 만들고, 튼튼한 부품을 다른 부품들과 연결하면 완성도 있고 효율적인 전자제품을 만들 수 있듯이, 웹페이지에서도 컴포넌트라는 부품 조각을 기반으로 만들면 효율적인 프로그램을 완성할 수 있습니다


JSX란?

JSX는 JavaScript XML의 약자로 React 내에서 HTML을 직접적으로 쓰고, react element를 만들 수 있도록 하는 React 문법입니다. 이는 자바스크립트 extension이기 때문에 자바스크립트와 HTML을 동시에 사용할 수 있도록 하며, HTML에 자바스크립트 변수를 바로 사용할 수 있는 템플릿 언어(Template language)입니다. 이때, 이 JSX는 React의 고유한 문법이기 때문에 기존 HTML과 자바스크립트 문법과 매우 비슷하지만 차이점은 존재하며, 그렇기에 JSX를 자바스크립트의 문법이 아닌 템플릿 문법의 일종으로 생각하면 됩니다. HTML과 자바스크립트를 모두 사용하는 특징 때문에 appendChild()createElement() 없이 HTML 요소를 쉽게 DOM에 추가할 수 있으며, component를 더욱 효율적으로 작성할 수 있습니다.

props와 state

props는 properties의 줄임말로 컴포넌트끼리 특정 값 또는 데이터를 전달하기 위한 수단입니다. 가령 아래 코드처럼 Board 컴포넌트에서 Square 컴포넌트로 데이터를 전달하고 싶다고 합시다. 그러기 위해서 Board 컴포넌트에서 Square를 호출할때 Square에 value라는 props를 설정하여 코드를 작성하면, Square 컴포넌트는value 값을 전달받게 됩니다.

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}

이 코드 같은 경우, props의 값을 받아 i의 값을 숫자로 표시하는 button을 return하게 됩니다.

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

이렇게 컴포넌트끼리 값을 주고받기 위해 사용되는, 함수 매개변수 같은 props와 달리, state는 컴포넌트 내에서만 사용 가능한 component의 상태 값입니다. state룰 사용하는 이유는 component 안의 요소에서 그 상태 값을 변경 및 이용하여 웹페이지에 나타내기 위해서입니다. 이때, 이는 클래스형 컴포넌트 내에서만 사용할 수 있습니다.

React Hook

"Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다."

출처: https://ko.reactjs.org/docs/hooks-intro.html

리액트 16.8부터 도입된 기능으로 상태 관리 및 렌더링 직후 작업 설정 등 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있도록 해주는 새로운 react 요소입니다. state는 원래 클래스 컴포넌트 내에서만 활용될 수 있기 때문에 함수 컴포넌트에서 사용할 수 없는 불편함을 많은 사람들에게 안겨줬습니다. 하지만 Hook는 state를 함수 컴포넌트 안에서도 사용할 수 있도록 합니다. 이것의 대표적인 기능에는 useState(상태관리)와 useEffect(렌더링 직후 작업 설정) 기능이 있습니다.

useState의 예시

함수 내에서는 useState를 이용해 다음과 같이 state를 추가할 수 있습니다.
import React, { useState } from 'react';
function Example() { // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
const [count, setCount] = useState(0);
}



출처

0개의 댓글