[React] React란?

서론

이번 프로젝트를 통해 React를 접하게 되었습니다. 지금부터 React란 무엇인지, 정의와 특징에 대해 간략하게 정리해 보겠습니다!! 팀원과 함께 React를 통해 웹 페이지를 개발하게 되었는데, 정확하게 React가 무엇인지, 어떤 특징이 있고, 어떤 장점이 있는지 잘 모르기 때문에 저를 위해 정리를 해 보겠습니다.

 

React란?

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 

출처 : 위키백과

    1. 단일방향 데이터 흐름 & Flux

     React에선 데이터가 단일방향으로만 흐릅니다. 데이터 흐름을 단방향으로 제한함으로서 데이터를 추적하기 쉽고 디버깅을 쉽게 해줍니다. Flux는 데이터가 단일방향으로 흐르는것을 유지해주는 패턴입니다.

 

    2. JSX(JavaScript Syntax Extension) 

    자바스크립트 확장 문법으로 자바스크립트와 HTML을 합쳐놓은 듯한 형태입니다. HTML과 모습이 비슷해 보이는 JSX는 수많은 개발자들에게 친숙한 문법을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공합니다. 

 

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

    3. Component 기반 구조

    React는 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.

한 페이지 내에서도 여러 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성합니다.

 

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

    4. 가상 DOM

    리액트가 화면을 업데이트 하는 과정을 조금 더 효율적으로 수행하기 위한 기술입니다. 자세히 말하자면 DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 자주 렌더링을 하게 되고, 그만큼 PC 자원을 많이 소모하게 되는 문제를 해결하기 위한 기술입니다.

 

React는 인 메모리 데이터 구조 캐시를 만들고 결과 차이를 계산한 다음 브라우저에 표시되는 DOM을 효과적으로 업데이트합니다. 이로써 프로그래머는 마치 모든 페이지가 변경될 때마다 렌더링되는 것처럼 코드를 작성할 수 있는데, 실제로 React 라이브러리는 단지 실제로 변경되는 하위 컴포넌트만을 렌더링할 뿐이다.

마치며

React에대해 공부를 하면서 과연 내가 할 수 있을까 걱정은 되지만,,, 내가 선택한 길이니 이 악물고 버텨보겠습니다...!! :)

감사합니다!! 😂