react12 React useMemo로 연산을 최적화하자 https://ko.legacy.reactjs.org/docs/hooks-reference.html#usememo Hooks API Reference – React A JavaScript library for building user interfaces ko.legacy.reactjs.org useMemo는 리액트에서 제공하는 Hook 중 하나로, 연산 비용이 큰 함수의 반환값을 메모이제이션 (결과를 기억했다가 같은 입력에 대해서 기억한 결과를 바로 반환)함으로써 프로젝트의 성능 최적화를 도와줍니다. 주의할 점은 useMemo를 남용하면 오히려 사용하지 않는 것보다 성능이 저하될 수 있습니다. 메모이제이션 자체도 메모리를 소비하고, 관리하는데 드는 비용이 있기 때문입니다. 그렇기 때문에 useMemo는 .. 2023. 6. 28. getSnapshotBeforeUpdate: 리액트 랜더링 전의 스냅샷 활용하기 getSnapshotBeforeUpdate 은 리액트 v16.3 이후 만들어진 메서드입니다. 다음 랜더링에서 이전 DOM 상태에 관련 정보를 가져오는데 사용됩니다. 이 메서드에서 반환하는 값은 componentDidUpdate에서 세 번째 파라미터인 snapshot 값으로 전달받을 수 있습니다. 주로 스크롤바 위치를 유지하는 등 업데이트 하기 직전의 값을 참고할 일이 있을때 활용합니다. 예를 들어, 사용자가 웹 페이지의 특정 위치를 스크롤하고 있는데 새로운 데이터가 추가되어 랜더링이 발생하는 경우, getSnapshotBeforeUpdate를 사용하여 원래 스크롤 위치를 기억하고, 랜더링 후에 해당 위치로 다시 스크롤할 수 있습니다. class MyComponent extends React.Compone.. 2023. 6. 27. 리액트 여러 Input 상태 관리하기: 한 번에 관리 vs 각각 관리 React에서 여러 input 필드를 다루려면, 각 필드를 상태 변수에 연결하고, 공통의 이벤트 핸들러를 사용할 수 있습니다. 아래는 함수형 컴포넌트에서 useState를 사용해서 여러 input 필드를 관리하는 방법입니다. import React, { useState } from 'react'; const MyForm = () => { const [form, setForm] = useState({ name: '', age: '', email: '', }); const handleChange = (e) => { setForm({ ...form, [e.target.name]: e.target.value, }); }; const handleSubmit = (e) => { e.preventDefault(); .. 2023. 6. 26. React에서 PropTypes로 Props 검증하기 React PropTypes 소개 https://ko.legacy.reactjs.org/docs/typechecking-with-proptypes.html PropTypes와 함께 하는 타입 검사 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org PropTypes를 통해 props 검증을 하는 것은 다음과 같은 이점들이 있습니다. - 오류 예방 - 코드 가독성 향상 - 개발 생산성 향상 - 유지보수 용이성 증대 작업하는 프로젝트가 TypeScript를 쓰지않는 JavaScript 프로젝트라면 PropTypes를 사용함으로써 TypeScript의 역할을 대체할 수 있습니다. PropTypes 설치 1. React .. 2023. 6. 25. 이전 1 2 3 다음 LIST
