React란?

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

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

즉, 현재 많이 사용되고 있는 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리로 볼 수 있음

React의 필요성

react를 사용하지 않아도, html과 css,javascript를 이용해서 웹 페이지를 만들 수 있지만, react를 사용하면 재사용 가능한 UI 구성요소를 만들 수 있음. 컴포넌트를 레고처럼 다루어 레고를 조립하듯이 컴포넌트를 조힙하여 UI를 개발하여서 유지보수에 유리함.
React를 사용하면 페이지 전체를 렌더링 하지 않고 렌더링이 필요한 부분만 렌더링이 가능함.

React의 특징

1. Data Flow
2. Component 기반구조
3. Virtual Dom
4. Props and State
5. JSX

1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가짐

2. Component 기반 구조

Component는 독립적인 단위의 소프트웨어 모듈
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법

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

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

class App extends Component {
  render() {
    return (
      <Layout>
        <Header />
        <Navigation />
        <Content>
          <Sidebar></Sidebar>
          <Router />
        </Content>
        <Footer></Footer>
      </Layout>
    );
  }
}

3.Virtual DOM

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

React는 이 DOM tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있음.
(Virtual DOM은 가상의 Document Object Model을 뜻함)

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

4.Props and State

• Props
  Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터(읽기 전용 데이터).
  자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경 가능.

• State
  State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적.

5.JSX