리액트 내장 Hooks

리액트는 클래스형 컴포넌트에서 많은 기능을 수행했다. 하지만 리액트는 함수형 컴포넌트에서도 클래스형의 컴포넌트의 기능을 지원하기 위해, 리액트 v16.8에서는 Hool이라는 개념이 도입되었다.

기본적인 리액트 내장훅에 대해서 공부해보자!

⭐useState

• 상태관리를 위한 Hook
• const [value, setValue] = useState(초기값) ;
• 코드 상단에서 import로 useState를 불러온다

useState는 한 변수만 사용할 수 있을까요?

당연히 아닙니다...

클래스 상태관리를 해야하는 변수가 하나라면 생각만 해도 너무 힘듭니다! 리액트가 이를 모를리 없죠! 따라서 여러번 사용이 가능합니다!

---

⭐useEffect

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 발생하는 작업입니다.

그럼 렌더링이 일어날 떄는 언제인가요?

• useState를 통해 관리할 상태가 변경되었을 때
• 컴포넌트의 속성이 변경되는 경우
• 상위 컴포넌트에서 렌더링 메서드가 호출되는 경우

입니다.

function example(){
    useEffect(() =.{
            //렌더링 될 때 발생하는 작업
    })
}

// 만약 마운트 될 때만 실행하고 싶다면?
// -> 두번째 파라미터로 [] 빈배열 넣어주기
function example(){
    useEffect(() =.{
            //렌더링 될 때 발생하는 작업
    },[])
}

//특정 값이 변경될 때만 실행하고 싶다면?
// -> 두번째 파라미터의 배열의 변수를 넣어준다.
function example(){
    useEffect(() =.{
            //렌더링 될 때 발생하는 작업
    },[value])
}

---

⭐ useReducer

useState보다 상태에 대한 더 많은 활용도를 높이기 위해 사용하는 Hook이다. 리듀서는 현재의 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션을 전달 받아 새로운 상태로 반환합니다.

책의 내용이 잘 이해가 가지 않아, 더 찾아보고자 했다. useReducer함수를 사용하면 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태관리를 할 수 있게된다.

useState는 컴포넌트 내부에서 업데이트를 할 수 있는 반면에 useReducer는 컴포넌트 밖 다른 파일에서도 상태관리가 가능하다

• 상태가 복잡하면 useReducer를
• 상태가 복잡하지 않다면 useState를 선택하면 된다!

🧩useReducer의 함수 사용법
1. 컴포넌트 외부에 상태 업데이트 로직을 담은 Reducer 함수 작성

function reducer(state, action){
    //state : 현재상태
  //action : 업데이트와 관련된 정보를 가진 객체 - 대문자로 사용
  //return : 컴포넌트가 지닐 새로운 상태 (업데이트 값)
}

1. useReducer함수 사용

const [state, dispatch] = useReducer(reducer, initialState);
// state : 현재상태
// dispatch : action을 발생시키는 함수 ex) dispatch({type:'INCREMENT'})
// reducer : 상태 업데이트 로직을 담은 함수
// initialState : 초기상태

⭐ useMemo

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

값이 변경될 때마다 setValue를 통해서 값을 변경해주면, 계속 변경을 하지 않아도 됨에도 렌더링을 하는 경우가 발생합니다.

이러한 경우 React Hook인 useMemo를 사용하면 됩니다

const avg = useMemo(() => getAverage(list),[list]) // 두번째 인자에 변경되면 렌더링 될 값을 지정합니다.

---

⭐ useCallBack

useCallBack은 useMemo와 동일하게 내부에서 발생하는 렌더린기능을 최적화하는 상황에서 사용합니다.

useMemo 는 리렌더링될 때마다 새로 함들어진 함수를 사용하는데 만약 자주 리렌더링되면 성능이 최상이 아니므로 이러한 부분은 useCallBack을 사용하여 최적화 해주는 것이 좋습니다.

• useCallback( 함수, [배열])
• 첫 번째 인자. 생성하고자 하는 함수
• 두 번째 인자, 값이 변경했을 때 함수를 새로 생성