JSX 문법

0. JSX 문법이란?

-Javascript 안에서 html 문법을 사용하도록 함.

 

0. class

-html에서 > class

-jsx > className

 

0. css 적용

-style ={{ }}

 

0. import 중괄호 or not

-import { user } from user : just export

-import User from user : export default 한 것

 

0. 상대경로

  1) 확장자를 붙이지 않아도 된다. (자동으로 붙여준다.)

 

  2) 상대경로 작성방법

     : 같은 폴더 안에 있는 경우 :  ' ./ ' 로 시작

     : 바깥에 있는 것은 : ../

      : ' ./ ' 를 붙이지 않으면 NodeJS 라이브러리에서 모듈을 찾는다.

      : 모듈도 불러올 수 있다? module.exports 한 것

 

0. 중괄호

-표현식 : { }

-문자열 : " "

****JS 표현식이면 무조건 { }

**중괄호와 따옴표 둘다 쓰지 말것

 

0. ``

-내부에 JavaScript 객체나 함수가 전달 될 때 이를 따로 추출하기 위함.

ex)  `http://localhost:5000/${video.thumbnail}`  : http...를 문자열로 살리면서 { }는 표현식으로 추출

 

-보통 중괄호로 한 번 더 감싼다.

ex1) className = { ` combine ${ PWClassName } ` }

ex2) style = { { background : ` ${ Subscribe ? '#000' : '#111' } ` } }

 

0. ${ }

: 변수(variable) 

 

: JSX 내부의 다른 모든 JavaScript 구성 요소는 중괄호 안에 템플릿 문자열을 사용하십시오.

>> 변수를 "삽입"하려면 달러 기호를 사용하고, 삽입하려는 변수가 포함 된 중괄호를 사용하십시오.

 

ex ) {`string ${variable} another string`}

 

 

0. src = { `http://localhost:5000/ ...` }

: 서버를 의미함

 

0. exact path="/video/:videoId"

: 동적 세그먼트  =>  콜론(:) 사용  =>  route와 일치하면 this.$route.params로 표기됨

 

 

0. 콜론 ( : )

ex)  userTo : req.body.userTo

>> 이름 : 데이터

>> '이름' 에 '데이터'(req.body.userTo)를 불어 넣는다.    (이름이 의미가 있지는 않은 듯. 그저 데이터를 저장시키기 위한 agent)

 

 

0. 삼항 연산자

  1) { Subscribed ? 'Subscribed'   : 'Subscribe' }

      - 참 : 물음표(?) 수식

      - 거짓 : 콜론(:) 수식

= Subscribed 결과가 참이면 Subscribed라 표기하고, 거짓이면 Subscribe라고 표기한다.

 

++) A ? 'a' : B ? 'b' : 'c'

=A이면 'a'를 출력 / A가 아니고=>B이면 b를 출력, B도 아니면 c출력 (if문 안에 if문 형식)

 

   2) A !== B && C

=A와 B가 같지 않을 때만 C를 출력하라.

 

 

0. console.log

React - return()부분에서 console창 띄우기 >> 중괄호 안에 넣기

{ console.log( ) }

 

0.  

: none-breaking space = 끊어지지 않은 공란

: 입력한 개수대로 '공란'을 표시한다.

ex) <span></span>&nbsp;&nbsp;&nbsp;

 

0. _id

_id : 문서의 기본 키