[TIL] 09.10

프로젝트 기간이 오늘 포함 이틀이 남았다. 백 은 대부분 완성이 되었지만 프론트가 아직 완성이 덜 되어 프론트 작업을 도와주었다.

카테고리를 선택할 때마다 헤더 부분의 타이틀이 선택한 카테고리 값으로 변경이 되어야 하고 댓글들도 각 카테고리의 댓글들이 나오게 만들어 주어야 하는데 싱크가 맞지 않아 한박자씩 느리게 랜더되는 에러가 있었다. 

componentdidMount로 값들을 불러 오도록 만들어 두었는데 랜더가 되고나서 componentdidMount가 실행이되어 값은 담기지만 다시 랜더를 실행해 주지 않아서 발생되는 에러였다. 그래서 setStates가 실행이 되면 랜더도 같이 해준다고 알고 있었기 때문에 state를 만들고 

componentdidMount 에 setState를 넣어주어서 문제를 해결 하였다. 

 

function 컴포넌트에서는 state를 사용하지 못하기에 Hoc를 사용하였다. 처음 사용하는 것이었는데 생각보다 간단 하였다.

Hoc에는 useEffect라는 함수가 있는데 이것은 componentdidMount와 같은 역활을 한다고 한다. 

state 설정은 아래와 같이 설정하면 된다.

const [items, setitems] = useState

 Hoc가 어려울 거란 생각을 가지고 있었는데 이번에 사용하면서 간단하고 편리하다고 느꼈다.