React Overview
리액트 개요
- 메타(구 페이스북)에서 만든 UI 개발을 위한 JavaScript Library이다.
- 정형화되고 재사용 가능한 컴포넌트를 기반으로 UI를 개발하기에 적합하다.
- Declarative·Component-Based 라이브러리이다.
Declarative Library (선언형 라이브러리)
- 일반적인 C, Java, Python과 같은 Imperative PL(명령형 프로그래밍 언어)은
무엇을 실행해야 하는지에 초점을 맞춰 알고리즘이나 로직을 개발하는 반면,
선언형 프로그래밍 언어에서는 무엇을 표현해야 하는지에 초점을 맞추고 개발자가 이를 정의하는 방식이다.
- HTML 처럼 Tag를 이용해 어떤 위치에 무엇을 그려야 하는지를 정의하는 형태가 선언형 언어의 대표적인 예시이며,
React도 컴포넌트, 속성, 상태를 통해 화면을 그려나간다.
Component-Based Library (컴포넌트 기반 라이브러리)
- Component는 버튼처럼 작은 단위에서 여러 컴포넌트를 포함하는 복잡한 컴포넌트까지
다양한 범주를 아루느는 개념이다.
- 리액트에서는 컴포넌트 단위로 화면에 그려지므로
너무 많은 컴포넌트를 하나로 결합하면 화면의 넓은 부분을 다시 그려야 할 수 있어
적절한 단위로 컴포넌트를 나누는게 중요하다.
- 컴포넌트는 재사용이 가능하다.
ReactNative (리액트 네이티브)
- 스마트폰 애플리케이션 개발용 라이브러리로, iOS와 Android에 대한 크로스 플랫폼 애플리케이션을 만들 수 있다.
CRA (create-react-app)
- 리액트 애플리케이션을 손쉽게 생성하기 위한 도구이다.
npx create-react-app <app_name>- npx를 통해 create-react-app을 설치하고 프로젝트의 실행 및 생성까지 한꺼번에 수행할 수 있다.
npx
- npm으로 필요한 패키지를 일일히 설치하지 않아도 자동으로 해당 패키지를 찾아 실행까지 이행하는 도구이다.
초기 생성 파일
- node_modules
- 추가로 설치하는 모듈이 설치되는 폴더이다. - public
- 공용으로 사용할 static 파일(css, image 등)을 보관하는 폴더이다. - src
- 앱 개발에 필요한 소스 코드를 작성하는 폴더이다.
- index.js는 앱이 실행되면서 가장 먼저 실행되는 파일이다.
- App.js에는 Browser에 그릴 JSX를 정의하는 파일이다.
- App.test.js는 컴포넌트 테스트를 위한 파일이다. - package.json
- 앱 정보, 환경 설정, 스크립트 및 패키지의 의존성 정보 등을 포함하는 파일이다.
React Main Concepts (리액트 메인 컨셉)
- 컴포넌트 구성
- JSX와 렌더링
- Props와 컴포넌트
- 이벤트 핸들링
- 리프팅 스테이트 업
props
- 상위 Component로부터 상속받은 Property
state
- Component가 가지는 Property
Reference: reactjs.org (URL)
Reference: 파이썬과 리액트를 활용한 주식 자동 거래 시스템 구축
(박재현 저, 위키북스, 2020)
