React/Documentation24 리액트 공식 문서 번역-24. Ref를 사용한 DOM 조작 React는 자동으로 DOM을 렌더링 출력과 일치시키므로, 컴포넌트가 종종 DOM을 조작할 필요가 없습니다. 그러나 때때로 React가 관리하는 DOM 요소에 액세스해야 할 수도 있습니다. 예를 들어 노드에 포커스를 맞추거나, 스크롤하거나, 크기와 위치를 측정할 수 있습니다. React에는 이런 작업을 수행하는 내장 방법이 없으므로, DOM 노드에 대한 ref가 필요합니다. 노드에 대한 ref 얻기 React가 관리하는 DOM 노드에 액세스하려면 먼저 useRef Hook을 가져옵니다 import { useRef } from 'react'; 그런 다음 컴포넌트 내에서 ref를 선언합니다 const myRef = useRef(null); 마지막으로, ref 속성으로 DOM 노드에 전달합니다 useRef H.. 2023. 7. 17. 리액트 공식 문서 번역-23. Refs를 사용해 값 참조하기 컴포넌트가 어떤 정보를 "기억"하길 원하지만, 그 정보가 새로운 렌더링을 트리거하지 않기를 원할 때 ref를 사용할 수 있습니다. 컴포넌트에 ref 추가하기 React에서 useRef 훅을 가져와 컴포넌트에 ref를 추가할 수 있습니다 import { useRef } from 'react'; 컴포넌트 내부에서 useRef 훅을 호출하고 참조할 초기 값을 유일한 인수로 전달합니다. 예를 들어, 값 0에 대한 참조는 다음과 같습니다 const ref = useRef(0); useRef는 다음과 같은 객체를 반환합니다 { current: 0 // The value you passed to useRef } ref.current 속성을 통해 해당 ref의 현재 값을 액세스할 수 있습니다. 이 값은 의도적으로 변경.. 2023. 7. 16. 리액트 공식 문서 번역-22. 리듀서와 컨텍스트를 확장하기 리듀서를 사용하면 컴포넌트의 상태 업데이트 로직을 통합할 수 있습니다. 컨텍스트를 사용하면 다른 컴포넌트에게 깊이 있는 정보를 전달할 수 있습니다. 리듀서와 컨텍스트를 함께 사용하여 복잡한 화면의 상태를 관리할 수 있습니다. 리듀서와 컨텍스트 결합하기 리듀서 소개 예제에서 상태는 리듀서에 의해 관리됩니다. 리듀서 함수는 모든 상태 업데이트 로직을 포함하고 이 파일의 하단에 선언되어 있습니다 https://codesandbox.io/s/u5b2fk?file=/App.js&utm_medium=sandpack naughty-keldysh-u5b2fk - CodeSandbox naughty-keldysh-u5b2fk using react, react-dom, react-scripts codesandbox.io .. 2023. 7. 16. 리액트 공식 문서 번역-21. Context를 사용해 깊게 데이터 전달하기 보통 부모 컴포넌트에서 자식 컴포넌트로 정보를 props를 통해 전달합니다. 하지만 중간에 많은 컴포넌트를 통해 데이터를 전달해야 할 때나 앱 내의 많은 컴포넌트가 동일한 정보를 필요로 할 때 props를 전달하는 것이 번거롭고 불편해집니다. Context는 부모 컴포넌트가 트리 하위의 모든 컴포넌트에게 명시적으로 props를 통해 전달하지 않고도 일부 정보를 사용할 수 있게 합니다. Props 전달의 문제 Props를 전달하는 것은 데이터를 사용하는 컴포넌트에 UI 트리를 명시적으로 연결하는 좋은 방법입니다. 그러나 트리를 깊게 전달해야 하거나 많은 컴포넌트가 같은 props가 필요한 경우, props 전달이 번거롭고 불편해질 수 있습니다. 가장 가까운 공통 조상은 데이터가 필요한 컴포넌트로부터 멀리 .. 2023. 7. 16. 이전 1 2 3 4 ··· 6 다음
