React shop project 230921

AJAX 다시 정리

• 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능

GET 방식

• array와 object자료는 변경하기 전에 copy를 꼭 하자!

POST 방식

• 여러개의 url사용하고 싶다면 아래처럼 사용하기

---

fetch사용법

탭 UI 만들기

• 모달창 3개 있다고 생각하기

3단계
1. html/css 미리 만들어두기

2. 탭 상태 저장해둘 state 필요

3. state에 따라서 UI가 어떻게 보일지 작성

---

• 버튼 태그 만들 때
  

defaultActiveKey는 기본으로 눌려있을 버튼을 의미

---

JSX 안에 일반 if 조건문 쓰려면?

1. 컴포넌트로 만들어주기

*** 컴포넌트는 return이 꼭 필요하다!
어떤 html을 보여줄지 return안에 적어주기

*** 아래 코드에서 컴포넌트 안에 탭이 선언이 되어 있지 않고,
부모한테 탭이 선언되어있으니까 props를 이용해서 가져오면 됨

---

---

TIP

props 쉽게 쓰고 싶다면?

()에 props라고 쓰는 대신 props의 이름을 적어주면 props. 사용하지 않아도 됨
props가 여러개 일때는 (props이름1, props이름2) 이런식으로 적어주면 됨

if문 없이 쓸 수 있는 방법

탭이 0일때, 1일때, 2일때마다 배열의 인덱스가 바뀌면서 return 값이 바뀜

---

전환 애니메이션

• 전환애니메이션은 부착하면 애니메이션 나오는 className 하나 만들고 원할 떄 부착하면 됨

• 전환애니메이션은

1. 애니메이션 동작 전 className 만들기
2. 애니메이션 동작 후 className 만들기
3. className에 transition 속성 추가
4. 원할 때 2번 clssName 부착

---

• 위 코드에서 start만 써놨다가 원할때 end만 붙이면 됨
• 탭 state가 변할 때 end 부착

** 문자 중간에 변수 넣으려면 백틱 이용하기

`문자 ${변수}문자`

근데 이렇게 코드 쓰면 실행이 안됨
왜냐면 탭 state가 변할때 end 뗐다가 부착해야하기 때문.

• setTime함수 사용

---

참고 애니메이션 함수

.start {
transforom: scale(0)
}

.end {
transform: sacle(1)
transition: all 0.5s;
}

작아졌다가 커지게 하는 함수

---

> Context API

- Single Page Application 단점 : 컴포넌트간 state 공유 어려움
- props 사용하는 방법이 있지만, 부모에서 자식에게 전달해주는거라 전달을 많이 해야하는 상황이 오면 너무 번거로움
-> 이 때 Context API 쓰면 props 전송없이 state 공유 가능!

- 하지만, 현업에서는 성능이슈와 컴포넌트 재활용이 어렵다는 이유로 잘 사용하지는 않음
- 알아두고 넘어가자

---

>사용법

1. createContext()
![](https://velog.velcdn.com/images/beeni1211/post/0642521b-2cd2-45f7-9b7a-90900eca00ad/image.png)

![](https://velog.velcdn.com/images/beeni1211/post/92705d1d-d2a9-4a27-b0cb-04cf232ccd9a/image.png)

// Context는 state 보관함

2. < Context >로 원하는 컴포넌트 감싸기