[React] 7일차 일기

오.. 이제 7일차야..? 7일차치고는 뭔가 많이 알아가는거 같기도 하고..? 근데 했던거 다시하면 제대로 못하는 나를 보면서 머리 싸매고 있기도 하지만.. 언젠간 잘하겠지 뭐!!

 

1. ajax쓰려면 XMLHttpRequest (옛날거라 안씀), fetch() (이거 바닐라 자바스크립트할 때도 써봤는데), axios 라이브러리 쓰면 됨. 근데 리액트에서 axios 라이브러리 편함

 

2. axios 쓰려면 npm install axios 하고 import 해줘야함

 

3. axios.get('url').then(콜백함수).catch(콜백함수) 이런식임. fetch랑 비슷하네. then은 데이터 가져오는거 성공했을 때, catch는 실패했을 때 쓰는 공간

 

4. 동시에 ajax 요청 여러개 하려면 Promise.all([axios.get('url1'), axios.get('url2)]).then(콜백함수) 이런식으로 쓰면 됨. 따로따로 axios.get 해도 되지만 하나 하나의 코드를 다 짜줘야하기 때문에 비효율적임. 그래서 Promise.all 쓰면 모든 데이터를 가져왔을 때 한 번만 실행해주면 되기 때문에 효율적임.

 

5. 일단 if문 쓰려면 컴포넌트에 담아서 쓰면 됨.

 

6. props 파라미터 대신 {state명} 쓰면 props.변수 이렇게 안쓰고 바로 state명만 써도 돼서 편함.

 

7. transition 애니메이션 주는 방법

  - 애니메이션 동작 전과 후의 className을 따로 만들어 놓고 css에 transition 넣어서 원할 때 동작 전 className은 미리 붙여두고 동작 후의 className을 떼었다가 부착했다가 하는 방식으로 쓰면 됨.

 

8. className 탈부착하는 방법

  - useState 쓰면 되는데, 동작 후 className 자리에 state명 넣어주고 원할 때 동작 후 className으로 이름 바꿔주면 됨. 이름 바꿔주는건 update할 때마다 동작하는 useEffect쓰면 되는데 clean up function도 잘 활용해주고 setTimeout도 잘 활용해주면 잘 작동함.

 

9. Single Page Application의 단점에는 컴포넌트간 state공유가 어렵다는 점이 있는데 Context API나 Redux 사용하면 해결 가능.

 

10. Context API 먼저 배워봤는데 잘 안쓴다고함. props 전송 없이 state 공유가 가능하긴 한데 성능 이슈, 컴포넌트 재활용이 어렵기 때문에 잘 안쓴다고 함.

 

11. Context API로 state 공유하는 법

  1. createContext()를 변수에 담기

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

  3. value={{state들}} 담으면 끝

 

12. 공유한 state 사용하기

  1. context import하기 (createContext export도 당연히 해야함)

  2. let {변수} = useContect(Context변수) 이렇게 하면 쓸 수 있음

* 변수를 {}에 담은 이유 : 디스트럭쳐링 문법이라는건데 useContext 검사해보면 object 자료로 담겨옴. 그래서 디스트럭쳐링 문법쓰면 쉽게 꺼내서 쓸 수 있음.