코드 이해하기

코드를 불러 울떄 모듈을 불러와서 사용할 수 없는데 이러한 기능은

Node.js 가 이것을 가능하게 해준다 (웹이 아닌곳에서 불러오기가 가능해짐)

이렇게 불러오는건 웹에서는 따로 번들러를 사용한다

• 웹팩
• Parcel
• browserify

등이 있다

대표적으로 웹팩의 로더를 사용하면 여러 모듈을 가져오는데,(SVG,CSS등) 최적화 과정에서는 여러개 파일로 분리 할수도 있다

여튼 이러한 로더는 원래 직접 설치 해야하지만

리엑트를 만들때 사용했던

create-react-app

이 설치, 설정들 번거로운 작업을 다 해준다

JSX란?

JSX는 자바스크립트의 확장 문법(공식적 ㄴㄴ)이고 리엑트에서 사용된다

JSX의 장점

• 보기 쉽고 익숙하다 ⇒ HTML요소를 하나한 추가 할필요가 없음
• 더욱 높은 활용도 ⇒ HTML 태그를 사용가능함

---

JSX문법

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야함

감싸는 방법

<부모> </부모> 
<Fragment> </Fragment>
<> </>

2. JS를 표현하려면?

JS의 표현식은 ⇒ {}로 감싼다

const name = '리엑트' 일때
컴포넌트 안에서는
name을  {name} 이라 해줘야함

3. if문 ⇒ 조건부 연산자로

JSX내부의 자바스크립트 표현식에서는 if문을 사용할 수 없음

• JSX 밖에서 if 문을 사전에 설정
• JSX 내부의 {}로 조건부 연산자 랜더링

4. AND 연산자를 사용한 조건부 연산자

AND연산을 하면 단축평가에 의해 앞 조건이 ture이면 뒷 부분이 나온다

앞조건이 false이면 걍 null 값이 된다

단, 앞조건이 falsy한 값인 0 은 예외적으로 0이 나온다(앞조건이 표현됨)

5. undefined를 렌더링 하지 않기

오류남

⇒ OR(||) 연산자를 이용해 undefiend가 되면 ⇒ 뒷 부분을 랜더링 하게 만들면 됨

즉 , undefined를 특정 값으로 보내버린다

6. 인라인 스타일링

JSX안에 스타일을 적용하기 위해서는

• 외부에서 스타일을 객체로 만들어 놓고 JSX 내부에서 {}안에다가 객체로 넣거나
• 선언 할때 {}안에 객체({}) 형식으로 넣으면 된다 → {{}} 이중이 됨

7. class ⇒ className

되긴 하는데 경고뜸

8. 꼭 닫아야 하는 태그

HTML에서는 꼭 안닫아도 ㄱㅊ은데

JSX에서는 태그를 꼭 닫아야한다.

걍 닫기
<걍> </걍>
셀프로 닫기
<셀프 />

9. 주석

{/* 주석 */}

다른건 안된다