ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React란?
    React 2021. 6. 11. 11:15

    React란?

    React는 UI들을 독립적이고 재사용할 수 있는 부분으로 관심사를 분리하여 각각의 컴포넌트로 만들 때 도움을 주는 라이브러리입니다.

    리액트는 재사용이 가능한 컴포넌트를 만들고, 이 컴포넌트들이 모여 웹사이트를 구성하게 됩니다. 이 컴포넌트들은 자바스크립트 함수(또는 객체)로 이루어져 있기 때문에 필요한 사전지식으로 javascript를 알고 있으면 좋습니다.

     

    리액트는 함수형 프로그래밍을 적극적으로 활용한다는 특징을 기억 해두면 좋습니다.

     

    📌 리액트 코드 작성할 때 꼭 기억해야 할 개념

    1. render 함수는 순수 함수로 작성한다.
    2. state은 불변 변수로 관리한다.

    공식문서 참조 https://ko.reactjs.org/

     

    React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

    A JavaScript library for building user interfaces

    ko.reactjs.org

    사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

     

     

    탄생 배경

    Facebook에서 만든 Javascript 라이브러리로 리액트 등장 이전에 수 많은 라이브러리/프레임워크(jQuery, Vue.js, Angular.js 등)가 가지고 있는 다양한 문제들을 페이스북도 유사한 문제를 가지고 있어 코드베이스를 업그레이드 시킬 필요성을 느껴 개발한 것이 리액트라고 합니다.

     

     

    리액트 장점

    • 모바일 앱으로 발행이 쉽다.
    • 앱처럼 뛰어난 UX을 가지고 있다.
    • 비즈니스적 강점이 있다.
    • 여러 종류의 웹브라우저들마다 자바스크립트를 불러오는 방식이 달라 어려웠으나 리액트는 브러우저들 간의 통일성을 주어 이러한 문제를 해결해준다.
    • 데이터 유지 보수하기 좋다. web app의 크기가 커지면 자바스크립트 통제 및 관리가 어려운데 이러한 문제를 해결해준다.
    • 데이터 흐름 파악이 쉽다. 앱이 커지면 복잡성 증가로 데이터 흐름이 어디로 이어지는지 파악하기가 어렵고, 디버깅도 어려워지는 문제를 해결해준다.

     

     

    리액트 개발환경 Setup 하는 방법

    1. Nodejs 최신버전과 VS code 에디터 설치
    2. 리액트 설치
      // 터미널에 명령어 입력
      npm install react react-dom​

    'React' 카테고리의 다른 글

    Redux Thunk  (0) 2021.06.14
    react-redux 패키지와 Hooks 사용하기  (0) 2021.06.13
    Redux로 상태 관리하기  (0) 2021.06.12
    Presentational 컴포넌트와 Container 컴포넌트  (0) 2021.06.11
    useEffect Hook  (0) 2021.06.11
Designed by Tistory.