Class07(react)

2022. 07. 28. 수업내용 정리

react 개요.. 작업환경 구성..

• react

  페이스북에서 개발하고 관리하는 UI 라이브러리
  

  UI기능만 제공하고 전역 상태 관리나 라우팅, 빌드 시스템을 각 개발자가 직접 구축해야 합니다.
  

  리액트 팀에서 create-react-app 이라는 툴을 제공하여 개발환경을 쉽게 구축할 수 있습니다.

  create-react-app을 사용하기 위해서는 nodeJS가 설치되어있어야 합니다.

  
  
  

• 가상돔

  리액트는 가상 돔을 통해 UI를 빠르게 업데이트합니다.
  

  가상 돔은 이전 UI 상태를 메모리에 유지해서 변경된 부분만 실제 돔에 반영해주는 기술입니다.
  

  불필요한 업데이트를 줄여서 성능이 좋아집니다.

  
  
  

• 리액트와 같은 라이브러리나 다른 프레임워크를 사용하는 이유

  UI를 자동으로 업데이트 해주기 때문입니다.
  

  원래는 DOM을 직접 수정해야 하는데 쉽지 않습니다.

  
  
  

• CRA

  리액트 개발환경을 구축해주는 도구
  

  React 개발 환경을 직접 구축하려면 많은 지식과 노력이 필요하지만 (webpack, babel, jest, eslint, polyfill, HMR, CSS 후처리 등) CRA는 이것들을 모두 자동으로 구축해서 제공해줍니다.
  

  초기에 프로젝트를 구축할 때, CRA를 사용할 수도 있고, Next.js 라는 프레임워크를 사용할 수도 있습니다. 두 가지 방법의 차이점은 서버사이드 렌더링(SSR)의 지원 여부입니다.
  

  CRA는 서버사이드 렌더링을 지원하지 않으므로 서버사이드 렌더링이 필요한 프로젝트라면 Next.js 를 이용하여 구축하는 것이 좋습니다.

  
  
  

• 컴포넌트

  리액트로 만들어진 앱을 이루는 최소한의 단위
  

  데이터(props)를 입력받아 view(state) 상태에 따라 DOM Node를 출력하는 함수.
  

  컴포넌트 이름은 항상 대문자로 시작해야합니다.( ∵ 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문입니다.)
  

  UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩합니다.
  

  종류는 크게 함수형, 클래스형 2가지가 있습니다.
  

  
  

• 작업환경 setting

  1. 먼저 CMD 창을 열고 경로를 설정한 뒤 아래와 같은 명령어를 입력합니다.

     npx create-app {생성하고자 하는 프로젝트 폴더 명}
     

     설치 시작

     

     설치 완료

     

     
     

  2. 설치 후 VSC에 가서 생성한 폴더를 열어줍니다.

     

     
     

  3. 폴더를 불러오면 create-react-app 라이브러리에 의해 작업환경이 구축된 것을 확인하실 수 있습니다.

     

     
     

  4. App.js 및 App.css가 사용자가 작업하는 공간입니다. 작성된 코드를 지우고 작업을 시작하면 됩니다.

     추가로 작업한 코드를 화면으로 확인하고 싶다면, 터미널에 ‘npm start’라는 명령어를 입력하면 웹에서 작업한 내용을 확인할 수 있습니다.

     

  
  

  터미널에 ‘npm start’ 입력

  

  
  

  

  
  

  실행화면