728x90 728x90 Frontend54 React forwardRefs와 useImperativeHandle React forwardRefs와 useImperativeHandle 어떤 state를 전달해서 그 컴포넌트에서 무언가를 변경하는 방식이 아니라 자식 컴포넌트 내부에서 함수를 호출하는 방식으로 부모 컴포넌트와 자식 컴포넌트가 상호작용할 수 있다. 일반적인 리액트 패턴이 아니기때문에 자주 사용되지않고 자주 사용해서도 안되지만 도움이 될 때도 있다. 특히 포커스나 스크롤링같은 사례에서는매우 유용할 수 있다. 로그인 폼에서 유효하지 않은 input을 포커스하고 싶을 때 일반 input이라면 useRef를 사용하고 focus 메소드를 호출하면 된다. const emailInputRef = useRef(); const passwordInputRef = useRef(); const submitHandler = (e.. 2023. 1. 28. React useReducer 개념 및 사용 방법 React useReducer 개념 및 사용 방법 useReducer 개념 useReducer는 state 관리를 도와주는 hook으로 useState와 약간 비슷하다. 하지만 더 많은 기능이 있고 더 복잡한 state에 특히 유용하다. 예를 들어 여러 state들이 함께 속해 있는 경우, 여러 state가 같이 바뀌거나 서로 관련된 경우useState에서 얻은 state는 종종 사용 및 관리가 어려워지거나 오류가 발생하기 쉽다. 이런 더 강력한 state 관리가 필요한 경우 useReducer를 useState 대신 쓸 수 있다. 하지만 그렇다고 해서 항상 useReducer를 사용해야 한다는 건 아니며 더 강력하다고 해서 항상 더 좋다고 할 수는 없다. 사용하기 조금 더 복잡하기 때문에 조금 더 설정.. 2023. 1. 25. React Side Effects와 useEffect React Side Effects와 useEffect Side Effects란 리액트 앱의 컴포넌트의 주요 역할은 UI를 렌더링하는 것이다. state나 event, 그 모든 것의 주요 역할은 화면에 무언가를 가져오는 것이었다. 예를 들어 버튼이 클릭 되거나 어떤 텍스트가 입력되는 특정 이벤트에 따라 따라서 화면에 보이는 것은 변경될 수 있고 이것이 리액트가 애플리케이션에서 주로 하는 일이다. 사이드이펙트는 애플리케이션에서 일어나는 다른 모든 것을 뜻한다. 예를 들면 http request, local storage에 저장, timer설정 등 이것 들은 모두 애플리케이션에서 고려해야 하는작업이지만 화면에 무언가를 가져오는 것과는 관련이 없다. 그것은 리액트가 신경써야할 것이 아니고 그런 일을 하려고 리액.. 2023. 1. 24. React useRef 개념 및 사용법 React useRef 개념 및 사용법 ref는 참조를 뜻하며 리액트에서는 참조(reference)를 줄여 ref라고 부른다. 가장 기본적인 기능은 다른 DOM 요소에 접근해서 그것들로 작업할 수 있게 해주는 것이다. return ( username age Add User ); 이 코드의 input 에서는 사용자가 입력한 내용을 관리한다. 매번 키를 누를 때마다 state가 업데이트되고 그 state를 인풋에 다시 넘겨준다. 그리고 그 state를 사용하여 인풋을 재설정하고 데이터가 필요한 곳으로 보내기도 한다. 이렇게 관리해도 좋지만 폼을 제출할 때만 필요한데도 키를 입력할 때마다 state를 업데이트한다는 건 약간 과하다. 이 경우 ref를 사용할 수 있다. import {useRef} from "r.. 2023. 1. 22. 이전 1 ··· 9 10 11 12 13 14 다음 728x90 728x90
