[ReactJS]노마드코더 리액트 기초-01.리액트란?

React.js

[ReactJS]노마드코더 리액트 기초-01.리액트란?

FE코크 2021. 1. 14. 21:07

노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다.

React.js란?

리액트 홈페이지에 들어가면 "사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" 문구가 적혀 있다. 즉 리액트는 프론트엔드 라이브러리이다. React는 컴포넌트 기반으로 데이터를 컴포넌트에 보내면 설계에 따라 UI가 만들어져 사용자에게 보여준다.
React를 사용하지 않아도 HTML, CSS를 사용하여 웹페이지를 만드는데 문제가 없다. 하지만 동적인 데이터를 UI에 보내기 위해 복잡하고 많은 상태를 관리해야 한다. 쉽게 말해 DOM를 변형시키기 위해서 특정 DOM을 선택하고 특정 이벤트가 발생하는 것에 대한 변화를 주는데 만약 웹 애플리케이션의 규모가 커지면 직접 DOM을 조작하기에는 너무 복잡하고 코드가 지저분해진다. 이런 문제점을 React를 사용하면 사용자와 상호작용할 수 있는 UI를 쉽게 만들 수 있다.

DOM(Document Object Model) 이란?
HTML이나 XML의 interface이다. 프로그래밍 언어를 사용하여 문서의 내용이나 스타일 등을 변경할 수 있다.

React.js 특징

React는 선언형이다.
React는 JSX 문법을 사용한다.
React는 컴포넌트 기반으로 재사용성이 뛰어나다.
React는 Virtual DOM(가상돔)기반으로 가볍다
React는 state와 props를 가진다.

1. 선언형(Declarative)이란?

개발자가 프로그래밍을 할때 어떤 방식으로 프로그래밍을 할 것인가에 대해 결정을 할 때면 무엇을 "어떻게"에 초점을 맞춘 명령형 Imperative프로그래밍, "무엇을" 할 것인가에 초점을 맞춘 선언형 프로그래밍이 있다.

그중 React는 선언형 프로그래밍이다.

명령형과 선언형 프로그래밍에 관해 자세한 글은 아래 링크에 있습니다.

boxfoxs.tistory.com/430

명령형 프로그래밍 VS 선언형 프로그래밍

명령형 프로그래밍과 선언형 프로그래밍에 대한 비교를 어디선가 한 번쯤은 접해봤을 거라 생각합니다. 그리고 그 둘이 실제로 무엇을 의미하는지 검색을 해보셨다면 아마 아래와 같은 정의를

boxfoxs.tistory.com

즉 React는 DOM을 직접 조작하지 않고 무엇을 할 것인지를 알려주는 선언형 프로그래밍이다. 다시 말해 document.createElement와 같이 DOM을 조작하여 여러 이벤트 간의 연결을 신경을 쓰지 않고 JSX 문법을 통해 무엇을 할 것인지에 대해(화면 설계 View) 초점을 맞춰서 개발을 함으로 다른 것에 관심을 분리하여 높은 생산성을 보장할 수 있도록 해준다.

2. JSX 문법

JSX는 JavaScript를 확장한 문법입니다.

React에서는 UI의 생김새를 정의할 때 사용하는 문법이다.
HTML와 같은 모습이지만 JavaScript이다.
리액트 컴포넌트 파일에서 XML 형태로 작성하면 babel이 JSX를 JavaScript로 변환시켜 준다.
JSX가 JavaScript로 변환되려면 몇 가지 규칙이 있다.

JSX에 대한 자세한 내용은 홈페이지에서 확인할 수 있습니다.

ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

A JavaScript library for building user interfaces

ko.reactjs.org

JSX 예시

const element = <h1>Hello, world!</h1>;

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

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

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

3. 컴포넌트 및 재사용성

앞서 설명했듯이 React는 선언형 프로그래밍이고 JSX문법을 사용한다고 했다. 다음과 같이 React는 JS 코드 안에 HTML을 하나의 유닛에 담아 복잡한 웹 사이트를 여러 유닛으로 나눠 관심사를 분리시킬 수 있다. 이 유닛을 "컴포넌트"라고 한다.(물론 뷰를 담당하는 컴포넌트, 로직을 담당하는 컴포넌트로 구분해서 구현할 수도 있습니다.)

function Hello({ name }) {
  const handleClick = () => {
    alert(name);
  }
  return (
    <button onClick={handleClick}>hello</button>
  );
}

이렇게 컴포넌트들을 모아 UI(User Interface)를 구현하고 UI들은 사용자에게 View라는 형태로 제공되며, UI를 구성하는 독립적인 개체인 컴포넌트는 재사용이 가능합니다.

React에서 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눠진다. 이에 대한 내용은 다음에 정리하겠다.

4. Virtual DOM(가상돔)

React를 사용하지 않아도 HTML, CSS를 사용하여 웹페이지를 만드는데 문제가 없다. 하지만 동적인 데이터를 UI에 보내기 위해 복잡하고 많은 상태를 관리해야 한다. 쉽게 말해 DOM를 변형시키기 위해서 특정 DOM을 선택하고 특정 이벤트가 발생하는 것에 대한 변화를 주는데 만약 웹 애플리케이션의 규모가 커지면 직접 DOM을 조작하기에는 너무 복잡하고 코드가 지저분해집니다. 이런 문제점을 React를 사용하면 사용자와 상호작용할 수 있는 UI를 쉽게 만들 수 있다.

처음 React를 설명하면서 사용자와 상호작용할 수 있는 UI를 쉽게 만들수 있다고 했는데, 바로 Virtual DOM 때문에 가능합니다.

원래 DOM에 변화가 생기면 다음과 같은 많은 과정을 거친다.

하지만 React에서 Virtual DOM은 가상의 DOM으로 브라우저에 실제로 보이는 DOM 이 아닌 메모리에 가상으로 존재하는 DOM으로 Javascript 객체이다. 그래서 실제로 브라우저에 DOM을 보여주는 것보다 속도가 훨씬 빠르다. 다음과 같이 React의 Virtual DOM은 DOM의 상태의 변화를 감지해서 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링 후, 모든 연산이 끝나면 변경된 부분을 실제 DOM에 한 번에 적용시킨다.

DOM과 Virtual DOM에 대해 자세한 글은 아래의 링크에서 확인할 수 있습니다.

noogoonaa.tistory.com/53

돔(DOM)과 가상돔(Virtual DOM)에 대해서 알아봅시다.

개발자 특히 웹 개발자라면 한번쯤은 들어봤을 법한 단어 바로 돔(DOM) 입니다. 현재 웹 프론트엔드라는 세계가 존재할 수 있도록 도와주는 굉장히 중요한 개념입니다. 하지만 말만 들어봤지 정

noogoonaa.tistory.com

5. state, props.

컴포넌트에서 다루는 데이터는 state와 props 두 개로 나눠진다.

state

state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
state는 상태 객체로 컴포넌트에 속하는 property 값들을 저장한다.(상태가 변하면 컴포넌트는 re-render 된다.)
state를 정의할 때는 class fields 문법을 사용해서 정의한다.(class fields를 사용하지 않으면 constructor에 넣는다. 편의를 위해 class fields를 사용함)
예시

import React from "react";

class App extends React.Component {
  state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

props

props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 값이다.
자식 컴포넌트에서는 props를 받기만 하고, 직접 수정할 수는 없다.
예시(App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 전달할 경우)

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

React를 알아 가고 있습니다.
부족한 부분은 댓글로 남겨 주세요.

티스토리