[React] 리액트 개요

State Hooks

State lets a component “remember” information like user input.

 

useState declares a state variable that you can update directly.

useReducer declares a state variable with the update logic inside a reducer function.

 

Context Hooks 

Context lets a component receive information from distant parents without passing it as props.

 

useContext reads and subscribes to a context.

 

Ref Hooks 

Refs let a component hold some information that isn’t used for rendering, like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an “escape hatch” from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.

 

useRef declares a ref. You can hold any value in it, but most often it’s used to hold a DOM node.

 

Effect Hooks 

Effects let a component connect to and synchronize with external systems. This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.

 

useEffect connects a component to an external system.

 

Performance Hooks 

A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.

 

To skip calculations and unnecessary re-rendering, use one of these Hooks:

 

useMemo lets you cache the result of an expensive calculation.

useCallback lets you cache a function definition before passing it down to an optimized component.

 

https://react.dev/reference/react