React란?
- 참고블로그
- 웹 프레임워크
- 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
- facebook에서 제공하는 프론트엔드 라이브러리
- 현재 많이 활용되는 웹,앱의 View를 개발할 수 있도록 하는 요즘 핫!한 라이브러리이다.
장점
- React를 사용하지 않아도 프론트를 구성할 수 있다.
- React를 이용하여 사용자와 상요작용가능한 동적 UI를 쉽게 만들 수 있기 때문에 많이 이용됨
특징
- 단방향 Data Flow
- 대규모 애플리케이션일수록 데이터 흐름을 추적하기 어렵다.
- 데이터 흐름에서 일어나는 변화를 예측할 수 있도록 단방향 흐름을 가지도록 함.
- Component 기반 구조
- 소프트웨어를 독립적인 하나의 부품으로 만드는 방법.
- View를 여러 컴포턴트를 쪼개서 만든다.
- 여러 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.
- 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해진다.
- Virtual DOM
- 가상의 Document Object Model
- html, xml, css를 트리 구조로 인식하고 데이터를 객체로 간주
- 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해 효율성과 속도를 개선
- Props and State
- Props
- 부모컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터.
- 읽기 전용 데이터
- 변경 불가능. 최상위 부모 컴포넌트만 변경가능
- State
- 컴포넌트 내부에서 선언
- 내부에서 값 변경 가능
- 동적 데이터를 다룰때 사용.
- 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 State는 독립적
- JSX
- JSX의 사용은 필수는 아니지만 React에서 사용됨
- JavaScript의 확장문법
환경세팅하기
1. Node.js 설치
- Node.js 사이트에 접속하여
LTS
버전 다운로드
- 계속
Next
, 체크해야하는거 모두 체크
, 권한부여 예
- 설치완료 후 cmd 창 새로 열어서
node -v
입력했을 때 버전이 나오면 설치 완료
2. NPM 설치
npm -v
로 npm 버전 확인
3. 최신 버전의 Node.js 설치
npm install npx
입력하여 설치
npx -v
입력하여 버전 확인
4. Visual Studio Code 설치
- Visual Studio Code 다운로드
- 다음 누르고 PATH에 추가는 체크하고 계속 다음 누르기
5. React 참고문서