이번주에 한일
3사 소셜로그인 / 자신의 계정으로 구분된 각자의 TODOLIST에 대한 CRUD 가 구현된 TODOLIST를 최종완성하고 배포하였다.
구현 스터디를 통해 공용API에서 상황에 따라 필요한 정보를 가져오는 REDUX API를 구현하여 다양한 종류의 게시물을 인피니트 스크롤 하고 FLEX/GRID 레이아웃이 적용된 반응형 토이 프로젝트를완성했다.
이번주의 핵심
1. 라이프사이클 (클래스형 컴포넌트)
React 클래스 컴포넌트는 라이프사이클 메소드를 가지고 있습니다. 이는 컴포넌트가 생성되고 업데이트되며 소멸하는 과정 동안 특정 시점에서 실행되는 함수입니다. 주요 라이프사이클 메소드는 다음과 같습니다:
constructor: 컴포넌트가 만들어지면서 초기 상태를 설정합니다.componentDidMount: 컴포넌트가 화면에 처음 렌더링될 때 실행됩니다.componentDidUpdate: 컴포넌트가 업데이트된 후 실행됩니다.componentWillUnmount: 컴포넌트가 화면에서 사라지기 전에 실행됩니다.
이 외에도 여러 메소드가 있지만, 이러한 메소드를 통해 컴포넌트의 생성, 업데이트, 소멸 과정을 세밀하게 제어할 수 있습니다.
2. React Hooks (함수형 컴포넌트)
React Hooks는 React 16.8 버전에서 도입되어 함수형 컴포넌트에서도 상태 관리를 할 수 있게 하고 라이프사이클과 비슷한 기능을 수행하게 해주는 API입니다. 주요 Hooks는 다음과 같습니다:
useState: 컴포넌트에서 상태를 관리합니다.useEffect: 라이프사이클 메소드와 비슷한 기능을 합니다. 컴포넌트가 렌더링된 이후에 어떤 작업을 수행할 지 정의합니다. 클래스형 컴포넌트의componentDidMount,componentDidUpdate,componentWillUnmount와 비슷한 역할을 수행합니다.useContext: 컴포넌트에서 React Context를 사용할 수 있게 합니다.useReducer: 복잡한 컴포넌트에서 상태를 관리하는 데 사용합니다.
이외에도 많은 내장 Hooks와 사용자 정의 Hooks를 만들어 사용할 수 있습니다.
클래스형 vs 함수형
함수형 컴포넌트는 클래스형 컴포넌트에 비해 간결하고 이해하기 쉬운 경향이 있습니다. 또한, Hooks를 사용하면 라이프사이클 메소드와 비슷한 기능을 수행할 수 있으므로 함수형 컴포넌트를 사용하는 것이 좋을 수 있습니다. 그러나 어떤 방식을 사용할지는 개발자의 선호나 프로젝트의 요구 사항에 따라 달라집니다.
이번주에 느낀점
CSS에 대해 확실히 더 이해하고 실전에서 사용할 수 있게 되어 성장함을 느꼈고, 기존에 이해했던 개념에 추가적인 실습을 통해 반복숙달 할 수 있었습니다.
