⚙️ React를 알아봅시다!

박원빈·2024년 4월 30일

리액트 ⚙️

목록 보기

1/14

자바스크립트를 위한 프레임워크나 라이브러리는 수없이 많은데,
우리는 왜 하필이면 React를 사용하는걸까? 하는 궁금증이 생겼습니다.
그 이유를 알기위해서 일단 차근차근 리액트가 무엇인지에 대해서부터 공부해보겠습니다.

React

리액트는 뭔가요?

자바스크립트 기반의 UI 라이브러리로, 사용자 인터페이스를 구축하는데에 도움을 주는 라이브러리입니다.

리액트는 어떻게 만들어졌나요?

Facebook의 SW 엔지니어 Jordan Walke에 의해 만들어졌고,
그 배경으로는 기존 페이스북에서 사용되고있었던 PHP 기반 시스템인 XHP와
함수형 프로그래밍 아이디어에서 영감을 받아 React를 만들었습니다.
2011년에 처음으로 페이스북의 뉴스피드에 배포되었고, 2012년에는 인스타그램에 배포되었습니다.
그리고 마침내, 2013년 5월 JSConf US에서 오픈소스화되었습니다.

참고자료
JSConfUS2013) Tom Occhino and Jordan Walke: JS Apps at Facebook

리액트는 어떤 특징이 있나요?

속성과의 단방향 데이터 바인딩

React에서는 state와 props를 통해 단방향 데이터 바인딩을 구현합니다.
만약 데이터를 변경하면 UI도 변경되지만, UI가 변경되어도 데이터는 변경되지 않습니다.
단반향 데이터 바인딩을 통해 코드상에서 예측 가능한 데이터의 흐름을 보장할 수 있습니다!
요구하는 기능에 따라서 양방향으로도 데이터 바인딩이 가능하지만,
React는 본질적으로 단방향 데이터 바인딩을 지향합니다.

// Props를 사용한 단방향 데이터 바인딩의 예제
function Hello(props: any) {
  return <div>Hello {props.name}!</div>;
}

function App() {
  return <Hello name="박원빈" />;
}

Virtual DOM (가상 돔)

가상 돔(VDOM)은 가상 UI 표현이 메모리에 유지되고, ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화되는 프로그래밍 개념입니다.

실제 DOM에서는 DOM이 업데이트될 때마다 업데이트 된 요소와 해당 하위 요소를 다시 랜더링하여 UI를 업데이트해야하지만, 가상 DOM 에서는 정확히 무엇이 변경되었는지 파악해(이 과정을 diffing 이라고 합니다.) 실제 DOM에서 해당 객체의 UI만 업데이트 해줍니다.

JSX

// JSX 사용
<div className="App">GeeksforGeeks</div>; 

// JSX 없음 
React.createElement( 
    "div", 
    { className: "App" }, 
    "GeeksforGeeks" 
);

JSX(JavaScript XML)는 XML같은 문법을 사용하는 ECMAScript의 확장입니다. HTML과 모습이 비슷해 보이는 JSX는 수많은 개발자들에게 친숙한 문법을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공합니다. 리액트 컴포넌트들은 일반적으로 JSX를 사용하여 작성되지만 꼭 그렇게 할 필요는 없습니다. (컴포넌트들은 순수 자바스크립트로 작성할 수도 있습니다) JSX는 PHP를 위해 페이스북이 개발한 다른 확장 문법인 XHP와 유사합니다.

React의 JSX를 사용할때의 장점