React 개념모음

🎈컴포넌트 최적화하기

📌React.memo

고체 컴포넌트
Prop Check를 통해 변화가 있는지를 체크하여 렌더링을 결정하여 재사용한다.
오직 Props 변화에만 의존하는 최적화 방법입니다.
너무 무분별하게사용하면 메모리를 너무 많이 사용할수가 있다.

1) 컴포넌트가 같은 Props로 자주 렌더링 될때
2) 컴포넌트가 렌더링이 될떄마다 복잡한 로직을 처리해야될때

useState UseReducer useContext에서는 상태와 관련되면 다시 랜더링됨.
useMemo / useCallback

📌React.Fragment <></>

엘리먼트들은 반드시 단 하나의 최상위 태그로 묶여있어야한다.
key props밖에 받지를 못한다.
걍 의미없는 div가 많아지면 dom구조에문제가 될수 있어 React.Fragmen를 사용한다.
제일 유용하게 사용될때는 css, 테이블구조,배열 에서 사용할때 div는 안되니깐

📌List,key의 중요성

list를 반환할때 props에 key를 넣어주어야 함
안그러면 어떤게 바꼇는지 몰라서 전부다 바꿔주엇는데,key값을 주면서 해당 항목만 변경 됨.
index값을 key로 주는건 지양해야함 동적인 항목은 안정적인 key값을 넣어줘야함
만약에 중복된 key를 넣어야 하면 길이에 1 더하고 아이디를 문자열로 만든다.

📌ForwardRef

부모컴포넌트로부터 자녀컴포넌트가 Ref를 전달받을수 있다.
하지만 ForwardRef를 사용해서 자녀 컴포넌트에 접근한다는 것은 캡슐화에 대한 장점을 없애버릴수있다.
그래서 focus, 애니메이션 관리할때 외에는 사용하지않는게 좋을것 같다.

//16.3버전이후부터 가능하다.
const testInput = (props,ref)=> {
	return <input ref={ref} />;
});
export default forwardRef(testInput);

////16.3버전이전이지만 권장하지않아
const testInput = ({inputRef})=> {
	return <input ref={inputRef} />;
});
export default testInput;