오늘 새로 배운 것
React Component Life-cycle
재사용성의 측면에서는 클래스 컴포넌트보다 함수형 컴포넌트와 훅을 사용하는 것이 좋다.
클래스 컴포넌트로부터 함수형 컴포넌트로 리팩터링
1 함수형 컴포넌트를 먼저 선언한다.
render() 안에 return되는 값들을 그대로 함수 안으로 가져온다.
2 함수 안에 useState를 가져온다.
3 componentDidMount, componentDidUpdate, componentWillUnmount를 처리해준다.
그러기 위해서 함수 안에 useEffect를 사용한다.
useEffect의 실행 부분이 componentDidMount, clean up 부분이 componentWillUnmount가 실행될 부분이다.
또 다른 useEffect를 함수 안에 추가해주고 거기에는 componentDidUpdate가 실행될 부분이다.
useEffect
처음 컴포넌트 렌더링 될 때만 실행되도록 할 때 useEffect 사용
Svelte는 가상 DOM을 쓰지 않고 JS로 컴파일
하루를 돌아보며...
갑자기 todolist 숙제에 axios 적용해보고 싶어서 거기 꽂혀서 오늘 거의 대부분의 시간을 보낸 것 같다... 결론적으로 지금 시점에서는 괜히 했나 후회가 된다. 그냥 내일 숙제 제출하기 전에 styled component도 적용해보고 redux랑 다른 훅, 커스텀 훅 공부나 더 할 걸 그랬다...
서버 만들려고 express, axios 패키지를 설치해주고(yarn add) 갑자기 또 MongoDB에 서버 연동해주고 싶어서 mongoose 패키지를 설치했다.
서버 잘 되는지 POSTMAN으로 POST, GET 요청 날려보고 클라에 붙여서 POST, GET 요청 날려보고, fetch에서 axios로 바꾼 뒤 또 해보고... 일단 성공
fetch('http://localhost:4000/api/todo',{
method:'POST',
headers:{
Content-Type:'application/json',
},
body: JSON.stringify({
...
}),
});axios를 사용하면 위의 fetch를 아래와 같이 간소화할 수 있다.
axios.post('http://localhost:4000/api/todo',{...});데이터 가져오는 부분에서도 쉽게 사용할 수 있게 커스텀 훅으로 만들어서 쓰거나 react-query 라이브러리를 사용하면 된다고 한다.
서버와 DB 연동하고 서버에서 MongoDB에 쿼리 날려서 일단 insert까지는 됐는데 클라에서 todolist 추가로 객체 서버에서 받아서 DB에 보내려고 하니까 에러나면서 서버 종료되고... 일단 시간상 여기까지만 했다.
나머지는 나중에 프로젝트 때 혹시 MongoDB 연동할 일 있을 때나 해봐야할 것 같다. 그때도 firebase 쓰려나? 아님 내가 모르는 또다른 플랫폼을 쓰려나..
