리액트9 [React] useContext useContext useContext is a React Hook that lets you read and subscribe to context from your component. const value = useContext(SomeContext) useContext는 넘긴 context 값을 반환한다. 컨텍스트 값을 결정하기 위해 리액트는 컴포넌트 트리를 검색하고 가장 가까운 컨텍스트 프로바이더를 찾는다. 컴포넌트에 Provider로 감싸거나 부모 컴포넌트 중에 하나를 감싸라. (매칭되는 컨텍스트 프로바이더로) import { useContext } from 'react'; function Button() { const theme = useContext(ThemeContext); // ... fun.. 2023. 11. 29. [React] forwardRef forwardRef forwardRef lets your component expose a DOM node to parent component with a ref. const SomeComponent = forwardRef(render) Parameters render: The render function for your component. React calls this function with the props and ref that your component received from its parent. The JSX you return will be the output of your component. Returns forwardRef returns a React component that you .. 2023. 11. 29. [React] memo memo memo lets you skip re-rendering a component when its props are unchanged. const MemoizedComponent = memo(SomeComponent, arePropsEqual?) Parameters Component: The component that you want to memoize. The memo does not modify this component, but returns a new, memoized component instead. Any valid React component, including functions and forwardRef components, is accepted. optional arePropsEqu.. 2023. 11. 29. [React] useMemo useMemo useMemo is a React Hook that lets you cache the result of a calculation between re-renders. const cachedValue = useMemo(calculateValue, dependencies) Parameters calculateValue: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On next rende.. 2023. 11. 29. [React] useCallback useCallback useCallback is a React Hook that lets you cache a function definition between re-renders. const cachedFn = useCallback(fn, dependencies) Parameters fn: The function value that you want to cache. It can take any arguments and return any values. React will return (not call!) your function back to you during the initial render. On next renders, React will give you the same function agai.. 2023. 11. 28. [React] useRef useRef useRef is a React Hook that lets you reference a value that’s not needed for rendering. const ref = useRef(initialValue) Parameters initialValue: The value you want the ref object’s current property to be initially. It can be a value of any type. This argument is ignored after the initial render. Returns useRef returns an object with a single property: current: Initially, it’s set to the .. 2023. 11. 28. [React] useEffect useEffect useEffect is a React Hook that lets you synchronize a component with an external system. useEffect(setup, dependencies?) 예시) useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.connect(); return () => { connection.disconnect(); }; }, [serverUrl, roomId]); Parameters setup: The function with your Effect’s logic. Your setup function may also optionally re.. 2023. 11. 28. [React] useState useState useState is a React Hook that lets you add a state variable to your component. Returns useState returns an array with exactly two values: The current state. During the first render, it will match the initialState you have passed. The set function that lets you update the state to a different value and trigger a re-render. useState는 초기값과 re-render를 트리거하는 set함수를 넘겨준다. 초기값으로 object를 넘길 수도 .. 2023. 11. 27. [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 le.. 2023. 11. 27. 이전 1 다음
