리액트(React)

리액트의 등장배경

• 웹 브라우저를 통해 응용 소프트웨어의 기능을 이용할 수 있도록 만든 웹 서비스, 즉 웹(Web) 애플리케이션이 다양해졌다. 예) 인스타그램, 아마존 등

• 이에 따라 웹(Web) 개발이 복잡 해짐에 따라 HTML(Hyper Text Markup Language), css, js만으로는 한계가 생겼다.

• DOM(Document Object Model) 조작을 쉽게 해주는 라이브러리인 jQuery가 등장 하지만, 이또한 DOM을 직접 조작하는 방식에서 벗어나지 못했다.

• 따라서, 프론트엔드 개발을 좀 더 쉽게할 수 있는 프레임워크와 라이브러리가 필요해졌다.

  • 그 결과 앵귤러, 뷰, 리액트를 가장 많이 사용하고 있다.

프레임워크? 라이브러리?

• 위에서 프론트엔드 개발을 좀 더 쉽게 하기 위해 프레임워크나 라이브러리가 필요하다고 했는데 그렇다면 프레임워크는 무엇이고 라이브러리는 무엇일까?

공통점

• 복잡한 개발을 편리하게 하기 위해서 미리 작성해서 제공해준 코드이다.
• 필요한 기능을 미리 만들어서 사용할 수 있는 형태로 제공한다.
• 개발자들은 처음부터 모든 것을 다 만드는 것이 아니라 프레임워크와 라이브러리를 이용해서 편리하게 개발 할 수 있다.

차이점

• 프레임워크

  • 개발자가 작업을 하기 위한 전체적인 tool을 제공한다.
  • 개발자는 틀 안에서 그 방식에 맞춰서 작업을 한다.
  • 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있는 것, 일정한 형태를 가지고 다양한 형태의 결과물을 만드는 것이다.

• 라이브러리

  • 전체적인 틀이 아닌 하나의 기능만을 도구처럼 제공한다.
  • 개발자는 필요한 도구(라이브러리)를 가져와서 사용한다.
  • 즉 소프트웨어를 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임, 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것이다.

• 둘 다 공통의 기능을 사용하여 결과물을 만드는 것으로 비슷해 보이지만, 둘의 차이점은 어플리케이션의 제어 흐름의 권한을 누가 가지고 있느냐가 핵심이다.

제어의 역흐름 (IoC : Inversion of Control)

• 전통적인 프로그래밍에서 흐름은 프로그래머가 작성한 프로그램이 외부 라이브러리의 코드를 호출해 이용한다. 하지만 제어 반전이 적용된 구조에서는 외부 라이브러리의 코드가 프로그래머가 작성한 코드를 호출한다.

• 위의 정의에 따라서 프레임워크, 라이브러리의 차이를 기술해보면 다음과 같습니다.

  1. 프레임워크 : 정해진 프로그램의 틀에 맞게 사용자가 필요한 기능을 입력한다.
  2. 라이브러리 : 호출하는 개발자가 필요한 기능을 원할 때 호출한다.

• 쉽게 말해 요리에 비유를 하자면 프레임워크가 주방이라면 라이브러리는 주방 도구인것 이다.

• 앵귤러(Angular.js)와 뷰(Vue.js)는 웹 개발을 할 때 필요한 모든 기능과 툴을 포함하고 있기 때문에 프레임워크라고 할 수 있다.

• 뷰나 앵귤러 같은 다른 인기 프레임워크와 달리 불필요한 HTML(Hyper Text Markup Language) attribute(기존 프레임워크와 JS 라이브러리 솔루션의 표준 방식으로 자바스크립트를 HTML에 ‘끼워 넣기‘할 때 생성된다.)가 없다.

• 결과적으로 리액트는 JSX를 자바스트립트에 넣음으로써(말 그대로 거꾸로) 훨씬 간결하고 가독성이 뛰어나며 포괄적인 코드를 제공한다.

• 따라서 리액트는 ui를 만드는 기능만을 제공하기 때문에 라이브러리라고 할 수 있다.

왜 React인가?

• 앵귤러와 뷰는 자신들만의 문법을 갖고 있지만, 리액트는 자바스크립트 기반의 문법이기 때문에 자바스크립트에 익숙하다면 보다 쉽게 사용이 가능하다!

• 메타(구 페북)의 지속적은 관리하에 사용자가 많기 때문에 생태계가 활성화 되어있다.

  • 생태계 활성화가 되었다는 것은 리액트를 사용하면서 마주친 문제들에 대한 해결 방법이 존재하고 계속해서 발전해 나가고 있음 뜻한다.

• 리액트는 앞서 말했든, ui만을 만드는 기능을 제공하기 대문에 유연하게 확장할 수 있으면 실제 앱개발을 하는 React Native를 사용할수도 있다.