리액트 문법, 괄호 규칙

https://bgeun2.tistory.com/19

React(리액트): JSX 규칙 (태그, 중괄호{}, 주석)

 : 많이 참고

https://bgeun2.tistory.com/20?category=878823 

React(리액트): props(properties), defaultProps, children

 : 시리즈로 있네

 

BABEL이라는 도구를 사용해서 XML 형태의 코드가 JS로 변환이 되는 것

그러기 위한 몇가지 준수해야할 규칙들

 

1.

return안이 JSX 문법, 그렇겠지 리턴값을 어떻게 할 테니까

 

2.

input, br같은것도 닫아줘야해, 셀프 클로징 태그 가능

 

3.

두개 이상의 태그는 꼭 하나의 태그로 감싸져 있어야 해

-- 처음에만 감싸줘야 되는게 아니었구나

 

4.

자바스크립트 값을 JSX 내부에서 사용할 때는 중괄호로 감싸줘야 한다

const name = '이거';

return <div>저걸 갖고오려면 : {name}</div>

 

5.

class가 아니고 className

: ▽return안에 있는 태그에 대해서도 style을 입힐 수가 있지 방법은 import

 

6.

JSX 내부에서(import해서 하는거 말고) 스타일을 사용할 때, 객체 형태로 만들어넣어줘야 작동.

const style = { background: 'gray', }

<div style={style}> 같이 { } 안에 넣어줘야 해

<header style={{background: 'gray'}}

두개 해줘야함

 

7.

주석은 작성하는 위치에 따라 사용법이 다름

태그 인라인과 바깥쪽이 다른듯?

인라인은 //

태그 바깥쪽은 {/* */}

어차피 컨 + /

 

8.

JSX에서 조건식

(1)삼항연산자 : 둘중 하나에 따라 보여줘야 하는 값이 다를 때

(2)&&연산 : 숨기고 보여주고 할 때

&&연산 설명 

JS에서 &라는 연산자는

조건 & 조건

True   True  ⇒ True

True   False ⇒ False

False  True  ⇒ False

False  False ⇒ False

 

근데 && 두개 쓰는 경우가 있다. 좀 빠른애야 서킽 오퍼레이터

&는 하나라도 거짓이면 거짓이잖아 를 이용해서

앞의 값이 True로 오면 뒤 값을 보고 계산

앞의 값이 False면 뒤의 값을 안봄

ex.name === '리액트' && <h1>리액트 입니다.</h1>

 : 앞이 name 이 리액트가 아니면 뒤의 <h1은 보지도 않는다

첫번째 피연산자가 truthy면 두 번째 피연산자를 반환함.

첫번째 피연산자가 falsy면 첫번째 피연산자를 반환하고 두번째는 무시.

=>그래서 { } 로 묶으면 false는 화면에 아무것도 안 표시돼서

=>맞으면 뒤에거 반환 아니면 없어짐

ex.

{which === "near" && <div>112</div>}

{which !== "near" && <div>115</div>}

 

 

9.

props에는 {name: "react", color: "red"} 과 같이 넣어준 값들이 객체 형태로 들어가 있다.

 

10.

defaultProps

 : 안넘겨줄 때 기본값 설정이되네

 

11.

children

 : 컴포넌트 안에 컴포넌트 넣고 싶을 때 App에서만 하면 안되고 그 부모로 가서 {children}을 써줘야되네 props네

저 블로그에 children이라는 것은 태그와 태그 사이에 들어있는 내용을 뜻하는거래 아하 근데 예시에 import없는거 보니까(App에만 있는거보니까) props는 App에서 작동하는건가봐?