리액트(React)란?

React란?

React는 자바스크립트 라이브러리 중 하나이며 UI(User Interfact)를 만들기 위해 사용되는 웹 프레임워크입니다.

 

 

 

 

특징

1. 데이터 흐름(Data Flow)이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다.
2. 컴포넌트 기반 구조로 재사용성이 뛰어납니다.
3. Virtual DOM기반으로 가볍습니다.
4. 컴포넌트는 props와 state를 가집니다.

 

 

Data Flow

위 특징과 같이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다.

규모가 큰 프로젝트에서도 데이터 흐름에서 일어나는 변화들을 쉽게 예측 가능할 수 있습니다.

 

(양방향 데이터 흐름을 가지게 되면 프로젝트 규모가 클 경우 데이터 흐름을 추적하기 복잡해지는 경향이 있습니다.)

 

 

 

Virtual DOM (가상돔)

DOM은 Document Object Model의 약자입니다.

DOM은 html, xml, css 등 트리 구조로 인식하고 데이터를 객체로 생각하고 관리합니다.

 

이벤트가 발생할 때마다 가상돔을 만들고

 

 

컴포넌트 기반 구조

React로 웹 서비스를 개발할 경우, 컴포넌트(Component)를 사용하여 UI를 만듭니다.

여러 컴포넌트를 만들어 컴포넌트들을 조합하여 화면을 구성합니다.

이렇게 컴포넌트를 재사용 할 수 있으며 재사용을 통해서 개발 생산성을 향상시킬 수 있습니다.

코드의 관리가 용이해집니다.

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

Header나 Footer같은 구조를 독립된 컴포넌트로 만들고 컴포넌트를 조합하여 화면을 구성합니다.

 

 

 

props와 state

React는 내부적으로 props와 state를 가집니다.

 

props

props는 상위 컴포넌트에서 하위 컴포넌트로 전달해주는 데이터를 뜻 합니다.

상위 컴포넌트에서만 prps를 변경할 수 있으며 전달 받은 하위 컴포넌트에서는 props를 변경할 수 없습니다.

 

state

state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다.

동적인 데이터를 다룰 때 사용하며, 클래스 컴포넌트에서만 사용할 수 있습니다.

 

 

 

 

 

항상 부족한 부분이나 피드백할 부분을 댓글로 남겨주시면 적극적으로 수용하여 수정하겠습니다.