리액션을 이해하고 싶은 리프.
이른바 Ref
기본적인 리프에 관한 말과useRef를 사용한 말의 두 단락으로 구성되어 있습니다.우선 기본적인 화제부터 시작하자.
공식 문서를 읽어 보세요.
기본적으로 Ref에 너무 의존하지 마십시오.
구성 부분에 모/자 관계가 있는 경우 기본적으로 서브어셈블리의 세부 내용은 숨겨지지만 Ref를 사용하면 부모가 아이의 세부 사항 = 종속성이 생겼기 때문입니다.
Ref의 개요는 다음과 같습니다.
구체적인 사용 예는 다음과 같은 내용을 소개했다.
업무 중에도 초점과 관련된 기능을 구현할 때 활용한 기억이 있다.공식 문서에서도 input의 초점을 소개했다.
그럼 실제 운행해 봅시다.
시용하다
여기서 Vite 제작 프로젝트를 사용하려면 당신이 좋아하는 방법대로 React가 작업하는 환경을 만드세요.
yarn create vite learn-ref --template react-ts
cd learn-ref
yarn
yarn dev
그럼
App.tsx를 다음 내용으로 고쳐 쓰세요.App.tsx
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return (
<div ref={this.myRef}>
<button
onClick={() => {
console.log(this.myRef);
}}
>
button
</button>
</div>
);
}
}
export default App;
Object { current: div }
HTML 요소에 ref 속성을 사용하는 경우 ReactcreateRef()를 사용하여 구조기에서 제작한ref는current 속성 수용을 바탕으로 하는 DOM 요소이다
https://ja.reactjs.org/docs/refs-and-the-dom.html#accessing-refs
이쪽 행동이죠?
맞춤형 구성 요소에 대한 행동도 살펴봅시다.
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.customRef = React.createRef();
}
render() {
return (
<div>
<button
onClick={() => {
console.log(this.customRef);
}}
>
button
</button>
<CustomComponent ref={this.customRef} />
</div>
);
}
}
class CustomComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return <p>this is custom component</p>;
}
}
export default App;
CustomComponent의 대상을 나타낸다.예를 본받다.
ref 속성이 사용자 정의 클래스 구성 요소에서 사용될 때,ref 대상은 구성 요소가 마운트된 실례를current로 받아들인다
https://ja.reactjs.org/docs/refs-and-the-dom.html#accessing-refs
이쪽 행동을 확인할 수 있을 거예요.
그럼, 덤이 얻을 수 있다는 걸 알았으니 조작을 더해 보자.
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return (
<div>
<button
onClick={() => {
this.myRef.current.focus();
}}
>
focus
</button>
<button
onClick={() => {
this.myRef.current.blur();
}}
>
blur
</button>
<button
onClick={() => {
this.myRef.current.value = "filled";
}}
>
fill
</button>
<input type="text" ref={this.myRef} />
</div>
);
}
}
export default App;
레프의 기본이 이거야?다음은 함수 구성 요소에서 Ref의 활용을 보고 싶습니다.
useRef / useImperativeHandle
createRef는 클래스 구성 요소로만 처리할 수 있습니다.함수 구성 요소
useRef에서 사용합니다.방금 전의 예를 함수 구성 요소로 바꾸면 이렇게 됩니다.
import React, { useRef } from "react";
const App = () => {
const ref = useRef();
return (
<div>
<button
onClick={() => {
ref.current.focus();
}}
>
focus
</button>
<button
onClick={() => {
ref.current.blur();
}}
>
blur
</button>
<button
onClick={() => {
ref.current.value = "filled";
}}
>
fill
</button>
<input type="text" ref={ref} />
</div>
);
};
export default App;
재작성 가능 값 유지
본질적으로 useRef는 바꿀 수 있는 값을 가리킨다.current 속성 내에 저장할 수 있는 유사한 상자
https://ja.reactjs.org/docs/hooks-reference.html#useref
실용성이 있는지 없는지는 미묘하지만 모든 구성 요소가 ID를 갖고 싶어 하는 상황을 고려해 보자.
아무 생각 없이 이렇게 써.
import React, { useState, useRef } from "react";
const App = () => {
const [state, setstate] = useState("");
return (
<div>
<input
type="text"
value={state}
onInput={(e) => setstate(e.target.value)}
/>
<ChildComponent />
</div>
);
};
const ChildComponent = () => {
const id = new Date().getTime();
return (
<div>
<p>{id}</p>
</div>
);
};
export default App;
useRef를 사용하여 개선하면 이렇게 됩니다.
const ChildComponent = () => {
const id = useRef(new Date().getTime());
return (
<div>
<p>{id.current}</p>
</div>
);
};
https://ja.reactjs.org/docs/hooks-reference.html#useref
위에서 설명한 대로 처음 생성된 객체와 동일한 객체를 반환할 수 있으므로 다시 그려도 ID가 변경되지 않습니다.
주석에서 말한 바와 같이 아래의 실시 방식은 id대입 대상이 그릴 때마다 생성되기 때문에 안 된다는 것이다.
const ChildComponent = () => {
const id = {
current: new Date().getTime(),
};
return (
<div>
<p>{id.current}</p>
</div>
);
};
부모의 기분을 상하게 하다
input에 대한 동작의 예에서 같은 구성 요소에 대상이 있기 때문에 보통 사용하지만, 하위 구성 요소 내의 구성 요소를 대상으로 하는 상황을 살펴봅시다.
이 경우 forwardRef가 필요합니다.
import React, { useState, useRef, forwardRef } from "react";
const App = () => {
const ref = useRef();
return (
<div>
<button
onClick={() => {
console.log(ref.current.value);
}}
>
fill
</button>
<ChildComponent ref={ref} />
</div>
);
};
const ChildComponent = forwardRef((props, ref) => {
return (
<div>
<input type="text" ref={ref} />
</div>
);
});
export default App;
부모에게 서브어셈블리 정의 컨텐트를 공유할 수도 있습니다.useImperative Handle이라는 물건을 사용하세요.
차일드 측에서 부모에게서 호출할 수 있는 자신에게 초점을 맞추는 함수를 정의합니다.
import React, { useRef, forwardRef, useImperativeHandle } from "react";
const App = () => {
const ref = useRef();
return (
<div>
<button
onClick={() => {
ref.current.focus();
}}
>
focus
</button>
<ChildComponent ref={ref} />
</div>
);
};
const ChildComponent = forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
},
}));
return (
<div>
<input type="text" ref={inputRef} />
</div>
);
});
export default App;
일반적으로 프로퍼스에 공을 들이고 새롭게 디자인함으로써 "Ref를 사용하지 않으면 실현할 수 없다!"추천하지 않는 경우도 있지만 긴급한 순간의 수단으로 기억하는 것이 좋다.
Reference
이 문제에 관하여(리액션을 이해하고 싶은 리프.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/yubachiri/articles/7a11545d8d7ae6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
