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 |
Tags
- wildfly
- intellijIDEA
- IntelliJ
- nginx
- Git
- tibero
- gson
- react
- JPA
- Windows
- docker
- BPMN
- gradle
- dbeaver
- Spring
- MySQL
- useEffect
- NCP
- Kubernetes
- LOG4J
- database
- mybatis
- VSCode
- nodejs
- springboot
- Java
- maven
- jetbrains
- log4j2
- JavaScript
Archives
- Today
- Total
목록useImperativeHandle (1)
두 손끝의 창조자
React에서 하위 컴포넌트 메소드 호출하기: React.forwardRef와 useImperativeHandle 활용
리액트 컴포넌트는 상위 컴포넌트에서 넘겨준 props로 데이터를 받아 로직을 처리하는 형태가 대부분이다. 상위 컴포넌트의 매소드를 호출하려면 props로 넘겨받은 함수 변수를 실행해서 호출한다. 만약, 그 반대의 경우가 필요하다면? 즉, 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하고자 할 때는 어떻게 할까? React.forwardRef와 useImperativeHanlde을 이용하여 구현한다. 하위 컴포턴트 실행할 로직을 구현하고 ref를 노출한다. const Input = React.forwardRef((props, ref) => { const somethingToDo = () => { console.log('Do Something'); } useImperativeHandle(re..
react
2023. 9. 22. 13:04