리액트의 시작

리액트(React)

리액트(React)란?

• 리액트(React)는 자바스크립트 라이브러로써 사용자 인터페이스(view)를 만들기 위해 사용된다.

리액트의 특징

• Virtual DOM
  • 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM처리 횟수를 최소화하고 효율적으로 진행합니다.
  • 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음과 같은 과정을 거칩니다.
    1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM에 리렌더링 합니다.
    2. 이전 Virtual DOM 에 있던 내용과 현재 내용을 비교합니다.
    3. 바뀐 부분만 실제 DOM에 적용합니다.
• props / state
  • 리액트 컴포넌트에서 다루는 데이터는 props와 state로 나뉩니다.
  • 간단히 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이라 할 수 있고 불변서을 가집니다. state는 컴포넌트 내부에서 선언하여 자유롭게 값을 변경 할 수 있는 데이터 입니다.
• JSX
  • JSX는 리액트에서 사용하는 자바스크립트 확장 문법입니다. 작성된 jsx는 babel-loader를 통하여 자바스크립트로 변환되어집니다.
  • jsx의 장점으로는 html코드와 거의 비슷하게 생겨 가독성이 높고 작성하기도 쉽습니다.
  • jsx에서는 html 문법 뿐만아니라 개발된 컴포넌트역시 jsx안에서 작성할수 있어 활용도가 높습니다.
• 라이프사이클 메서드
  • 모든 리액트 컴포넌트에는 라이프 사이클이 존재합니다. 컴포넌트 수명은 페이지에 렌더링 되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 까지 입니다.
  • 리액트로 프로젝트를 진행하다보면 컴포넌트가 렌더링 되기 직전이나 직후 또는 특정 시점에 업데이트를 해야하거나 업데이트를 막아야 하는 경우가 있는데 이런 과정을 라이프사이클 메서드를 통해 해결하게 됩니다.
  • 라이프사이클 메서드에는 여러가지가 있지만 리액트의 버전이 올라갈때마다 새로운 메서드가 생기고 삭제되기도 합니다.

개인 공부용으로 작성되는 리액트 정리 글입니다.

이 글은 velopert님의 "리액트를 다루는 기술"과 블로그 그리고 저의 개인 경험을 토대로 작성되었습니다.