🌏 [project #2] Jigu-tory #4

흡사 일주일 회고같이 되어버린 블로깅. 이렇게라도 꾸준히 하자!!

이번 프로젝트를 시작할 때 타입스크립트나 리덕스같은 새로운 스택을 쓰지 않기로 팀원들과 이야기 되었다. 그 이유는 첫 번째 프로젝트인 Plantingg 에서 새로운 스택에 대한 필요성을 느끼지 못했기 때문이다. 스택이 필요할 때 배우는게 더 와 닿고 도움이 될 것이라 생각했다.

지금 react 함수형 컴포넌트로 100% 프로젝트를 진행하는 단계에서 아래 두 가지는 최소한 소화해야 한다고 생각한다. 😢

• 다양한 effect hooks 를 통한 컴포넌트의 최적화
• 효율적인 상태관리

초반에 상태관리에서 많은 어려움을 겪었고, 하위 컴포넌트에 props 를 내려주는 불편함도 요새들어 느끼고있다. 이래서 redux store 로 상태관리를 하는건가 싶다.

타입스크립트는 사용해 본적은 없지만 종종 겪는 Type error 해결에 좋지 않을까 생각해 본다. 프로젝트 끝내고서 꼭 배우고싶은 언어이다. 이렇게 새 스택을 배워야할 이유들이 생기고 있다 요새.

이번 주는 마이페이지와 사용자정보 수정페이지를 구현했다. 에러가 빵빵 터졌다ㅎㅎ 이것저것 해보다가 어제 서버 api에서 문제가 될 만한 것을 발견하고 백엔드 팀원분과 이야기를 나눴고, 서버코드를 정비하시는 중이다. 이제 마지막 한 주가 남았는데 에러 핸들링과 css, 반응형에 신경써야할 것 같다.

배운 점

서버 api

저번 주 까지는 api에서 받아오고, 데이터를 보내주는데 큰 문제가 없었다. 그런데 이번 주에 너무 해결이 안 되서 서버코드를 자세히 보기 시작했다. 백엔드도 배웠지만 한 달 정도를 리액트만 쓰다보니 솔직히 자세히 보지 않고 지나갔던 것이 사실이다. api 분기를 필요에 맞게 정말 잘 짜야된다는 것을 또 한 번 느꼈다. 덕분에 서버 controller 코드를 보면서 내 코드가 왜 내가 의도한 방향으로 실행되지 않았었는지 알게되었다.

hooks 에서의 생명주기 ?

리액트를 배우면서 아리송했던 것이 생명주기였다. 생겨나고 진행되고 없어지는 것. 단순해 보였지만 익숙하지 않은 나로서는 이해하기 어려웠다. 이번에 100% 함수형 컴포넌트를 쓰며 리액트의 생명주기와 흡사한 useEffect 를 많이 활용하고 있다. 처음엔 그냥 계속 실행되고 있어야 되는 것들- 이라는 막연한 생각이였으나 음.. 두 번째 들어가는 파라미터에 따라 useEffect 안에 들어가는 함수가 호출된다. 직접 써 보면서 effect hooks 를 잘 쓰고 싶었다.

useEffect(() => {func}, [])

• 컴포넌트가 처음 렌더 될 때만 함수 호출
• componentDidmount 처럼 컴포넌트가 처음 나타났을 때 호출

useEffect(() => {funct})

• 컴포넌트가 리렌더 할 때마다 호출
• componentWillUnmount 처럼 화면이 사라질 때 호출

useEffect(() => {funct}, [특정 상태])

• 두 번째 파라미터에 넣은 값이 없데이트 됐을 때 실행
• componentDidUpdate

📚 읽어보기

• https://rinae.dev/posts/a-complete-guide-to-useeffect-ko
• https://github.com/SeonHyungJo/react-hook-sample
• https://velog.io/@velopert/react-hooks
• https://dmitripavlutin.com/react-usememo-hook/

다음 주 할 일

• 동적인 intro page 만들기
• 마이페이지 에러 핸들링
• 리액트 훅스의 렌더링 과정 & 순서 확실히
• useRef, useCallback, useMemo 정리