해당 글은 React API 공식문서를 참고하여 개인적으로 공부한 내용입니다.
... 문법 : Spread 문법이라고 한다. 이는 객체의 내용을 모두 "펼쳐서" 기존 객체응 복사해준다. -> 이런 작업을 "불변성을 지킨다"라고 말한다. 불변성을 지켜줘야만 리액트 컴포넌트에서 상태가 업데이트가 됐읆을 감지할 수 있고 이에 따라 필요한 리렌더링이 진행된다.
추가적으로 리액트에서는 불변성을 지켜주어야만 컴포넌트 업데이트 성능최적화를 제대로 할 수 있다. !!
useRef
[문법]
const refContainer = useRef(initialValue);useRef 는 useState와 달리 값의 상태에 따라서 변화를 인지하는 것이 아니라 어떤 이벤트가 발생할시, 참고하여 그 값을 가져오는 hook 이다.
props로 전달받기
부모 컴포넌트에서 isAlertPopId를 useRef로 true, false값을 받아 진행해봤는데 자식컴포넌트에 props로 전달했지만 값이 전달되지 못했던 문제가 발생했습니다. 이를 useState를 활용하니 바로 전달됬는데 어떤 점에서 차이가 발생했는지 궁금합니다.
질문 후 받은 답변>
ref 값 같은 경우에는 props로 전달이 기본적으로 안됩니다! ref값을 props로 전달하려면 forwardRef 라는 함수를 사용해야합니다! forwardRef에 대해서 좀 더 자세히 알아보려면 공식문서 확인해보시면 됩니다!
ref={props.inputRef}(부모에서 props로 넘길때 , ref라는 명칭으로 넘기면 안넘어간다. 아마 예약어인듯)
forwardRef
React.forwardRef는 전달받은 ref 어트리뷰트를 하부 트리 내의 다른 컴포넌트로 전달하는 React 컴포넌트를 생성합니다. 이 기법은 잘 사용되지 않지만, 아래의 두 시나리오에서는 특히 유용합니다.
- DOM 에 refs 전달하기
- 고차원 컴포넌트에서의 ref 전달하기
React.forwardRef는 렌더링에 사용될 함수를 인자로 받을 수 있습니다. React는 이 함수를 두 개 인자 props와 ref를 사용하여 호출하고, 이 함수는 React 노드를 반환
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;위의 예시에서 React는 <FancyButton ref={ref}> 엘리먼트에 주어진 ref를 React.forwardRef 호출시 렌더링 함수에 2번째 인자로 전달합니다. 이 렌더링 함수는 ref를 <button ref={ref}> 엘리먼트에 전달합니다.
따라서 React가 해당 ref를 붙이고 난 뒤, ref.current는 <button> DOM 엘리먼트 인스턴스를 직접 가리키게 됩니다.
