[React] React란?

HongDuHyeon·2022년 2월 25일

장비를 사는 것도 구하는 것도 쉽지않다.

1. 리액트(React.js)란?

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

페이스북에서 제공해주는 프론트엔드 라이브러리이며, 컴포넌트 기반으로 되어 있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여진다.
웹 페이지를 만들기에는 html, css 로도 충분하지만 html, css 만으로 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다. 이 때 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들 수 있기 때문에 리액트를 사용한다.

React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있다.
싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다.

2. React의 특징

react는 더 많을수도 있지만 크게 5가지로 구분해보았다.

1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX

2-1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.

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

2-2. Component 기반

Component는 독립적인 단위의 소프트웨어 모듈을 말한다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다.

예를 들어 스마트폰 액정이 고장나면 서비스센터에 가서 수리를 하면 된다.
스마트폰 배터리가 고장나면 배터리를 교체하면 된다.

액정,배터리를 Component에 비유할 수 있다.
react에서 액정과 배터리 같이 기능별로 모아놓은 Class가 있다.
그 Class를 Component라고 생각하면 된다.

Component 기반 구조를 사용함으로써 액정이 고장나면 액정부분만 배터리가 고장나면 배터리 부분만 교체하거나 고쳐주면 되는 것이다. 이로써 좀 더 유지보수, 관리, 재사용이 용이해진다.

class App extends Component {
  render() {
    return (
      <Header />
      <Navigation />
      <Content>
    );
  }
}

실제로 몇가지 테스트를 해봤지만 굉장히 관리가 쉬워진다.🧐

2-3. Virtual Dom

먼저, DOM은 Document Object Model의 약자입니다.
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다.

React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.

Virtual DOM은 가상의 Document Object Model을 말한다.

이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 한다.

2-4. Props and State

Props
Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다.
쉽게 읽기 전용 데이터라고 생각하면 될 것 같습니다! 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다.

부모 Component -> 자식 Component로 전달해주는 읽기 전용 데이터
자식 Component에서 props는 변경이 불가능하고, props를 전달해준 최상위 부모 Component만 변경가능

State
State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.

동적인 데이터를 다룰 때 사용
독립적이라 다른 Component의 접근이 불가능

공통점

두 객체 모두 랜더링 된 결과물에 영향을 주는 정보를 가지고 있다.

차이점

props는 (매개변수) Component에 전달된다.
state는 (함수내에서 선언된 변수) Component에 전달된다.

JSX

React에서 JSX 사용이 필수는 아니지만, React에서 사용되기 때문에 공식문서의 설명을 첨부해 간단히 정리해 보았다.

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

위와 같은 변수 선언도 JSX문법이다.
~~뭔가 낯설지 않다...~~

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

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
React 공식문서