빅데이터 부트캠프 82일차 (React)

React

- 메타(구, 페이스북)에서 만든 프론트 엔드 라이브러리
- Single Page Applicationi(SPA) 개발시 사용

설치 

- vscode cmd에서 [npx create-react-app 폴더명]

실행 및 종료

- json파일이 있는 폴더로 위치 이동후 cmd에 npm start

- ctrl+c : React 종료

 

JSX 

- 리액트 구조 생성시 사용되는 JavaScript에 XML을 추가한 js 확장 문법

- 하나의 파일에 JavaScript와 HTML을 동시에 작성할 수 있어 편리함

규칙

- react에서는 태그 클래스명 설정을 class가 아닌 className 사용!

ex) <div class="A"> (X) => <div className="A"> (O)

 

- 태그는 반드시 닫혀야함
ex) <hr/> or <hr></hr>

- 2개 이상의 태그가 나열된다면 반드시 상위 태그로 감싸줘야함 (<> ~ </>를 사용해서라도)

ex) <><hr/><hr/></>

- react에서 js의 변수의 값(객체 자체는 포함 X)을 출력할 때 {}로 감싸 입력해야함

- JSX 시작 태그 내부에 style 프로퍼티 입력시 CSS의 정보를 가진 객체를 입력해야함 (단순 텍스트 X)

ex)  let title = 'React.js';

       let man = {name: 'tom', age: 28};

       let gold = {color:'gold', fontSize: "120px"};

      <div style={gold}>{title} {man.name} {man.age}</div>

 

- 조건문 작성시 if문 사용불가 => 삼항연산자 혹은 축약표현 사용

※ 삼항연산자 = [(조건) ? 참일때 실행문 : 거짓일때 실행문] 

 

- export를 통해 받은 라이브러리를 비구조화 할당을 해야할 경우에는 import 시에 {}를 입력해줘야 함