[React] 함수형 라이프사이클과 useEffect

useMemo : 함수 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.

useState: 가변적인 상태를 지닐 수 있게 해준다.

useReducer: 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용한다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달 받아 새로운 상태를 반환하는 함수로 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야한다.

useCallback: useMemo 와 비슷한 함수로 주로 렌더링 성능을 최적화해야하는 상황에서 사용하는 이 훅을 사용하면 만들어 놨던 함수를 재사용할 수 있다.

useContext: 필요한 props를 글로벌하게 사용할 수 있게 도와준다.

useEffect: 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅이다.

⭐️ useEffect: 상황에 따라 다양한 역할을 한다.

• componentDidMountuseEffect 의 역할: 기본적으로 앱실행후 첫번째 렌더 후에 한번 실행이 된다.여기에선 주로 화면에 처음 보여줘야할 데이터들에 대한 api호출을 한다.

useEffect(()=>{

},[]);

//배열에 아무것도 없으면 componentDidMountuseEffect()처럼 작동

• componentDidUpdateuseEffect 의 역할 두번째 매개변수인 배열에 state가 들어가 있다면 state값이 바뀔때마다 호출되는 componentDidUpdate 의 역할을 한다.state가 바뀌고 렌더후 호출된다

• 배열 안에 여러개의 state 가 들어있다면? 배열안에 여러개의 state를 구독하고 있다면 배열 안에 state중 하나라도 업데이트가 되면 해당 useEffect가 호출이 된다. 하지만 여러개의 state가 동시에 업데이트 되었다 해도 한번만 호출이 된다.

useEffect(()=>{

},[state]);

//배열에 state가 있으면 componentDidMount()+componentDidUpdate() 처럼 작용

*클래스형 라이프사이클 참고