라이프사이클(클래스형 vs 함수형), react hooks

1. 라이프 사이클(클래스형 vs 함수형)

리액트는 자바스크립트를 기반으로 한 사용자 인터페이스(UI) 개발을 위한 인기있는 라이브러리
리액트 컴포넌트는 라이프 사이클이라고 불리는 여러 단계를 거쳐 생성되고 업데이트되며 소멸됨
리액트의 라이프 사이클은 클래스형 컴포넌트와 함수형 컴포넌트에서 약간 다르게 작동함

ⅰ.  클래스형 컴포넌트 라이프 사이클

- 클래스형 컴포넌트의 라이프 사이클은 다음과 같은 단계로 이루어짐

① constructor - 컴포넌트가 생성될 때 처음으로 호출되는 메서드. 초기 상태값을 설정하거나 메서드를 바인딩하는 등의 작업을 수행함

②  componentDidlMount - 컴포넌트가 렌더링되기 전에 호출됨. 이 단계에서는 주로 API 호출이나 초기 데이터 로딩과 같은 작업을 수행함.DOm에 접근할 수 있으므로, 필요한 경우 DOM 조작을 수행할 수도 있음

③  componentDidUpdate - 컴포넌트가 업데이트된 후에 호출되는 메서드. 이 단계에서는 이전 props, state 현재 props, state를 비교하여 필요한 작업을 수행할 수 있음. DOM에 접근하여 변경된 내용에 대한 처리를 할 수 있음

④  componentWillUnmount - 컴포넌트가 소멸되기 전에 호출되는 메서드. 이 단계에서는 리소스 정리나 이벤트 헨들러 해제 등의 작업을 수행할 수 있음

- 이외에도 추가적인 라이프 사이클 메서드가 있는데 React 16.3 버전 이후부터는 사용이 권장되지 않은며, 대신 위에 언급된 네 가지 메서드를 주로 사용하는 것이 좋음

- 추가적인 메서드

✔️ componentWillMount (deprecated)- 컴포넌트가 렌더링되기 전에 호출되는 메서드. 이 메서드는 React 16.3이전에 사용되었으며, 현재는 사용이 권장되지 않고, constructor 내부에서 작업을 처리하고나, componentDidMount 에서 처리하는 것이 좋음 

✔️ componentWillReceiveProps (deprecated) - 컴포넌트가 새로운 porps를 받았을 때 호출되는 메서드. 이 메서듣 React 16.3 이전에 사용되엇으며, 현재는 권장하지 않고, componentDidUpdate에서 이전 props와 새로운 props를 비교하여 처리하는 것이 좋음

✔️ shouldComponentUpdate - 컴포넌트가 업데이트되기 전에 호출되는 메서드. 리렌더링 여부를 결정하기 위해 이전 props, state 그리고 새로운 props, state를 비교하고, true 또는 false 값을 반환함. 이 메서드가 true를 반환하면 컴포넌트는 업데이트되고 리렌더링됨. false를 반환하면 업데이트 되지 않고 리렌더링도 이루어지지 않음

✔️ componentWillUpdate (deprecated) - shouldComponentUpdate가 true를 반환한 경우에만 호출되며, 컴포넌트가 업데이트되기 직전에 호출됨. 이 메서드는 React 16.3이전에 사용되었으며, 현재는 권장하지 않음. componentDidUpdate에서 처리하는 것이 좋음

ⅱ. 함수형 컴포넌트(Hooks를 사용한 경우)

- 함수형 컴포넌트에서는 라이프 사이클 메서드가 직접적으로 제공되지 않음. 하지만 React 16.8 버전부터 도입된 Hooks를 사용하여 함수형 컴포넌트에서도 라이프 사이클과 비슷한 작업을 수행할 수 있음

① useEffect - 컴포넌트가 렌더링될 때마다 특정 작업을 수행함. 클래스형 컴포넌트의 componentDidMount와 componentDidupdate역할을 함. useEffect는 첫 번째 인자로 콜백함수를 받으며, 두 번째 인자로 의존성 배열(dependency array)을 받음. 의존성 배열에는 해당 콜백 함수가 의존하는 변수들을 나타내며, 이 변수들이 변경되었을 때에만 콜백 함수가 호출됨

