221205 TIL

React

import // 컴포넌트 밖, 내가 필요한 파일을 가져오는 영역

const~ // 자바스크립트를 쓸 수 있는 영역

return~  / HTML, JSX 문법 영역

export // 내가 만든 컴포넌트를 밖으로 내보내는 영역

 

props : 부모 컴포넌트로부터 가져온 데이터 / 부모 -> 자식 방향으로만 전달 가능

props Drilling , propTypes 찾아서 학습하기!

 

컴포넌트 반복 -> map 함수 사용 : key값 꼭 넣기

 

리액트 화면을 랜더링 하는 기준 -> props, state 변경이 있을 때!

useState로 묶어준 변수([state, setState])들이 변경됐을 때 리액트가 변경을 인지함

 

밑으로 내려가면서 값을 전달해주는 것을 props라고 함!

 

컴포넌트 태그 사이에 있는 value값도 children으로 받을 수 있음

 

 

원장님 보충 강의 - 배열 메서드

화살표 함수

 

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

☞ 강의를 들으며 따라가고 있었지만 완벽하게 이해한 게 아니라서 이해한 후 정리해보겠음..