React
import // 컴포넌트 밖, 내가 필요한 파일을 가져오는 영역
const~ // 자바스크립트를 쓸 수 있는 영역
return~ / HTML, JSX 문법 영역
export // 내가 만든 컴포넌트를 밖으로 내보내는 영역
props : 부모 컴포넌트로부터 가져온 데이터 / 부모 -> 자식 방향으로만 전달 가능
props Drilling , propTypes 찾아서 학습하기!
컴포넌트 반복 -> map 함수 사용 : key값 꼭 넣기
원장님 보충 강의 - 배열 메서드
화살표 함수
function () {
return 1;
}
--> () => 1
1. forEach
☞ for + each, for문과 똑같이 요소 하나씩 꺼내오는 것.
const testArr = [2, 10, 100, 7, 71, 50, 27, 1];
testArr.forEach(function (item) {
console.log(item);
});
--> 화살표 함수 이용
testArr.forEach((item)=>{
console.log(item);
});
2. map
☞ map은 맵핑한다. 무조건 무엇이든 반환한다.
☞ return한 애들을 모아서 새로운 배열을 만든다!
const testArr = [2, 10, 100, 7, 71, 50, 27, 1];
const mappedArr = testArr.map(function (item) {
console.log(item);
return item * 2;
});
--> 화살표 함수 이용
const mappedArr1 = testArr.map((item)=>item * 2);
3. filter
☞ 걸러내는 것
☞ 특정한 조건을 맞춰 필터링해서 새로운 배열을 만든다!
const testArr = [2, 10, 100, 7, 71, 50, 27, 1];
const filteredArr = testArr.filter((item) => {
console.log("check", item);
}
--> check 2
check 10
check 100
check 7
check 71
check 50
check 27
check 1
----------------------------------------------------
const filteredArr = testArr.filter((item) => {
if(item > 10){
return item;
}else {
return null;
}
});
console.log(filteredArr); // [ 100, 71, 50, 27 ]
-----------------------------------------------------
// 삼항 연산자
const filteredArr = testArr.filter((item) => {
return item > 30 ? item : null;
});
console.log(filteredArr); // [ 100, 71, 50 ]
4. retuce
☞ 강의를 들으며 따라가고 있었지만 완벽하게 이해한 게 아니라서 이해한 후 정리해보겠음..
'새로운 경험' 카테고리의 다른 글
[TIL]2022-12-07 (0) | 2022.12.08 |
---|---|
[TIL]2022-12-06 (0) | 2022.12.08 |
[TIL]2022-12-05 (0) | 2022.12.05 |
[WIL]5주차2022.11.28~2022.12.03 스파르타코딩클럽-내일배움캠프(항해99 국비ver) (0) | 2022.12.05 |
[TIL] 스파르타코딩클럽 배열, For, 함수 보충강의 (0) | 2022.12.04 |
댓글