😎리액트란?
- React 는 UI 를 구현하는 JavaScript 라이브러리
- 웹 앱(Web App) 또는 네이티브 앱(Native App)
- 유지보수를 쉽게 , DOM 관리 성능최적화 쉽게
- 컴포넌트에 집중 대부분 공식 라이브러리가 없음 (높은 자유도)
- 자바스크립트 친화적 es6 기반로 배우기가 쉽다
😎react 진도
- 리액트에 필요한 자바스크립트
- 리액트 작성법 ( state , props )
- hooks - useState / useRef / useEffect
- 스타일 :sass , styeld-component
- 리액트에서 ajax 요청방법 ( axios / Fetch )
- 성능관련 : useMemo / useCallback
- 상태분리 useReducer
- Single Page Application: spa - router
- 상태관리 ( context , redux )
😎react 에 필요한 es6(ecmascript) 정리하기
1. let / const
let 은 변수에 재할당이 가능하지만, const 는 변수 재선언, 재할당 모두 불가능 / {} scope
const a = 20;
console.log(a);
{
const a = 50;
console.log(a);
}2. 템플릿 리터럴(Template literal) 새로운 문자열 표기법
1) backtick (`)
2) 변수 처리는 ${변수}
let a = 30;
const b = 50;
const result = a + `와` + b + `의 합은 ` + (a + b)
console.log(result);
//템플릿 리터널 형식
const result2 = `${a} 와 ${b}의 합은 ${a + b}`
console.log(result2);
const name = "오별";
const age = 31;
const addr = "서울";
const result3 = `${name} 이다 ${age} 살이다. ${addr} 산다.`;
console.log(result3);3. 삼항연산자와 &&연산자 , ||연산자
조건 ? true 일때 : false 일때
같다 === / 다르다 !== ( react 에서 )
true && 결과 / ( false , null , undefined ) || 결과
//react JSX 영역
//아무거나 쓸수 없다.
//삼항연산자, && . || 사용가능
//react 함수영역
// if / switch-case / for 사용가능
// 삼항연산자 : (조건) ? (참) : (거짓) ****
// && -> 조건 && 참결과 -> 조건이 참일때 ****
// || => 조건이 거짓일때 || 거짓의 결과 *
const isPlay1 = true;
const isPlay2 = false;
const isPlay3 = undefined;
const result1 = isPlay1 === true ? '참' : '거짓'
console.log(result1);
const result2 = isPlay2 ? '참1' : '거짓1'
console.log(result2);
const result3 = isPlay1 === true && '참결과'
console.log(result3);
const result4 = isPlay1 && '참결과'
console.log(result4);
const result5 = isPlay2 || '거짓'
console.log(result5);
const result6 = isPlay3 || '값없음'
console.log(result6);
/*
다중 if문
조건1 && 결과1
조건2 && 결과2
조건3 && 결과3
조건4 && 결과4
*/4. 화살표 함수
function(){} -> () => { ... } # 매개변수가 없을 경우
function(x){} -> (x) => { ... } # 매개변수가 한 개인 경우, 소괄호를 생략
function(x,y){} -> (x, y) => { ... } # 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
//자바 스크립트
function make1() {
console.log("연습");
}
make1();
function make2(num1) {
console.log(num1);
}
make2(200);
function make3(num1, num2) {
console.log(num1, num2);
}
make3(200, 500);
// React
const make4 = () => {
console.log("연습");
}
make4();
const make5 = (num3) => {
console.log(num3);
}
make5(100);
const make6 = (num1, num2) => {
console.log(num1, num2);
}
make5(100, 555);5. push : 배열 뒷부분에 값을 삽입 ( 배열의 값이 변경된다 )
- 배열.메서드() 중 불변성 유지
let arr = [ 1, 2, 3, 4 ]; / arr.push( 5 );
const arr = [10, 20, 30, 40];
arr.push(60);
arr.push(70);
arr.push(80);
arr.push(90);
arr.push(100);
arr.push(110);
arr.push(120);
console.log(arr);
// 불변성, 원본유지, 사본을 만들어서 작업한다.
//concat() , ...스프레드 연산자
const arr1 = [10, 20, 30, 40];
const arr2 = arr1.concat();
console.log(arr1);
console.log(arr2);
const arr3 = arr1.concat(60, 70, 80, 90);
console.log(arr3);
//const 객체명 = {키 : 값, 키 : 값};
//객체명.키 , 객체명['키']
const data = [
{ id: 1, name: '홍길동1', age: 10 },
{ id: 2, name: '홍길동2', age: 20 },
{ id: 3, name: '홍길동3', age: 30 },
{ id: 4, name: '홍길동4', age: 40 },
{ id: 5, name: '홍길동5', age: 50 },
]
console.log(data[0].id, data[0].name);
const data2 = data.concat();
const data3 = data.concat({ id: 6, name: '홍길동', age: 20 });
console.log(data2);
console.log(data3);6. concat : 다수의 배열을 합치고 병합된 배열의 사본을 반환 **기존의 배열은 건드리지 않음 ** 불변성유지
const arr = [0, 1, 2]; const arr1 = arr.concat(3); // 결과 [0, 1, 2, 3]
7. slice
slice( startIndex, endIndex)
배열의 startIndex 부터 endIndex 까지(endIndex 는 불포함)에 대한 shallow copy 를 새로운 배열 객체로 반환
**기존의 배열은 건드리지 않음 **
8. map ( 반복문 )
배열.map((요소, 인덱스 ) => {
return 요소
});
//JSX 영역 = 반복문 map
const arr = [10, 20, 30, 40];
// 기본 구조
/*
arr.map((현재값, 인덱스) => {
return (결과);
})
*/
arr.map((item, index) => {
return (console.log(index, item))
})
console.log('-----------------------------');
//결과가 1개 일때, ***
arr.map((item, index) => console.log(index, item))
console.log('-----------------------------');
const data = [
{ id: 1, name: '홍길동1', age: 10 },
{ id: 2, name: '홍길동2', age: 20 },
{ id: 3, name: '홍길동3', age: 30 },
{ id: 4, name: '홍길동4', age: 40 },
{ id: 5, name: '홍길동5', age: 50 },
]
data.map((item, index) => {
return (console.log(index, item.id, item.name, item.age))
})
console.log('-----------------------------');
data.map((item, index) => { console.log(index, item.id, item.name, item.age) })9. filter
filter 도 map 함수와 마찬가지로 콜백함수를 인자로 받는데 모든 원소를 한번씩 돌리면서 콜백함수의 몸체부분에서 true 를 반환하는 원소들만 걸러줌 결과 배열
const newArr = arr.filter( xx => 조건 )
10. find ( findIndex)
형식은 filter 와 비슷 , 결과는 하나의 값
const newArr = arr.find( xx => 조건 )
//JSX 영역 - filter 결과 [] 배열
//const newArr = arr.filter( xx => 조건 )
const arr = [10, 20, 30, 40, 50];
const result1 = arr.filter(item => item > 20)
console.log(result1);
const result2 = arr.filter(item => item === 30)
console.log(result2);
const result3 = arr.filter(item => item !== 30)
console.log(result3);
console.log('-----------------------------');
const data = [
{ id: 1, name: '홍길동1', age: 10 },
{ id: 2, name: '홍길동2', age: 20 },
{ id: 3, name: '홍길동3', age: 30 },
{ id: 4, name: '홍길동4', age: 40 },
{ id: 5, name: '홍길동5', age: 50 },
]
const data1 = data.filter(item => item.id === 3)
console.log(data1);
const data2 = data.filter(item => item.id !== 3)
console.log(data2);
const data3 = data.filter(item => item.id > 3)
console.log(data3);
console.log('-----------------------------');
//find( 현재값 => 조건)
//find는 결과 값을 하나만 가져온다.
const result4 = arr.find(item => item > 30)
console.log(result4);
const result5 = arr.find(item => item === 30)
console.log(result5);
const data4 = data.find(item => item.id === 4)
console.log(data4);
console.log('-----------------------------');//index of?
const arr = ['고구마', '감자', '고기', '고사리', ' 수박', '고슴도치']
const txt = '고'
const result = arr.filter(item => item.indexOf(txt) !== -1)
console.log(result);11. 객체
객체를 선언 할 때에는 이렇게 { } 문자 안에 원하는 값들을 넣준다
키: 원하는 값 const dog = { name: '멍멍이', age: 2 };
dog.name , dog.age
12. 비구조할당 ( 구조분해 )
const object = { a: 1, b: 2 , c:10 };
const { a, b , c} = object 12
const dog = {
name : '치와와',
age : 3
}
console.log(dog.name);
console.log(dog['name']);
//구조분해 할당, 비구조 할당
const {name , age} = dog;
console.log(name, age);
const data = {
a : 10 , b : 20 , c : 50
}
const { a, b, c} = data;
console.log(a , b, c);13. spread... ( 전개 연산자 )
const ani = ['개', '고양이', '참새'];
const ani1 = [...ani, '비둘기'];
//스프레드 연산자
const arr = ['dog' , ' cat' , 'rabbit'];
const arr1 = arr.concat();
console.log(arr1);
//... 점세개 copy의 개념
const arr2 = [...arr];
console.log(arr2);
const arr3 = arr.concat('호랑이' , '소' , '말');
console.log(arr3);
const arr4 = [...arr,'야야' , '미미' , '에에'];
console.log(arr4);
//갱신
//스프레드 연산자는 데이터를 추가 할수도 있지만 수정도 할수있다.
const dog = {name: '치와와' , age : 3 , addr : '서울'};
const dog1 = {
...dog,
name: '푸들',
age : 10
};
console.log(dog1);
console.log('-------------------------');
const data = [
{id : 1 , name : '이익순' , age : 50},
{id : 2 , name : '오오' , age : 50},
{id : 3 , name : '이순' , age : 50},
{id : 4 , name : '박순' , age : 50},
{id : 5 , name : '자익순' , age : 50},
{id : 6 , name : '이익순' , age : 50}
]
const data1 = data.map( (item , index) => {
if(item.id === 3){
//수정
return {
...item,
name : '홍길동',
age: 22
}
}else {
//리턴
return item;
}
} )
console.log(data1);
const data2 = data.map((item , index) => item.id ===1 ?
{...item , name : '강호동'}:item);
console.log(data2);
const data3 = [
...data ,
{
id : 9,
name : 'ddd',
age : 2
}
]
console.log(data3);14. new Set() : 동일한 값을 하나로 만들어줌
15. reduce
배열.reduce((누적값, 현잿값, 인덱스, 요소) => {
return 결과
}, 초기값) 초기값 생략하면 1
16. forEach
배열.forEach( (요소) => { } )
17. 검색에 필요한 명령어
string.indexOf(찾을문자열)
toLowerCase() 소문자변환
정규표현식을 사용한 match() 함수
github 페이지에 좀더 자세히 정리했습니다.
728x90
반응형
'인강\개인공부 > React 강의' 카테고리의 다른 글
| [React] 리액트 기본 규칙, JSX 기본 규칙 (0) | 2021.11.23 |
|---|---|
| [React] 컴포넌트란? 함수형/클래스형 (0) | 2021.11.23 |
| [React] 컴포넌트 구조 - JSX영역/함수영역/Fragment 사용법 (0) | 2021.11.22 |
| [React] 프로젝트 생성 : CRA(Create-React-App) (0) | 2021.11.18 |
| [React] 기초 - 바벨/웹팩 이란? CDN을 넣어서 React 구조 만들기 (0) | 2021.11.18 |
댓글