이번 주차는 과제를 만들어야 하는 주차라 바빴다. 우선 시작하기 전에 강의에서 배웠던 내용을 토대로 쉬운거부터 천천히 만든다는 마음가짐으로 임했다.
필수 라이브러리를 설치 한 이후 홈페이지에 들어가자마자 화면이 보일수 있도록 styled-components를 이용하여 css작업을 진행하였다. 어느정도 틀이 잡히면 임의의 props 값을 넣어 준 뒤 리덕스로도 구현해보았고 추가적으로 파이어베이스와 리덕스thunck를 이용하여 실제로 데이터를 처리했을때 파이어스토어에 데이터가 잘 들어가는지 리덕스에 값이 잘 수정되는지 확인 한 후 몇몇 기능에 똑같은 작업을 진행하였다. 이번 작업을 하면서 어려웠던 점은 리덕스의 사용이 익숙하지 않아 초기값 initialState의 값이 어떤 방식으로 들어가게되고 어떤게 수정되고 어떻게 수정되는지 파악이 덜된상태에서 작업을 진행해야만 하는 점이였다.
그래서 최대한 console.log를 찍어 데이터가 어떻게 처리되는지 일일이 확인하면서 시작했었던거 같았다. 렌더링이 된 후 state 값은 이 상태이고 어떤 특정 작업을 한 이후 console.log 확인하면 수정된 state 값이 되는지 보면서 작업해보니 많은 공부가 되었다.
함수형 컴포넌트와 클래스형 컴포넌트의 라이프사이클을 간단히 설명 해보자면 컴포넌트가 브라우저에서 나타날때 , 사라질때 , 업데이트 될 때 호출되는 API이다. 함수형 컴포넌트는 라이프사이클 api를 사용할수 없고 대신 react hook를 이용하여 작업한다.
useEffect라는 훅을 이용하여 두번째 인자값이 빈배열 일 경우 컴포넌트가 렌더링 될때 딱 한번 실행되고 안자값에 값이 있으면 해당 인자값이 업데이트 될경우 실행된다. return을 이용하면
컴포넌트가 중단되었을때 실행시킬수도 있다.
