useId는 접근성 속성에 전달할 수 있는 고유한 ID를 생성하는 리액트 훅이에요. const id = useId(); Reference | 레퍼런스 useId() 고유 ID를 생성하려면 최상위 컴포넌트에서 useId를 호출하세요. import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); // ... } 더 많은 예시를 보려면 아래 예시들을 참고하세요. Parameters | 매개변수(파라미터) useId는 어떤 매개변수도 받지 않아요. Returns | 반환값 useId는 해당 컴포넌트에서 특정한 useId 호출과 연관된 고유 ID 문자열을 반환해요. Caveats | 주의사항 useId는 훅이기 때..
리액트 공식문서 | React Docs/Reference > react@18.2.0
useEffect는 외부 시스템과 컴포넌트의 싱크를 맞춰주는 훅이에요. useEffect(setup, dependencies?) Reference | 레퍼런스 useEffect(setup, dependencies?) 이펙트(Effect)를 선언하기 위해서는 컴포넌트 최상단에서 useEffect를 선언하세요. import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { const connection = creat..
useDeferredValue는 UI의 일부 업데이트를 늦춰주는 리액트 훅이에요. const deferredValue = useDeferredValue(value) Reference | 레퍼런스 useDeferredValue(value) 값의 연기된 버전을 얻으려면 컴포넌트의 최상위에서 useDeferredValue를 호출하세요. import { useDeferredValue, useState } from "react"; function SearchPage(){ const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // ... } Parameters | 매개변수(파라미터) value : 연기하고 싶은 값..
useDebugValue는 리액트 DevTools에서 커스텀훅에 라벨을 추가해주는 훅이에요. useDebugValue(value, format?) Reference useDebugValue(value, format?) 읽을 수 있는 디버깅 값을 보여주려면 커스텀훅의 최상위에서 useDebugValue를 호출하세요. function useOnlineStatus(){ // .... useDebugValue(isOnline ? 'Online' : 'Offline'); // .... } Parameters | 파라미터(매개변수) value : 리액트 DevTools에서 보여주고 싶은 값. 어떤 타입의 값을 넣어도 된다. format (선택적) : 포맷팅을 해주는 함수. 컴포넌트가 검사될 때, 리액트 DevToo..
useContext는 컴포넌트가 컨텍스트를 읽고 구독할 수 있도록 하는 리액트 훅이에요. const value = useContext(SomeContext); Reference useContext(SomeContext) 컨텍스트를 읽거나 구독하기 위해서는 최상위 컴포넌트에서 useContext를 호출하세요. import { useContext } from 'react'; function MyComponent(){ const theme = useContext(ThemeContext); // ... } Parameters | 파라미터(매개면수) SomeContext : createContext로 미리 생성한 컨텍스트. 컨텍스트 자체만으로는 정보를 가질 수 없으며 컴포넌트를 통해 제공하거나 읽을 수 있는 종류..
useCallback은 리렌더 과정 사이에서 함수 정의를 캐싱하는 리액트 훅이에요. const cachedFn = useCallback(fn, dependencies) Reference | 레퍼런스 useCallback(fn, dependencies) 리렌더 과정 중에 함수의 정의를 캐싱하려면 최상위 컴포넌트에서 useCallback을 호출하세요. import { useCallback } from 'react'; export default function ProductPage({ productId, referrer, theme }){ const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { re..
카나리아 테스트 use 훅은 현재 React의 Canary과 실험실 채널에서만 사용할 수 있어요. 리액트의 릴리즈된 채널에 대해서 알아보려면 여기를 눌러주세요. use는 Promise나 context 같은 리소스 값을 읽게 도와주는 리액트 훅이에요. const value = use(resource); Reference | 레퍼런스 use(resource) Promise나 context 같이 리소스 값을 읽어오려면 컴포넌트에서 use를 호출하세요. import { use } from 'react'; function MessageComponent({ messagePromise }) { const message = use(messagePromise); const theme = use(ThemeContext);..
훅(Hooks)는 컴포넌드에서 서로 다른 리액트 기능을 사용하게 해줘요. 사용자는 리액트에 내장된 훅을 사용할 수도, 훅을 조합해서 새로운 훅을 만들수도 있어요. 이 페이지에서는 리액트에 내장된 모든 훅을 나열했어요. State Hooks | 상태 훅 상태는 사용자의 입력 값 같은 정보를 컴포넌트가 기억하게 도와줘요. 예를 들어, 폼(form) 컴포넌트는 입력 값을 저장하기 위해 상태를 사용할 수 있어요. 이미지 갤러리 컴포넌트는 선택된 이미지의 인덱스를 저장하는데 사용할 수 있고요. 컴포넌트에 상태를 주입하기 위해서 아래의 훅들 중 하나를 사용하세요: useState는 즉시 수정할 수 있는 상태 변수를 선언해요. useReducer는 리듀서 함수의 수정 로직을 가진 상태변수를 선언해요. function..
본 섹션은 리액트 사용자를 위한 자세한 참고 자료에요. 리액트에 대한 소개를 보고 싶다면 '리액트 배우기'를 참고해주세요. 리액트 공식 문서는 기능에 따라 세부 섹션으로 분리되어 있어요. React | 리액트 리액트 기능들 : 훅 (Hooks) - 컴포넌트에 따른 리액트의 다양한 기능을 사용하세요. 컴포넌트 (Components) - JSX에서 사용할 수 있는 내장 컴포넌트에 대한 문서에요. APIs (APIs) - 컴포넌트를 정의하는데 유용한 API들이에요. Directives (Directives) - 리액트 서버 컴포넌트와 호환되는 번들에 대한 명령어에요. React DOM | 리액트 돔 리액트 돔은 브라우저 돔 환경에서 동작하는 웹 어플리케이션에서만 지원되는 기능을 포함해요. 이 섹션은 다음과 같..
