React.js 란? (간단정리)

2022. 4. 27. 20:28예전자료/개발공부합시다

React : 17.0.0
nginx : 1.21
php : 8.1

위 환경을 docker-compose 이용해서 환경을 구성해 보고자, React.js 부터 공부를 시작해보고자 한다.

React란?

리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
출처 : 위키백과 
  • 페이스북에서 제공해주는 프론트엔드 라이브러리라고 볼수 있다.
  • 싱글 페이지 어플리케이션에서 사용 될 수 있다.

내가 그동안 프론트엔드에 많은 관심이 없어서 리액트를 왜 쓰는지 잘 모릅니다. 그래서 구글에서 이것저것 검색을 좀 해 보았는데..

여러 이유가 있었는데 리액트를 가장 많이 사용하는 이유는 주로 하단과 같다.

복잡하고 동적인 웹 어플리케이션에서 UI를 동적으로 나타내기 위해서는 많은 상태를 관리해야 하는 부담이 있기 때문

그럼.. 리액트 특징이 뭘까? 프론트에 관해 많이 알고 있지 않지만 리액트에 관해 공부 하면서 우선 이해 하는 것만 정리해 보았다.

1. 자바스크립트 기반

  • 별도의 프레임워크를 배울 필요 없고, 자바스크립트와 html 조금 아는 정도로 개발이 가능하다.

2. 가상 DOM

  • Virtual DOM은 가상의 Document Object Model을 말한다.
  • DOM Tree 와 같은 구조체를 Virture DOM 구조로 가진다.
    • 직접 DOM을 조작하는 것이 아니라 메모리의 가상 DOM을 조작하기 때문에 효율적이고 빠르다.

3. 컴포넌트 기반

  • Component는 독립적인 단위의 소프트웨어 모듈을 말한다.
  • UI를 여러 컴포넌트로 쪼개서 만들고 이 컴포넌트를 조립해 화면을 구상 한다.

 

머리털 나고 처음으로 리액트라는걸 보았는데 이 외에도 많은 특징들이 많은거 같다.

좀더 js에 대해 깊게 공부하고 나서 후에 docker-compose 구성을 완료할때쯤 이 포스팅에 좀더 내용을 채워 넣을수 있길 기대해 보면서 프론트 포문을 열어본다.