[React]1. JSX 문법

React_01_JSX문법

 

1. 리액트: 자바스크립트 라이브러리. 사용자 인터페이스를 만들기 위해 사용
2. 자바스크립트의 단점

• html과 js의 분리감→jsx로 html과 js문서 통합

 

 

• 직관적이지만 너무 긴 자바스크립트 문법
• 새 페이지를 들어갈 때마다 새로고침→Single Page Application(SPA)으로 개선

 

 

2. 라이브러리vs프레임워크

• 라이브러리: 이미 만들어놓은 기능을 사용하는 것

-버전이 업데이트되더라도 이전 버전과 호환이 잘 됨

• 프레임워크: 제공된 틀 안에 들어가서 주어진 규칙을 지켜 사용하는 것

 

3. 리액트의 역사: 페이스북 엔지니어 Jordan Walke가 개발

-원활한 커뮤니티가 형성되어 다양한 문서 제공

-React Native로 모바일 애플리케이션 제작가능

 

[환경구축]

◎Node JS: 자바스크립트 기반 서버

• Node JS 홈페이지에서18.17.0 LTS 다운로드

 

• 시작-powershell 켜기

       -설치되었는지 확인 

       -node -v + Enter

       -npm -v  + Enter

 

• 워크스페이스 경로로 변경하기(change directory):cd D:\React

• 서버 삭제: npm uninstall -g create-react-app
• 서버 설치: npm install -g create-react-app

 

• 리액트 프로젝트 생성: npx create-react-app project01

• 프로젝트 폴더 생성 확인: ls

 

• react 실행

-cd 프로젝트 이름

-npm start

 

react 로컬호스트: http://localhost:3000/

 

• vs code 실행

ctrl+c 2번

상위디렉토리 접근 cd ..

리액트 폴더 접근 code .

 

• 파일확장자 직관적인 확인을 위해 아이콘 테마 설치

 

• vs code에서 terminal 사용하기(powershell기능): Terminal-New Terminal

 

 

5. 디렉토리 기본구조

 

• index.html: 공간 생성

• index.js: index와 App을 연결 

 

• App.js: 공간에 데이터 삽입

 

6. JSX(JS+XML)

• 하나의 파일 안에 HTML 문법과 JS 문법을 동시에 작성할 수 있는 파일 확장자
•  장점

-JS는 HTML 요소에 접근할 때마다 document 객체에 접근해야 하지만

JSX는 하나의 파일 내에 HTML 요소가 있어서 바로 접근이 가능함

-가독성이 좋고 기능별 분류가 쉽다.

 

 

7.  JSX 문법

• 여러 요소가 있으면 반드시 부모 요소로 감싸야 한다.

-반드시 <div> 태그로 감쌀 필요는 없으며, <></>도 가능함

• JSX 내부에 JS 표현식 사용 가능: { } 사용

-단, 표현식 내부에서 if문 사용불가능

 

• if문 사용방법

1)조건이 하나일 때: && 연산자 사용

 조건&&실행문→조건이 true일 때 실행문 실행됨

 

2)조건이 두 개일 때: 삼항연산자 사용

조건 ? true일 때 실행문 : false일 때 실행문

 

3)조건이 세 개 이상일 때: 표현식이 아닌 JS 영역에 작성

 

• 리액트 문법 비교

-클래스 이름 지정: class→ className

-기존 html 요소(DOM 요소)를 사용할 때는 반드시 소문자로 작성 예)<div>

-대문자는 컴포넌트 작성할 때 사용

-content가 없어도 끝태그를 생략할 수 없다. 예)<br></br> 혹은 </br>

 

• 스타일링 적용방법

 1)css 파일에 스타일링 작성 후 js 파일에서 import하기

        -import 'CSS파일 경로' 예)import './App.css';

        -snake 문법으로 표기

        예)background-color: 'pink',

 

 2)객체 형태로 스타일링 작성

        -원하는 태그의 Style 속성으로 객체 입력

        -해당 객체 안에 원하는 스타일을 key:value 형태로 작성

        -카멜 문법으로 표기, 콤마(,)로 스타일 구분

        예)backgroundColor: 'pink',

 

        -적용할 태그에 스타일링 등록:  style={변수명}

 

• index.js에 있는 React.StrictMode를 실행하면 코드를 검사하여 두 번씩 실행

 한 번만 실행할 경우 React.StrictMode를 삭제