리액트

navigate도 많이 쓰고 여러가지 쓰는데 부모 컴포넌트에서 자식 컴포넌트에 값 전달하는 방법도 있을 것 같아, 찾아보다가 정리하게 되었다.props의 개념상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 수단.하위 컴포넌트에서 상위 컴포넌트가 전해준 값에 접근을 할 수 있게 한다.하위 컴포넌트에서 상위 컴포넌트로 값을 전달할 수 없다.props의 사용1. 상위 컴포넌트에서 하위 컴포넌트로 값 전달1) 상위 컴포넌트(부모 컴포넌트)function 함수=()=>{ const [변수, set변수] = useState('')}const 상위페이지이름 =()=>{ }2) 하위 컴포넌트(자식 컴포넌트)전달 받은 값 : {props.value}값이 전달되는 방식상위 컴포넌트에서 넘겨주고자 하는 값을 선언한다. ..

1. 성능 향상을 위한 Memoization React.memo와 useCallback(), useMemo의 개념을 이해하기 위해서는 Memoization의 정의를 알아야 한다. 정의는 다음과 같다. 결과를 캐싱하고, 다음 작업에서 캐싱한 것을 재사용 하는 비싼 작업의 속도를 높이는 자바스크립트 기술 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거해 빠른 처리를 가능하게 하는 기술 캐시에 초기 작업 결과를 저장하여 사용함으로 써 최적화 할 수 있다. 만약 작업을 다시 수행해야 한다면, 어딘가에 저장되어진 동일한 결과를 단순히 반환 해준다. 💡 메모이제이션(Memoization) 자주 사용되는 값을 받아오기 위해 반복적으로 계산을 해야 하는 상황에서, 특정 값을 캐싱하는 것을 말한다. 해당 값이 또 ..

개념 배칭(batching)은 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어서 한번의 리렌더링에 업데이트가 모두 진행될 수 있게 해주는 것을 의미한다. 한 함수 안에서 setState(업데이트)를 아무리 많이 호출시키더라도 리렌더링은 단 한번만 발생한다. 나오게 된 배경 이전부터 리랜더링과 관련해서 react-17v에서 이벤트 핸들러 내부에서 발생하는 상태 업데이트만 배치처리를 지원했다. 하지만 이벤트 핸들러 내부에 fetch()등 과 같은 콜백을 받아 처리하는 메소드가 존재할 경우 내부의 콜백이 모두 완료된 후에는 Automatic Batching이 처리되지 않았다. 그리고 react-17v에서 업데이트가 동기적으로 일어나지 않았다. 이전 버전과 최신 버전의 비교 1) React-17v impo..