이벤트 핸들러는 같은 상호작용을 다시 할 때만 재실행돼요. 이벤트 핸들러와는 다르게 이펙트는 props이나 상태 변수와 같이 읽으려는 값이 이전에 렌더링을 할 때와 달라졌을 때 바뀌어요. 때때로 이 두 행동을 혼합하고 싶을 때가 있을 거예요. 특정 값에만 반응하여 재실행 되는 이펙트를 만들고 싶을 수도 있어요. 이 페이지에서는 어떻게 그런 이펙트를 만드는지 알려줄 거예요. 이 페이지에서는 - 이벤트 핸들러와 이펙트 사이에서 어떻게 선택할 것인지 - 이펙트가 왜 반응적이고 이벤트 핸들러가 왜 그렇지 않은지 - 이펙트의 코드가 반응적이지 않을 때는 무엇을 해야하는지 - 이펙트 이벤트가 무엇이고 이펙트에서 이들을 어떻게 분리해야하는지 - 최근 props와 상태를 이펙트 이벤트를 사용하여 이펙트에서 어떻게 읽는..
React Docs
때때로 두 컴포넌트의 상태를 항상 같이 바꾸어야할 때가 있어요. 그렇게 하려면 양쪽에서 상태를 제거하고 가장 가까운 공통 부모로 이동한 후에 props를 통하여 필요한 상태를 아래로 내려주어야해요. 이는 상태 끌어올리기로 알려져 있고 리액트로 코드를 쓸 때 가장 자주 사용할 것들 중 하나에요. 이 페이지에서는 - 상태를 끌어올려서 컴포넌트 간에 어떻게 공유하는지 - 제어 컴포넌트와 비제어 컴포넌트는 무엇인지 를 알아볼 거예요. Lifting state up by example | 예시를 통해 상태 끌어올리기 이 예시에서 부모 컴포넌트인 Accordion 컴포넌트는 두 개의 다른 Panel 을 렌더링해요. Accordion Panel Panel 각각의 Panel 컴포넌트는 콘텐츠를 볼 수 있는지를 결정하는..
useRef는 렌더링을 할 필요가 없는 값을 참조할 수 있게 해주는 리액트 훅이에요. const ref = useRef(initialValue) Reference | 레퍼런스 useRef(initialValue) ref를 선언하고 싶다면 최상위 컴포넌트에서 useRef를 호출하세요. import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... } Parameters | 파라미터 initialValue : ref 객체의 current 속성이 최초로 지정될 값. 타입은 상관이 없어요. 이 인자는 최초 렌더링 이후에는 무시돼요. Returns | ..
useReducer는 컴포넌트에 리듀서(reducer)를 추가해주는 리액트 훅이에요. const [state, dispatch] = useReducer(reducer, initialArg, init?) Reference | 레퍼런스 useReducer(reducer, initialArg, init?) 리듀서로 상태를 관리하기 위해서는 최상위 컴포넌트에서 useReducer를 호출하세요. import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... Parameter..
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는 훅이기 때..
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..
