김민준님의 리엑트를 다루는 기술을 읽고 작성한 세미나 자료입니다.

1. JSX
JSX
이재민
2018년 9월

3. ==
// ES6 문법
// 과거 자바스크립트 문법

4. 모듈화 된 파일을 import 하여 사용!

5. 모듈화 된 파일을 import 하여 사용!
But, Browser에서는 파일을 import 할 수가 없다!

6. 모듈화 된 파일을 import 하여 사용!
But, Browser에서는 파일을 import 할 수가 없다!
모듈화된 파일을 하나의 파일로 번들링할 필요가 생김

8. SVG나 CSS 파일 역시 import가 가능하다!

9. SVG나 CSS 파일 역시 import가 가능하다!
(로더를 사용한다면)

10. SVG나 CSS 파일 역시 import가 가능하다!
(로더를 사용한다면)
css-loader. : CSS 파일을 로드
file-loader. : 웹폰트나 미디어 파일을 로드
babel-loader : ES6 문법으로 작성된 코드를 ES5 문법으로 변환

11. create-react-app을 사용하면 별도의 로더 설정이 필요없다!
궁금하면 node_modules/react-scripts

12. 리엑트 라이브러리 내부에 있는 Component 클래스를 상속 한다

13. 컴포넌트를 화면에 어떻게 보이게 할지를 렌더링

14. HTML ? Template?

15. JSX!
“
”

17. JSX의 장점
HTML 코드와 유사해 보기 쉽고 익숙하다!
바벨이 코드를 변환하는 중에 오류가 있다면 감지해 낸다!
React 컴포넌트도 JSX안에 작성 가능하다!

18. JSX 문법

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

20. 감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모요소 하나로 감싸야 한다!
오류 발생 —>

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

22. 렌더링시 트리 형태의 Virtual DOM을 만들기를
돕기 위해 부모 요소로 감싸는 것!

23. 자바스크립트 표현

24. 자바스크립트 표현
{ }로 감싸서 자바스크립트 표현식을 쓸 수 있다!

25. if 문 대신 조건부 연산자

26. if 문 대신 조건부 연산자

27. if 문 대신 조건부 연산자
JSX 표현식안에서는 if 문을 사용할 수 없어 삼항 연산자를 사용한다.

28. &&를 사용한 조건부 렌더링
null, false는 렌더링하지 않아 다음과 같이 작성할 수 있다!
==

29. 인라인 스타일링
CSS 스타일은 자바스크립트 객체 형식으로 만들어 적용해야한다.

30. css의 key는 camelCase를 사용한다.

31. css의 key는 camelCase를 사용한다.
key값에는 -를 사용할 수 없어
-webkit는 Webkit으로
-moz는 Moz로 작성한다

32. css의 key는 camelCase를 사용한다.
key값에는 -를 사용할 수 없어
-webkit는 Webkit으로
-moz는 Moz로 작성한다.
예외적으로 -ms 는
소문자 ms로 작성한다.

33. class 대신 className
class는 자바스크립트의 예약어로 포함됨으로 class 대신 className 을 이용한다.

34. class 대신 className

35. 꼭 닫아야 하는 태그
HTML의 꼭 닫지 않아도 되는 태그로 JSX에서는 반드시 닫아주어야 합니다.
닫는 태그가 없으면 virtual DOM 작성시
트리 구조를 만들 수 없습니다.

36. 주석
일반적으로 { /* 이렇게*/ } 주석을 작성합니다.
self-close 요소에서는
{}없이 주석을 작성할 수 있습니다.