개발/React2 React Hook - useCallback 사용법 리액트의 렌더링 성능을 위해 제공되는 훅이다. 훅을 사용하면서 컴포넌트가 렌더링 될때마다 함수를 생성해서 자식 컴포넌트의 속성으로 넘겨주게 된다. function App() { const [name, setName] = useState(''); const onSave = () => {}; return ( setName(e.target.value)} /> ); } name이 변경되어 렌더링을 하게될때 onSave 함수가 새로 만들어지고 Profile 속성으로 새로운 함수를 넣어주고 있다. Profile 컴포넌트에서 React.memo를 사용해도 이전 onSave 와 이후 onSave 가 매번 다르게 되어 매번 렌더링이 된다. Profile 재 렌더링을 방지하기위해 useCallback 을 사용한다. use.. 2022. 6. 26. React Hook - useRef 사용법 함수형 컴포넌트에서 돔 요소 접근하기 useRef function App() { const inputRef = useRef(null); const onClickInputFocus = () => { inputRef.current.focus(); }; return ( input 포커스 하기 ); } inputRef 변수를 input ref props 로 지정한다. 이제 inputRef 변수로 input 에 접근 가능하게 되었다. 주의 할점은 inputRef로 접근하는것이 아니라 inputRef.current로 접근해야 한다.버튼을 클릭하면 input에 포커스가 된다. 이게 끝이다.. 랜더링과 무관한 값 저장하기 기본적으로 리액트에서 화면을 랜더링 하려면 변화되는 값을 state로 지정하고 state가 업데이.. 2022. 6. 25. 이전 1 다음 반응형