[React.js] 리액트에 대해 알아보자

여러가지 문서를 읽고 제가 이해한대로 작성한 글입니다. 잘못된 정보가 있으면 댓글로 정정해주세요 :)

React.js 란?

페이스북에서 제공하는 컴포넌트(component) 기반의 프론트엔드 라이브러리이다. 컴포넌트에 데이터를 내려주어 개발자가 설계한 대로 조립하며 사용자에게 보여진다. 프론트엔드 라이브러리엔 React를 포함해 Vue.js 등도 있다. 

 

React를 써야하는 이유?

React는 Javascript 기반으로 이루어져 있기 때문에 동적인 웹페이지를 만드는 것에 있어 최적이다. HTML과 CSS(Scss), 순수 자바스크립트로 이루어진 웹페이지는 정적인 페이지를 만들기에 적합하다. 그러나 최신 웹은 복잡하고 동적이므로 최신 웹을 만들기 위해서는 더 복잡하고 많은 상태를 관리해야한다. 이런 최신 웹을 만들기엔 React가 효율적이다.

 

React는 가상돔(Virtual DOM) 기반으로 작동하기 때문에 불필요한 렌더링 횟수를 줄여준다. 이만으로도 웹의 속도와 성능 향상에 크게 기여가 된다. 가상돔이란, 변화가 일어나면 가상의 DOM으로 바꾼 뒤 UI를 렌더링한다. 그리고 기존의 DOM과 비교후 변경된 부분만 적용이 되는 것이다. 한 마디로, 기존엔 변화가 일어날때 새로고침을 하면 전체 페이지 다시 렌더링 되었지만, React.js를 사용하면 전체 페이지가 렌더링 되는 것이 아니라 변경된 부분만 렌더링 된다는 것이다. 따라서 페이지 속도가 월등히 빨라진다.

 

또한 React.js의 인기는 엄청나서 커뮤니티가 매우 활성화 되어 있기 때문에 자료의 양도 방대하다. 그리고 web과 Native 앱 개발 두 가지에 모두 사용이 가능하다. React.js는 개발자들 사이에서 인기도 많고 컴포넌트 기반의 구조를 갖고 있어 속도도 월등하다. 또한 가독성이 좋고 컨포넌트 기반 이므로 재사용성이 높다. 따라서 큰 규모의 프로젝트를 진행할때 유용하다.

 

React.js 의 특징?

 

1. 컴포넌트(Component) 기반이다. 

2. 가상돔(Virtual DOM) 기반이다.

3. 데이터가 단반향으로 흐른다.

4. state와 props를 이용한다.

5. JSX 문법으로 짜여진다.

 

큰 특징은 이렇게 있다. 밑에서 아주 간단하게 설명만 할 것이다. 자세한 사항은 각각 게시물을 따로 작성하여 설명할 예정이다.

 

1. React.js는 컴포넌트 기반이다.

컴포넌트는 독립적인 단위의 소포트웨어 모듈을 말한다. 컴포넌트를 import해서 조립하면 코드를 반복하는 일 없이 화면을 구성할 수가 있다. 컴포넌트로 만들어진 웹 요소들을 다른 화면에 재사용하거나 다른 프로젝트에서도 다시 쓰는 것도 가능하기 때문에 React.js가 재사용성이 높다고 말하는 이유다.

import React from 'react';
import Menu from "./component/Menu";

class App extends Component {
	render(){
    	return(
          <div>
            <Menu/> 
          </div>
        )
    }
}

export default App;

예제 코드이다. 여기서 Component는 <Menu/>이다. 상단을 보면 Menu 컴포넌트를 import 해서 사용하고 있는 것이다. 이렇게 컴포넌트를 불러와 끼워넣으면 <Menu/> 컴포넌트는 다른 파일에서 재사용할 수 있다.

 

2. React.js는 가상돔(Virtual DOM) 기반이다.

앞서 말했듯이 리액트는 가상돔을 사용한다. 위에서 설명했으므로 짧게 요약하자면

변경 사항을 가상돔을 통해 렌더하고 기존의 돔과 변경된 가상돔을 비교하여 변경된 부분만 렌더링된다. 페이지 전체가 렌더링 되지 않고 변경된 부분만 렌더링 되기 때문에 속도가 매우 빨라진다.

 

3. 데이터가 단방향으로 흐른다.

양방향 데이터와 단반향 데이터의 차이는 HTML에서 변경된 내용이 데이터에 영향을 미치는가 미치지 않는가이다.

양방향 데이터를 사용하는 앵귤러 프레임워크의 경우 Javascript 로도 데이터 변경이 가능하고 Element 값을 이용하여 데이터의 변경도 가능하다. Javascript <-> HTML 양방향으로 데이터 바인딩이 가능한 것이다. 그러나 단방향 데이터는 Javascript -> HTML 로 단방향으로만 데이터 바인딩이 가능하다.

 

React.js 는 단방향 데이터 흐름이기 때문에 부모(상위요소)에서 자식(하위요소) 으로만 데이터 전달이 가능하다. 이렇게 데이터를 넘겨줄때 props와 state를 사용한다.

 

 

4. React.js는 props와 state 를 사용한다. 

 props  : 상위 Component가 하위 Conponent에게 내려주는 값.

 

하위 Component는 상위 Component에서 내려받은 데이터를 직접 수정하지 못한다. 앞서 말한 3번 처럼 데이터가 단방향으로 흐르기 때문이다. 쉽게 말해 읽기 전용 데이터라고 보면 된다.

 

 state: Component 내부에서 선언하는 값.

 

모든 Component들은 state를 가지고 있고, state에선 변경된 데이터를 관리할 수 있다. props랑 반대로 쓰기 전용 데이터라고 보면 된다. 

 

5. JSX(Javascript XML) 문법

react.js는 JSX 기반의 언어로 이루어져있다. JSX는 Javascript를 확장한 문법이다. XML이나 HTML과 비슷한 구문을 사용하지만 조금 다르다. JSX는 작성한 코드가 브라우저에 실행되기 전에 코드가 번들링되는 과정에서 Babel을 사용하여 일반 자바스크립트의 형태로 코드를 변환 시켜준다. JSX엔 문법규칙이 몇가지 있는데, 관련 사항에 대해서는 따로 포스팅할 예정이다.

공식 문서 :

ko.reactjs.org/docs/introducing-jsx.html#:~:text=JSX%EB%9D%BC%20%ED%95%98%EB%A9%B0%20JavaScript%EB%A5%BC,%EA%B8%B0%EB%8A%A5%EC%9D%B4%20%ED%8F%AC%ED%95%A8%EB%90%98%EC%96%B4%20%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4.

 

 

이렇게 짥게나마 리액트의 특징에 대해 알아보았다. 앞으로 하나하나 천천히 개별 포스팅으로 자세한 설명을 이어붙일 예정이다.