[React]개념정리

민서·2023년 2월 14일
0

React?

Component 기반의 UI 라이브러리
리액트는 컴포넌트의 집합체이며, 각각의 컴포넌트는 독립적이고 고립되어있으며 재사용성이 높아야함

리액트를 사용하는 이유?

  • 컴포넌트의 모듈화를 통해 불필요한 shootgun surgery를 줄여줌(유지보수 용이성 증가)
  • 선언형 프로그래밍으로 간결한 코드 작성가능
  • Virtual DOM 기능으로 브라우저 렌더링시 DOM조작의 비효율성을 개선, 성능향상을 기대가능

리액트는 라이브러리?

  • 프레임워크
    • 소프트웨어의 구체적인 구현이 가능하도록 하는 기능들을 모아놓은 개발환경
      ex)Angular, Vue
    • 처음 사용시 권장되는 모든 기능을 익혀야 하고, 자율성이 떨어지는 단점이 있음
  • 라이브러리
    • 큰 골격없이 좁은 문제들을 해결하기 위한 솔루션 단위의 모듈
    • ex)React(UI library)
    • 비교적 자율성이 높고 진입장벽이 낮음

리액트 컴포넌트의 정의

데이터로 받는 함수인자인 Props,
내부 상태 데이터인 State,
JSX문법으로 리턴되어 사용되는 render파트로 나누어진다.
상태가 변경될때마다 re-render된다.
그 과정은 Virtual DOM tree기능을 활용하여 이전 DOM tree 내용과 비교하게 되고,
업데이트가 필요한 노드만 브라우저에서 업데이트진행

리액트 컴포넌트 역사

리액트는 업데이트 되면서(v16.8) 함수형 컴포넌트를 지원
그전에는 클래스를 활용하여 컴포넌트를 사용하였으나 this를 바인딩하기 어렵거나 로직을 재사용하기 어려운 등의 단점들이 있었음

Hooks

Hooks는 값의 재사용이 아니라 로직의 재사용을 위한 것이다.
함수형 컴포넌트를 사용하며 재사용 가능한 함수를 Hooks로 만들어 각기다른 컴포넌트에서 재사용가능.(Hook ex.useState, useEfefect, 커스텀 훅)

리액트 사용시 자동설치되는 내부 중요 툴들

  • BABEL
    배포하기전, 작성된 최신문법을 예전문법으로 변경하여 사용자의 old version 브라우저에 대비
  • Webpack
    코드를 번들링하여 사용자에게 배포할 수 있도록 도와주는 모듈번들러. 여러 파일들을 번들링하여 사용자 브라우저에 전달 및 파일 정리 등등의 역할
  • ESLint
    자바스크립트의 정적 코드분석도구
  • Jest
    자바스크립트 테스트 프레임워크
  • PostCSS
    CSS 전처리기 중 하나로 중복되는 코드를 최소화

리액트 관련 공식사이트

https://reactjs.org/docs/getting-started.html
리액트 Docs(리액트의 클래스형 컴포넌트 Docs-예전엔 클래스형이였으므로)
https://beta.reactjs.org/
리액트 Docs Beta(리액트의 함수형 컴포넌트 Docs)
https://create-react-app.dev/docs/getting-started/
리액트App Docs

영어가 어렵더라도 공식사이트에서 배우는 연습을 하자!!

profile
실패보다 사람을 더 미치게 하는게 후회더라구요 // 공부는 티스토리에, 생각은 벨로그에, 일상은 네이버에 기록합니다

0개의 댓글