라이프사이클, react hooks

라이프사이클

리액트 라이프사이클은 컴포넌트가 생성부터 소멸까지 거치는 일련의 단계를 의미.

리액트는 클래스형 컴포넌트와 함수형 컴포넌트 두 가지 종류(함수짱ㅠㅠ!).

각각의 종류마다 라이프사이클 메서드가 다르게 존재함. 

 

클래스형 컴포넌트 라이프 사이클 메서드

 

componentDidMount: 컴포넌트가 처음으로 생성되어 DOM에 마운팅된 후에 호출되는 메서드

 

shouldComponentUpdate: 컴포넌트의 상태와 속성이 변경되었을 때, 리렌더링을 할지 여부를 결정하는 메서드

 

componentDidUpdate: 컴포넌트의 상태와 속성이 변경된 후 호출되는 메서드

 

함수형 컴포넌트

useEffect Hook을 사용하여 라이프사이클을 구현

useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount를 대체할 수 있는

모든 라이프사이클 단계를 처리

 

useEffect: 컴포넌트가 생성, 갱신, 소멸될 때 호출되는 함수

 

함수형 컴포넌트에서는 상태 관리를 위해 useState Hook을 사용

상태의 변경을 감지하여 컴포넌트를 자동으로 다시 렌더링하며,

이 과정에서 useEffect Hook을 이용하여 렌더링 이후의 작업을 처리

 

React-Hooks

React Hooks는 함수형 컴포넌트에서도

상태 관리와 라이프사이클 이벤트 처리를 가능하게 해주는 React의 기능.

 

useState: useState Hook은 상태를 함수형 컴포넌트에서 관리

useState Hook은 두 가지 요소를 반환합니다.

첫 번째 요소는 현재 state이고,

두 번째 요소는 state를 업데이트하는 setter 함수

setter 함수를 호출할 때마다 컴포넌트의 상태가 갱신되고, 이에 따라 UI가 자동으로 갱신

 

useEffect: useEffect Hook은 컴포넌트가 렌더링 했을 때나,

업데이트 되었을 때 실행할 함수를 등록할 수 있게 해줌.

useEffect Hook은 첫 번째 인수로 전달한 함수를 컴포넌트가 렌더링한 이후에 매번 실행

함수 내에서 state 값을 읽어올 경우 두 번째 인수로 state 값을 전달

이렇게 두 번째 인수로 전달된 값이 변경되면 함수는 다시 실행

 

useContext: useContext Hook은 React의 Context API를 사용하여

컴포넌트들 사이에서 전역 변수를 이용할 수 있게 해줌.

 

useReducer: useReducer Hook은 useState와 같은 역할을 하지만,

여러 상태값을 포함하는 복잡한 로직에서 사용

useReducer Hook에 전달하는 첫 번째 인수는 리듀서 함수이고,

두 번째 인수는 초기 state 값입니다.

dispatch 함수는 액션을 dispatch할 때 사용

 

컨텍스트와 리듀서가 복합된게 리덕스라고 생각함

 

useCallback: useCallback Hook은 이전에 생성된 콜백 함수를 캐싱해서

새로운 렌더링에서 같은 함수를 다시 생성하지 않게 해줌 

 

useMemo: useMemo Hook은 계산 비용이 많이 드는 함수의 결과를 캐싱하여

성능을 최적화할 수 있게 해줌 

 

useRef: useRef Hook은 DOM 노드나 그 외의 값들을 저장하기 위해 사용

 

ref와 state는 비슷하지만 사용하는 목적과 역할이 다름

state는 컴포넌트 내부에서 사용되는 상태값을 저장하는데 사용

useState Hook을 이용하여 state를 선언,

선언된 state 값의 조작은 선언된 컴포넌트 내에서 이루어집니다.

컴포넌트 내부에서 state 값을 조작하면 해당 컴포넌트가 다시 렌더링되고, UI가 갱신

 

ref는 컴포넌트에서 DOM 요소에 직접적으로 접근할 때 사용

useRef Hook을 이용하여 ref를 선언

선언된 ref를 이용하여 DOM 요소에 접근하거나, 다른 데이터를 저장

ref는 state와 달리, 컴포넌트의 상태를 변경하지 않기 때문에 UI 갱신을 안함

또한 ref는 컴포넌트에서 정의된 함수 및 속성을 참조하고 업데이트할 수 있도록 해줌

 

ref와 state는 React에서 다른 용도로 사용되니 어떤 것을 쓸지는 컴포넌트의 동작에 따라 달라짐.

이러한 차이점 때문에, ref와 state는 같이 사용되는 경우가 있지만 서로 대체될 수는 없음!!

 

useLayoutEffect: useLayoutEffect Hook은 useEffect와 비슷.

다만, 렌더링 직후에 DOM 노드를 조작할 때 유용

 

useImperativeHandle: useImperativeHandle Hook은

부모 컴포넌트가 자식 컴포넌트의 메서드를 직접적으로 사용할 수 있게 해줌.

부모 컴포넌트에서 useRef를 사용해 자식 컴포넌트를 참조하고,

자식 컴포넌트에서 useImperativeHandle Hook을 사용하여 메서드를 노출