UNIST 프로그래밍 동아리 HeXA (http://www.hexa.pro) 내부 React 강의 프레젠테이션 자료의 공개버전
내용
- HTML, Javascript 속성 튜토리얼
- React 소개
- Node.js 설치
https://github.com/kimxogus/react-tutorial
2. 강의 순서
1회차
개발 환경 구성 – SublimeText3, Node.js 설치 (필요시)
HTML, JS 기초
React 소개
Node.js 간단한 실습
2회차
React 튜토리얼
React 예제 작성
HeXA - 기초부2 ReactJS Tutorial
3. HTML
HyperText Markup Language
웹에서의 구조적 문서 작성을 위한 방법 제공
HeXA - 기초부2 ReactJS Tutorial
JAVASCRIPT
웹브라우저내에서 사용되는 객체지향 스크립트 언어
Node.js 등의 런타임 환경을 이용해 브라우저 밖에서도 사용 가능
JAVA랑 1도 상관없음!!
4. 우리의 목적은 뭐다? React!
React를 하기 위한 기본중의 기본만 속성으로 빠르게!
제대로 배우고 싶으면 HeXA 들어오세요! http://www.hexa.pro
일단 코딩부터 해봅시다
HeXA - 기초부2 ReactJS Tutorial
9. 일단 써보자 HTML
<body>
<header>
<nav></nav>
</header>
<div id=“main”>
<div id=“content1” class=“content”></div>
<div id=“content2” class=“content”></div>
</div>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
1_html.html
10. 일단 써보자 HTML
<body>
<header>
<nav></nav>
</header>
<div id=“main”>
<div id=“content1” class=“content”>
<div class=“title”></div>
<div class=“description”></div>
</div>
<div id=“content2” class=“content”></div>
</div>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
1_html.html
11. 일단 써보자 HTML
<body>
<header>
<nav></nav>
</header>
<div id=“main”>
<div id=“content1” class=“content”>
<div class=“title”></div>
<div class=“description”></div>
</div>
<div id=“content2” class=“content”></div>
</div>
<footer></footer>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
FOOTER
1_html.html
12. 일단 써보자 JAVASCRIPT
<footer></footer>
<script>
// 여기에 JS 코드를 삽입해볼겁니다!
</script>
</body>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
CONTENT2
TITLE DESCRIPTION
FOOTER
1_javascript.html
13. 일단 써보자 JAVASCRIPT
<script>
var content2_html = document.getElementById("content2").innerHTML;
document.getElementById("content2").innerHTML = content2_html
+ "<br><div class='title'>TITLE</div>";
var nav = document.getElementsByTagName("nav");
console.log(nav);
</script>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
TITLE DESCRIPTION
FOOTER
CONTENT2
TITLE
1_javascript.html
14. 일단 써보자 JAVASCRIPT
<script>
var content2_html = document.getElementById("content2").innerHTML;
document.getElementById("content2").innerHTML = content2_html
+ "<br><div class='title'>TITLE</div>";
var nav = document.getElementsByTagName("nav")[0];
console.log(nav);
</script>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
TITLE DESCRIPTION
FOOTER
CONTENT2
TITLE
1_javascript.html
15. 일단 써보자 JAVASCRIPT
<script>
var content2_html = document.getElementById("content2").innerHTML;
document.getElementById("content2").innerHTML = content2_html
+ "<br><div class='title'>TITLE</div>";
var nav = document.getElementsByTagName("nav")[0];
console.log(nav);
nav.onclick = function() {
alert("You’ve just clicked nav!");
}
</script>
HeXA - 기초부2 ReactJS Tutorial
HEADER
NAV
MAIN
CONTENT1
TITLE DESCRIPTION
FOOTER
CONTENT2
TITLE
1_javascript.html
16. HTML & JS 끝!
React에 들어가기 앞서…
HeXA - 기초부2 ReactJS Tutorial
17. WEB의 기본 MVC 패턴
Model View Controller
애플리케이션을
세가지의 역할로 구분한
개발 방법론
HeXA - 기초부2 ReactJS Tutorial
출처: 생활코딩
18. MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
19. MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
1. 화면(View)에서 상품을 선택하고
장바구니에 넣기 버튼 클릭!
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
20. MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
1. 화면(View)에서 상품을 선택하고
장바구니에 넣기 버튼 클릭!
2. Controller는 상품 정보를 Model에 반영
(장바구니에 상품 정보 추가)
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
21. MVC 패턴
예시) 쇼핑몰에서 장바구니에 상품 넣기
1. 화면(View)에서 상품을 선택하고
장바구니에 넣기 버튼 클릭!
2. Controller는 상품 정보를 Model에 반영
(장바구니에 상품 정보 추가)
3. Controller는 변경된 Model의 정보를
View에 반영한다.
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
23. React는
A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES
View에만 초점을 맞췄다
MC를 원한다면
Flux, Redux같은 라이브러리,
혹은 Angular같은 MVC프레임워크와
함께 쓸 수 있다.
HeXA - 기초부2 ReactJS Tutorial
VIEW
CONTROLLER
MODEL
24. React는
A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES
View에만 초점을 맞췄다
MC를 원한다면
Flux, Redux같은 라이브러리,
혹은 Angular같은 MVC프레임워크와
함께 쓸 수 있다.
HeXA - 기초부2 ReactJS Tutorial
UI 짜기 좋다
34. 단방향 데이터 흐름
Property를 이용한 상위 요소 > 하위 요소의 데이터 흐름
<div id={this.props.content.id} className=“content”>
이벤트를 통해 하위 컴포넌트의 변화를 감지할 수 있다.
: 상위 컴포넌트가 하위 컴포넌트에 이벤트를 추가하여 감지
양방향 데이터 바인딩을 원한다면
다른 라이브러리, 프레임워크를 붙여 쓸 수도 있다.
HeXA - 기초부2 ReactJS Tutorial
35. JSX
JS 코드에 XML을 직접 표현 > 표준 문법으로 컴파일(변환)
var Content = React.createClass({
displayName: “Content”,
render: function() {
return (
React.createElement(‘div’, {id:this.props.content.id, className:“content”},
React.createElement(‘div’, {className:“title”}),
React.createElemtn(‘div’, {className:“description”})
)
);
}
});
HeXA - 기초부2 ReactJS Tutorial
Node.js로!