React란?

🌱 프로젝트를 시작하기 전에 먼저 react란 무엇인가 알아봅시다.

 

React란?

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

 

- react는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다.

- 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.

 

즉, 현재 많이 활용되고 있는 웹/앱의 View를 개발할 수 있도록 하는 라이브러리라고 볼 수 있습니다.

 

React의 특징

1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능하도록 단방향 흐름을 가지도록 했다고 합니다.

2. Component 기반구조

Component는 독립적인 단위의 소프트웨어 모듈을 말합니다. 즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있습니다.

react는 UI를 여러 컴포넌트로 쪼개서 구현합니다. 한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성합니다. 코드를 반복 입력할 필요 없이 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용지해진다는 장점을 가집니다.

3. Virtual DOM

DOM은 Document Object Model의 약자입니다. DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다. react는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있습니다. 이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 합니다.

4. Props and State

- Props

부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다. 쉽게 읽기 전용 데이터라고 생각하면 될 것 같습니다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다.

 

- State

컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다.

5. JSX

Javascipt를 확장한 문법입니다. React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더닝 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다. react는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결되 유닛으로 관심사를 분리합니다. React는 JSX 사용이 필수가 아니지만, 사용하는 것을 권장합니다.

 

 

다음 포스팅에서는 Creat-React-App을 이용해 react 프로젝트를 시작하는 방법에 대해서 알아보도록 하겠습니다..!