React, 템플릿 리터럴, 연산자, 화살표함수, push_concat, map, filter, indexOf

File : 01_템플릿 리터럴

템플릿 리터럴(template literal) 새로운 문자열 표기법

1. backtick(`)

2. 변수 처리하는 ${변수}

 

 

---

File : 02_연산자

① React 연산자

=== 같다

!== 다르다

 

② 삼항 연산자

[형식]

조건 ? true 일 때 : false 일 때

 

③ &&

[형식]

true && 참일 때 수행하는 결과

 

④

[형식]

( false, null, undefined ) 거짓일 때 수행하는 결과

 

 

---

File : 03_화살표함수

 

const 함수이름 = () => {

 

}

 

 

---

File : 04_push_concat

배열, 메서드() 중 불변성 유지

① push : 배열 뒷부분에 값을 삽입 (배열의 값이 변경된다)

② concat : 다수의 배열을 합치고 병합된 배열의 사본을 반환

기존의 배열은 건드리지 않음 - 불변성 유지

 

 

---

File : 05_map

map (반복문)

 

[형식]

배열.map((요소, 인덱스) => {

return 요소

});

 

리액트에서는 return문이 없으면 값이 나오지 않는다, 반드시 써야한다.

하지만 반복되는 문장이 1개이면 {}, return을 생략 가능하다.

 

data.map((item, index) => {

return (console.log(index, item));

});

↓

data.map((item, index) => console.log(index, item) );

 

{}를 생략하면 return도 같이 생략해야된다

 

 

 

---

File : 06_filter

filter도 map함수와 마찬가지로 콜백함수를 인자로 받는데 모든 원소를 한 번씩 돌리면서

콜백함수의 몸체 부분에서 true를 반환하는 원소들만 걸러준 결과 배열

 

[형식]

const newArr = arr.filter( 현재값 => 조건 )

 

- 30이상

const result1 = arr.filter(item => item > 30);

 

* 클래스 컴포넌트 안쓴다 > 함수 컴포넌트를 주로 사용

 

- 값 삭제 - pop

const result4 = data.pop(data => data.id == 2);

 

 

 

---

File : 07_find

find => filter와 비슷, 결과는 하나의 값(처음 만나는 값을 가져온다)

 

- 요소 중에서 20인 값 찾기

const result2 = arr.find(item => item==20); -> 앞에있는 20을 찾는다

 

- 인덱스값 가져오기

const result3 = arr.findIndex(item => item==20);

 

값이 없는 경우

find = undefinded

findIndex = -1

 

 

 

 

 

---

File : 08_indexOf

객체를 선언할 때에는 이렇게 {} 문자 안에 원하는 값들을 넣어준다

{키 : 값}

 

- '고'자가 들어간 단어를 모두 출력, 없으면 -1를 반환

const result1 = arr.filter(item => item.indexOf('고') !== -1)

 

- '하다'를 포함한 문자를 모두 출력

const data2 = data1.filter(item => item.text.indexOf('하다') !== -1)

 

const findText = (array, str, key) => array.filter(item => item[key].indexOf(str) !== -1)

가져올 데이터, 조건, 가져올 키값

console.log(findText(data1, '하다', 'text'));