전체 글

리액트는 자동적으로 DOM을 렌더링 결과에 맞게 업데이트 하기 때문에 컴포넌트는 보통 DOM을 조작할 일이 없어요. 그러나 때때로 리액트가 관리하는 DOM 엘리먼트에 접근할 필요가 생겨요. 노드를 포커싱한다거나, 노드로 스크롤을 이동시켜야하거나, 크기와 위치를 측정해야할 때가 그 예에요. 리액트에는 이러한 것들을 해주는 내장 기능이 없기 때문에 ref로 DOM 노드를 지정해야해요. 이 페이지에서는 - 리액트가 관리하는 DOM 노드에 ref 속성으로 어떻게 접근해야하는지 - ref JSX 속성이 useRef 훅과 어떻게 연관이 있는지 - 다른 컴포넌트의 DOM 노드에 어떻게 접근하는지 - 어떤 경우가 리액트로 관리되는 DOM 노드를 수정해도 안전한 경우인지 를 알아볼 거예요. Getting a ref to..

컴포넌트가 어떤 정보를 "기억"하도록 하고 싶지만 그 정보로 새로운 렌더링을 발생시키고 싶지는 않다면 ref를 사용하세요. 이 페이지에서는 - 컴포넌트에 ref를 어떻게 추가하는지 - ref의 값을 어떻게 업데이트하는지 - 상태와 ref가 어떻게 다른지 - 어떻게 안전히 ref를 사용하는지 를 알아볼 거예요. Adding a ref to your component | 컴포넌트에 ref 추가하기 리액트에서 useRef 훅을 불러와서 컴포넌트에 ref를 추가할 수 있어요. import { useRef } from 'react'; 컴포넌트에서 useRef 훅을 호출하고 첫 번째 인자로 참조하고 싶은 초기값을 전달하세요. 예를 들어 아래 예시는 값이 0인 ref에요. const ref = useRef(0); u..

리듀서는 컴포넌트의 상태 업데이트 로직을 통합시켜줘요. 컨텍스트는 정보를 다른 컴포넌트까지 전달해줘요. 여러분은 복잡한 화면의 상태를 관리하기 위해 리듀서와 컨텍스트를 함께 사용할 수 있어요. 이 페이지에서는 - 리듀서를 컨텍스트와 어떻게 결합하는지 - props를 통해 상태와 디스패치를 전달하지 않는 방법은 무엇인지 - 어떻게 컨텍스트와 상태 로직을 각각 분리된 파일에 넣는지 를 알아볼 거예요. Combining a reducer with context | 컨텍스트와 리듀서 결합하기 리듀서를 소개한 문서에서 나왔던 이 예시에서 상태는 리듀서로 관리돼요. 리듀서 함수는 모든 상태 업데이트 로직을 포함하고 이 파일의 가장 아래에서 선언되었어요. 리듀서는 이베느 헨들러가 더 짧고 간결해지도록 만들어줘요. 그..