Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Spring
- Java
- dbeaver
- wildfly
- JPA
- gradle
- NCP
- Windows
- JavaScript
- tibero
- kubectl
- gson
- database
- BPMN
- nginx
- intellijIDEA
- VSCode
- react
- Git
- springboot
- nodejs
- IntelliJ
- jetbrains
- docker
- useEffect
- log4j2
- Kubernetes
- LOG4J
- MySQL
- mybatis
Archives
- Today
- Total
두 손끝의 창조자
React에서 하위 컴포넌트 메소드 호출하기: React.forwardRef와 useImperativeHandle 활용 본문
react
React에서 하위 컴포넌트 메소드 호출하기: React.forwardRef와 useImperativeHandle 활용
codinglog 2023. 9. 22. 13:04리액트 컴포넌트는 상위 컴포넌트에서 넘겨준 props로 데이터를 받아 로직을 처리하는 형태가 대부분이다.
상위 컴포넌트의 매소드를 호출하려면 props로 넘겨받은 함수 변수를 실행해서 호출한다.
만약, 그 반대의 경우가 필요하다면?
즉, 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하고자 할 때는 어떻게 할까?
React.forwardRef
와 useImperativeHanlde
을 이용하여 구현한다.
하위 컴포턴트
실행할 로직을 구현하고 ref
를 노출한다.
const Input = React.forwardRef((props, ref) => {
const somethingToDo = () => {
console.log('Do Something');
}
useImperativeHandle(ref, () => {
return {
doIt : somethingToDo,
}
});
return (<div></div>)
});
상위 컴포넌트
하위 컴포넌트에 ref
속성을 정의해서 메소드를 호출한다.
const Main = () => {
const myInputRef = useRef();
const clickHandler ()=>{
myInputRef.current.doIt();
}
return(
<Input ref={myInputRef} onClick={clickHandler}></Input>
);
}
주의점
refs(레퍼런스)는 필요한 경우에만 사용해야 한다. 즉, refs는 props로 표현할 수 없는 명령적인 동작에만 사용한다. 예를 들어 노드로 스크롤하기, 노드에 포커스 주기, 애니메이션 트리거, 텍스트 선택 등과 같은 동작에 대해서만 refs를 사용해야 한다.
반응형
Comments