21.10.22 React ( Ch3 트랙카드, 탭, 검색창 만들기) + Map함수 설명 잠깐

Styled Component의 장점: 미리 만들어둔 UI를 card.description이런 식으로 다시 조합해서 바로 쓸 수 있다.

 

실습 1 과목카드랑 거의 동일

실습 2 

넓직하게

large가 있을 경우 없을 경우 props로 받기

 

실습 3 아이콘 추가와 할부개월

실습 4 움직이는 모서리 만들기

실습 5 트랙/과목 탭 만들기 & Map함수 잠깐

 

잠깐 map 함수

array.map(callbackFunction(currenValue, index, array), thisArg)

 

callbackFunction, thisArg 두개의 매개변수가 있고
callbackFunction은 currentValue, index, array 3개의 매개변수를 갖는다.

• currentValue : 배열 내 현재 값
• index : 배열 내 현재 값의 인덱스
• array : 현재 배열
• thisArg : callbackFunction 내에서 this로 사용될 값

실습 6 검색창 만들기

 

실습7 전체카드개수

 

실습8 다 합치기

 

여기에 Container에 flex-direction:column; 으로 줘서 세로정렬

+ currTab state 추가해서 탭 클릭 시 다른 UI 띄우기

+ 검색창