React 개념정리

React란?

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

React는 facebook에서 제공해주는 프론트엔드 라이브러리로 볼수 있고, 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다.

 

React를 쓰는 이유는?

React를 사용하면 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 사용

 

React의 특징?

 

1. Data Flow

React는 데이터의 흐름이 한 방향으로 흐르는 단방향 데어티 흐름을 가진다.

데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지고 있다.

 

2. Component 기반 구조

React는 UI(View)를 여러 컴포넌트를 쪼개서 만든다.

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

컴포넌트 단위로 쪼개는 이유는 전체 코드를 파악하기 쉽게하고 재사용성을 높이기 위해서다.

 

3. Virtual Dom

React는 이벤트가 발생할 때 마다 Virtual Dom을 만들고, 다시 그릴 때마다 실제 DOM과 전후 상태를 비교하여 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영한다.

(앱의 효율성과 속도를 개선)

 

4. Props and State

React에는 Props와 State가 있다.

Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 의미하며 쉽게 읽기 전용 데이터라도 생각하면 된다.

자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경 가능하다.

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

 

5. JSX

React 공식문서 참조

JSX란 ?
Javascript를 확장한 문법입니다.

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

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

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