리액트(React)란?(개념정리)

리액트(React)이란 무엇인지, 사용하는 이유와 사용하면서 체크해봐야 할 것들에 대한 리스트를 정리하려고 합니다.

1.React란?

리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 

리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.

출처 : 위키백과

API - 위키백과, 우리 모두의 백과사전

 

2. React의 특징

 1) Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다.Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다.

 2) Component 기반 구조

리액트는 화면의 한 부분을 컴포넌트 라는 단위로 나눌 수 있으며 독립적으로 관리할 수 있다. 대규모 웹 애플리케이션에서 컴포넌트는 역할과 기능에 따라 따로 관리하기 용이하며, 반복되는 부분을 대체할 수 있게 해주어서 코드 재사용성을 높여준다. 또 컴포넌트 기반의 화면을 구성한다면 블록 쌓기처럼 컴포넌트를 쌓아서 빠르고 효율적으로 화면을 구성할 수 있다. 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가집니다.

 3) Virtual Dom

React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있습니다.  수정사항 발생시 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 합니다.

Virtual Dom에 관한 자세한 설명에 따른 게시글 
-> Virtual Dom이란?:  https://pspp103-jhn.tistory.com/3

 4) Props and State

• Props
  Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다.
  쉽게 읽기 전용 데이터라고 생각하면 될 것 같습니다! 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다.
• State
  State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.

 5) JSX

JSX란 ?
Javascript를 확장한 문법입니다.

(추후 업데이트 예정)

+) 추가 장점

! 선언형과 간결성

// 명령형 방식 (HOW) function double (arr) { let results = []; for (let i = 0; i < arr.length; i++) { results.push(arr[i] * 2) } return results; }

// 선언형 방식 (WHAT) function double (arr) { return arr.map((item) => item * 2) }

선언형 스타일과 가상 DOM이 만나면 엄청난 효율성을 발휘한다. JQuery와 명령형 스타일의 조합일 때에는 데이터의 변화를 예측해서 변화해야 하는 부분에 조건을 만들어 JQuery의 메서드를 이용해 직접 DOM을 조작해야 한다. 하지만 선언형 스타일과 가상 DOM의 조합은 데이터 변화에 따라 변화된 부분에 영향을 받는 부분의 UI만 자동적으로 변경되게 할 수 있다. 이 조합은 결과적으로 개발자의 실수와 신경 쓸 부분을 줄여주고 코드를 간결하게 만들어준다.

 

3. 리액트 체크리스트

1. SPA에서 데이터 변화가 있는 부분만 빠르게 랜더링 되고 있는지
2. 가상 DOM이 아니라 DOM를 직접 제어하는 부분이 많은지
3. 데이터 변화와 라이프 사이클을 잘 이해해서 랜더링을 최적화하고 있지
4. JSX에서 선언형 프로그래밍을 잘하고 있는지
5. UI는 사용자의 상호작용에 바로 반응하고 있는지
6. 리액트에 같이 구성된 다른 라이브러리를 잘 조합하고 있는지

 

참고자료
https://codechaser.tistory.com/81

선언형 프로그래밍이란 무엇일까?

https://velog.io/@wooder2050/%EB%A6%AC%EC%95%A1%ED%8A%B8React%EB%8A%94-%EC%99%9C-%EC%93%B0%EB%8A%94-%EA%B1%B4%EB%8D%B0

리액트(React)는 왜 쓰는 건데⁉

---

* 클래스 컴퍼넌트 , 함수 컴퍼넌트 

 > 클래스 컴퍼넌트: 리액트에서 제공하는 컴퍼넌트 클래스를 extends, 상속해서  만들수 있는데 컴퍼넌트가 스테이트가 있고 주기적으로 업데이트 되어야한다면 클래스 컴포넌트 
 

 > 함수 컴퍼넌트 : function을 이용해서 만들수 있고 항상 정적인 변하지않는 데이터가 표기된다면 이를 이용해서 만듬 한가지의 기능을 수행하는 단위 

 단 리액트 16.8부터는 리액트 훅이 도입되어 함수  컴퍼넌트 안에서도 스테이트를 가질수 있음

import react from 'react';

class LikeButton extends Component {
    state = {
    numberOfLikes : 0, 
    };
    // state 컴포넌트 안에 데이터를 나타내는 오브젝
    render () {
     return <button>
     {this.state.numberOfLikes}
     </button>;
    }
    //어떻게 사용자에게 보여지는지 (html과 비슷)jsx라고 함 
    // state 데이터가 바뀌면 render 함수가 재호출 (상위가 바껴도 하위모두 재호출)
} 
//extends 상속  LikeButton 는 Component 클래스를 상속
LikeButton, Component 는 클래스명