[React] Hook

Hook : 컴포넌트에서 상태(state) 나 생명주기 메서드 등의 기능을 사용할 수 있게 해주는 함수

 

[ useState : 컴포넌트 상태 추가 ]

---

→ 컴포넌트에서 상태를 추가할때 사용.

→ ‘state’는 현재 상태를 나타내고, setState 는 상태를 업데이트 한다.

→ React 에서 상태를 변경할 때는 상태를 직접 수정하는 것이 아니라, 해당 상태를 업데이트 하는 함수를 통해 변경해야 한다. 이렇게 하는 이유는 React 컴포넌트가 상태 변경을 감지하고 적절한 시점에 렌더링을 다시 할 수 있도록 하기 위해서 이다.

const [state, setState] = useState(initialState);

removeList 예시

const [todos, setTodos] = useState([])

// todos 에 직접 수정하지 않는다.
const deleteTodo = (id) => {
  setTodos(todos.filter((todo) => todo.id !== id));
};

 

 

[ useEffect : 렌더링 후 실행, 부수 효과를 다룰때 사용 ]

---

→ 컴포넌트의 렌터링 후에 실행되며, 두 번째 매개변수에 따라 언제 실행할 지 결정한다.

useEffect(() => {
  // 부수 효과(비동기 작업, 이벤트 구독 등)를 처리하는 코드
  return () => {
    // 정리(clean-up) 함수 (컴포넌트가 언마운트되거나 업데이트되기 전에 실행됨)
  };
}, [dependencies]);

 

[useContext : Context 를 사용할때 사용 ]

---

→ ‘MyContext’로 전달된 Context 의 현재 값을 반환한다.

const value = useContext(MyContext);

 

[ useReducer : ‘상태를 업데이트 할 수 있는 dispatch’ 함수를 반환 ]

---

→ 복잡한 로직을 다룰때 사용

→ ‘reducer’ 함수와 초기 상태를 받아 상태를 받아 상태를 업데이트 할 수 있는 ‘dispatch’ 함수를 반환한다.

const [state, dispatch] = useReducer(reducer, initialState);

 

[ useCallback : 주로 불필요한 함수 재랜더링이 될때 사용. ]

---

→ 메모이제이션 된 콜백 함수를 생성한다.

→ ‘dependencies’ 가 변경될 때만 함수가 재생성되며, 그렇지 않으면 이전에 생성된 함수가 재사용 된다.

const memoizedCallback = useCallback(() => {
  // 콜백 함수
}, [dependencies]);

 

[ useMemo: 불필요한 컴포넌트 등 재랜더링 방지. ]

---

→ 메모이제이션된 값을 생성. 값이 변경될 때만 계산이 다시 수행되며, 그렇지 않으면 이전에 계산된 값을 재사용한다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
//
useMemo()

 

[ React.memo : 컴포넌트 메모이제이션 (props) 를 통해 변경을 감지한다. ]

→ 컴포넌트가 동일한 props 를 받으면 이전에 렌더링된 결과를 재사용하여 불필요한 렌더링을 막을 수 있다.

const MyComponent = React.memo((props) => {
  // 컴포넌트 렌더링 로직
});

 

[ useRef : ‘ref’ 객체 생성 ( 리렌더링 시에도 값 유지 ) ]

---

→ ‘ref’ 는 함수 컴포넌트 에서도 ‘current’ 속성을 통해 현재 값을 유지하며, 컴포넌트가 리렌더링 되어도 값이 변경되지 않는다.

const myRef = useRef(initialValue);

 

# useImperativeHandle: 부모 컴포넌트가 자식 컴포넌트의 인스턴스에 직접적으로 접근.