② useLayoutEffect - 컴포넌트가 렌더링된 직후에 동기적으로 작업을 수행하는 훅 useEffect와 비슷하지만 렌더링 이후에 바로 작업이 수행되기 때문에 렌더링 결과에 대한 처리를 할 수 있음

③ useContext - 리액트 컴텍스트를 사용하여 전역 데이터를 공유할 수 있게 해줌. 컨텍스트 객레를 받아 해당 컨텍스트의 값을 반환함

④ useState - 상태값을 관리하기 위해 사용됨, useState 훅은 첫 번째 요소로 현재 상태값을 두 번째 요소로 상태값을 업데이트하는 함수를 반환함. 클래스형 컴포넌트의 this.state와 비슷한 역할을 함

⑤ useMemo - 특정 계산을 수행하여 값을 기억하고 재사용함. 첫 번째 요소로 계산함수를, 두 번재 요소로 의존성 배열을 받음. 의존성 배열에 나열된 변수들이 변경되었을 때에만 계산 함수가 호출되고 그 결과가 캐시됨

⑥ useCallback - 콜백 함수를 기억하고 재사용함. 첫번째 요솔 콜백 함수를, 두 번째 요소로 의존성 배열을 받음. 의존성 배열에 나열된 변수들이 변경되지 않는 한, 동일한 콜백 함수를 재사용함

⑦ useRef - 변수를 생성하고 유지하기 위해 사용함. 변경 가능한 ref객체를 반환함. 이 객체의 current속성르 통해 변수에 접근할 수 있음

클래스형 컴포넌트는 세부적인 컨트롤이 필요한 경우에 유용함
함수형 컴포넌트는 간결하고 읽기 쉽게 작성할 수 있으며, 훅을 통해 라이프 사이클과 샅태 관리를 처리할 수 있음.
React 16.8 이후에는 함수형 컴포넌트와 훅을 사용하는 것이 추천되는 방식

2. React hooks

React Hook은 React 16.8버전부터 도입된 기능으로 함수형 컴포넌트에서 상태 관리와 라이프 사이클 기능르 제공하는 API임
이전에는 클래스형 컴포넌트에서만 사용할 수 있었던 상태 관리와 라이프 사이클을 함수형 컴포넌트에서도 쉽게 처리 할 수 있게 됨

- Hooks는 기존의 클래스형 컴포넌트에서 사용되던 라이프 사이클 메서드와 상태 관리를 대처하기 위해 제공됨
- 함수형 컴포넌트에서도 상태값을 관리하고, 사이드 이팩트를 처리하며, 컴포넌트의 라이프 사이클 작업을 수행할 수 있음
- 함수형 컴포넌트의 사용성과 유지 보수성을 향상시키는 데 도움을 줌
- Hooks를 사용하면 코드를 더 간결하게 작성하고, 상태 관리와 부수 효과 처리를 더 직관적으로 할 수 있음

 

이번 lv2 과제를 하면서 다른 사람과 함께 맞춰가면서 하나의 프로젝트를 완성할 때 미리 정해야되는 것들이 많은 것을 깨달을 수 있었다.
그래도 점점 어떠한 것을 미리 정하면 좋을지 알게 되어서 다행인거 같다
또, 다른분들과 코드리뷰를 통해서 정말 많은것들을 배우는거 같다.
내가 생각하지도 못했던 부분이나 구현하고 싶었지만 제대로 되지 않아서 일단 제출했던 부분이 다른분들은 되어 있는것도 보게 되어서 하나하나 배울 수 있어서 너무 재미있는거 같다.
아 그리고 생각보다 css에서 해야할것들이 많은걸 알게된 한주여서 이제는 앞으로 css부분을 조금 연습을 해야될꺼 같은 느낌을 받게 되었다.