goal
- React란?
- ES6문법
- JSX
React 기본
- React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다.
- JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다.
React 주요 개념과 사용법
- 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이를 이해할 수 있다.
- props의 특징과 규칙을 이해할 수 있다.
- props와 state와의 차이점을 이해할 수 있다.
- 상태 변경 방법과, 그 이유를 이해할 수 있다.
- 이벤트를 처리할 수 있다.
- lifecycle을 통해 작동 원리를 이해할 수 있다.
- React 컴포넌트 간 데이터 흐름 및 상호작용의 원리를 이해할 수 있다.
- 비동기 호출과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
API 문서 연습
- React 공식 문서를 활용할 수 있다.
- YouTube API 문서를 활용할 수 있다.
React를 구성하는 JavaScript 생태계
- Create React App을 구성하고 있는 babel 및 webpack의 목적과 필요성을 이해할 수 있다.
react란? 💯️
- 리액트는 프론트앤드 라이브러리
- DOM의 상태관리를 최소화하며 기능개발에 집중할 수 있다
- 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 유용
- component 단위로 개발
- 하나의 의미를 가진 독립적인 단위 모듈 (=나만의 html태그)
- 코드의 재사용성이 높아지며, 직관적이다
- 아래와같이 비교할 수 있다
HTML tag >>
<div class = "tweet">
<span class = "userId"> @willy </span>
<div class = "content"> Hi! I'm willy. </div>
<div class = "time"> 10 min age </div>
</div>
----------------------------------------------
Component >>
<Tweet userId = "willy" time = "10">
Hi! I'm willy.
</Tweet>ES6 문법 💯️
-
react는 기본적으로 ES6를 사용한다
-
주요 ES6
- Destructuring
- spread operator
- rest parameters
- default parameters
- template literals
- arrow function
- for - of loop
1. Destructuring
const numbers = [1, 2, 3, 4, 5];
const [one, two, three, four, five] = numbers;
console.log(one); // 1
console.log(two); // 2
const [one, , , , five] = numbers;
console.log(one); // 1
console.log(five); // 5
function sum1 ([a,b,c]) {
console.log(a+b+c);
}
sum1(numbers); // 6
function sum2 ([a,b,...c]) {
console.log(c);
}
sum2(numbers); // [3,4,5]
/////////////////////////////////////////////////////
2. spread operator - 배열이나 유사배열 형태의 자료를 퍼지게 해주는 기능
const arr1 = [ 1, 2, 3 ];
const arr2 = [ 4, 5, 6 ];
const total = [ ...arr1, ...arr2 ];
console.log(total); // [1,2,3,4,5,6]
-------------------------------------
function foo (a, b, c) {
return a + b + c;
}
const arr = [ 1, 2, 3 ];
foo(...arr); // 6
/////////////////////////////////////////////////////
3. rest parameters - 함수의 마지막 인자들을 숫자의 제한없이 배열로 받아 처리할 수 있도록 해주는 기능
function foo (a, b, ...c) {
console.log(c); // ["c", "d", "e", "f"]
console.log(Array.isArray(c)); // true
}
foo('a', 'b', 'c', 'd', 'e', 'f');
--------------------------------------------
function foo (...a, b) {
console.log(a);
}
foo(1,2,3);
//Rest parameter must be LAST parameter
/////////////////////////////////////////////////////
4. default parameters - 기본값을 설정
일반 >>
function foo (a,b) {
if (!a) {
a = 10;
}
return a + b;
}
foo (100,200); // 300
foo (0, 200); // 210 (0은 falsy)
foo (undefied, 200); // 210
-----------------------------------
ES6 >>
function foo (num = 10) {
console.log(num);
}
foo (); // 10
foo ("delilah"); // "delilah"
foo (0); // 0
-----------------------------------
ES6 >>
function getnum () {
console.log("willy");
return 10;
}
function lognum (num = getnum()) {
console.log(num);
}
lognum(); // "willy", 10 (num에 getnum() so, getnum 실행 o)
lognum(1000); // 1000 (getnum이 실행되지 x)
lognum(0); // 0 (getnum이 실행되지 x)
lognum(null); // null
lognum(undefined); // "willy", 10
// 즉, 값이 없을 때만 default 값을 사용하는 것!
/////////////////////////////////////////////////////
5. template literals
const name = "delilah";
console.log("name" + " : " + name); // name : delilah
----------------------------------
console.log(`name : ${name}`) // name : delilah
/////////////////////////////////////////////////////
6. arrow function (화살표함수)
function foo (a,b) {
return a*b;
}
--------------------------
const foo = (a,b) => a*b;
// 매개 변수가 하나일 경우, 소괄호를 생략할 수 있다.
// 함수 본문이 하나의 실행문일 경우, 중괄호 {}를 생략하고 한 줄에 표기할 수 있다.
// 화살표 함수는 this, arguments 값이 없다. 따라서, 기본 스코프 체인 규칙에 따라 상위 스코프에서 값을 찾는다.
/////////////////////////////////////////////////////
7. for of loop
const arr = ['a', 'b', 'c'];
for (const element of arr) {
console.log(element); // a, b, c
}JSX (JS확장문법)
- react component를 화면에 보여주기 위해 사용
- react component에서는 JSX를 리턴해주어야 함 (아래 예시)
class Hello extends Component {
render() {
return (
<div>
<h1> Hello, world! </h1>
</div>
)
}
}
----------------------------------
function Hello () {
return (
<div>
<h1> Hello, world! </h1>
</div>
)
}
----------------------------------
<header className = "container"> ... </header>
----------------------------------- JSX를 사용하지 않으면 매우 코드가 복잡해짐
- 바벨이 코드를 자동으로 고쳐줌
- 규칙
- 1. 하나의 엘리먼트로 감싸야 한다.
- 2. 자바스크립트 코드를적용할 때는 {} 내부에 작성한다.
- 3. if문을 사용할 수 없다. 따라서 IIFE or 삼항연산자를 사용한다.
- 4. 엘리먼트의 클래스 이름을 적용할 때,
class가 아닌,className을 사용한다.
- 1. 하나의 엘리먼트로 감싸야 한다.
delilah's journey