[220613 / Day 28] react icons, filter

react05 폴더

컴포넌트 파일 만들 때 jsx, js 파일 아무거나 상관없음

 

props, state 다시 연습

jsx

header.jsx

div 태그 보다 맞는 태그 해주기

props 하면 {props.title} 해야 하는 데 {title} 해주면 그냥 {title} 해줄 수 있음

 

main.jsx

section, div 둘다 해줘도 됨

 

footer.jsx

 

contentbox.jsx

❤ à start 버튼+ .

React, à 지워도 상관없음

const [fav, setFav] = useState('❤');

    const fncFav = () => {

        fav = (fav === '❤') ? '💕' : '❤';

        setFav(fav) // set으로 업데이팅,

    }

à 이렇게 하면 에러 남 const [fav, setFav] = useState('❤'); 이 부분의 const 를 let 으로 바꾸면 에러 안남,

fav = (fav === '❤') ? '💕' : '❤';

        setFav(fav) // set으로 업데이팅

à setFav 소괄호 안에 fav 말고 (fav === '❤') ? '💕' : '❤' 넣어주면 똑 같은 효과

 

// 두번째 btn-area

    let [num, setNum] = useState(0); // 강사님은 const, 나는 let 으로 해야 에러 안뜸 왜???

    const fncIncrement = () => {

        setNum(num >= 3 ? num = 3 : num + 1) // 3까지만 증가하도록

    }

    const fncDecrement = () => {

        setNum(num <= 0 ? num = 0 : num - 1) // 0까지만 감소

    }

à 두번째 btn-area 에 const가 아니라 let 으로 해야 에러 안뜸 왜???

 

css

header

 

footer

 

contents

 

리액트아이콘즈 플러그인

부트스트랩 같은거

npm install react-icons --save 설치하고

컴포넌트 식으로 불러와야 함

사이트 들어가서 Material Design icons 에 import 복사해서 임폴트 쪽에 붙여넣기

그리고 { IconName } 중괄호 안에 넣고 싶은 아이콘 이름 넣고, contentbox.jsx 로 돌아와서 아이콘 넣고 싶은 곳에 < IconName /> 해주기

 

프로덕트 아이템 정보 넣어서 탭 만들기

productData.json 에 아이템 정보들 있음

탭 중첩구조로 갈거라 컴포넌트 폴더 안에 파일 만들 것임

ProductTab.jsx 안 에 ProductList.jsx , ProductItem.jsx

퍼블릭이라는 폴더는 루트라고 인식

 

 

구문

반복문

- for ()

- forEach()

- for in

- map

 

- filter() : 조건 달아 필터링한 데이터만 반복할 수 있음

ProductTab.jsx

화살표 함수에서 한줄이면 중괄호 없애도 되는데 map, filter 쓸 때 리턴이 없어도 리턴이 됨

index === num 이라는 조건이 충족하면 리턴을 시켜준다

온클릭하면 서브밋 방지 e. 프리벤트? 뭔소리??

이미지 4개 출력 : ul 에 출력할 거는

 

tab.jsx

useState(0) 초기값 넣을 거 없으면 null 이라도 넣어야 함

 

콜백함수

math.pow() : 제곱

promise 쓰면 복잡한 콜백을 해결할 수 있음