React란?

리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.
리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다.

출처 : 위키백과

위키 백과에 나와있듯이 React.js는 facebook에서 제공해주는 프론트엔드 라이브러리입니다.
Angular.js 나 Vue.js 다르게 자바스크립트 프레임워크가 아닙니다.🙅🏻‍♀️

React의 필요성?

react를 사용하지 않아도, html과 css, javascript를 이용해서 웹 페이지를 만들 수 있는데 왜 사용할까요?
“컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

React의 주요 특징

1. 단방향 데이터 바인딩
2. 선언형 프로그래밍
3. 가상 DOM 사용
4. Component 기반
5. JSX

단방향 데이터 바인딩

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. 보통 props라 불리는 속성들은 부모 컴포넌트로부터 컴포넌트에 전달됩니다. 컴포넌트들은 props을 하나의 불변의 값(자바스크립트 객체)들로 받습니다.

선언형 프로그래밍

React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다.
선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.

선언형코드와 명령형 코드를 비교하자면
명령형코드는

let people = [{name: "a", age: 20},
{name: "b", age:22},
{name:"c", age:10},
{name: "d", age: 12},
{name: "e", age: 43}];

let adult = [];

for(let i = 0; i < people.length; i++) {
	if(people[i].age > 19) adult.push(people[i]);
}

console.log('adult :', adult); 

선언형 코드는

let people = [{name: "a", age: 20},
{name: "b", age:22},
{name:"c", age:10},
{name: "d", age: 12},
{name: "e", age: 43}];

let adult = people.filter(people => people.age > 19);

console.log('adult :', adult); 

Virtual DOM 사용

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

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

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

Component 기반

React는 UI를 여러 컴포넌트(component)를 쪼개서 만듭니다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성합니다.

const Title = () => {
  return <h1>This is React component.</h1>;
};

const SubTitle = () => {
  return <h2>We can use this anytime</h2>;
};

const Button = () => {
  return <button>This is a Button</button>;
};

const App = () => {
  return (
    <div>
      <Title />
      <SubTitle />
      <Button />
    </div>
  );
};

컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽습니다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높습니다. 따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가집니다.

JSX

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

리액트의 태그는 문자열도 ,HTML도 아닌 희안한 태그를 사용합니다.

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

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

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

---

공식문서를 참조하여 작성하였습니다.
더 자세한 이야기를 보고싶다면 공식문서를 참조 바랍니다.
React 공식문서 바로가기 👩🏻‍💻