useInput 사용한걸로 저번 포스팅에 대한 예제를 하려고 하니 Key 문제가 걸려버린다...

React 공식문서에 따르면

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
Key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 방법이다. 대부분의 경우 데이터의 ID를 key로 사용한다. 하지만 안정적인 ID가 없다면 최후의 수단으로 index를 사용한다.

하지만 항목의 순서가 바뀔 수 있는 경우 key에 인덱스사용을 공식문서에서는 권장하지 않는다. 이로인해 성능이 저하되거나 state와 관련된 문제가 발생할 수 있다.

그러니까

Key를 사용하는 이유는 ?

• 배열의 어떤 항목을 추가, 변경, 삭제할 때 식별할 수 있도록 하기 위해 사용.
• 그말은 삭제, 추가 할 때 key를 사용해서 처리
• 대부분 Array 처리 -> 삭제 (Array.filter(callBack)) / 추가(Array.map(callback(...spread operator,추가할 항목))

Key로 컴포넌트 추출하기

키는 배열의 context에서만 의미가 있다.

//App.js
export default function App(){
	return(
   <> {Book} </>
   )
}

//Book.jsx
import BookItems from "./BookItems"
export default function Book(){
 const bookData= [
   {id:0,title:'Human',price:'$100',author:"John"},
   {id:1,title:'Ant',price:'$130',author:"Bernard"},
 ]
 return (
   <>
     {
       bookData.map(item => <BookItems key={item.id} item={item} />)
     }
   </>
 )
}

//BookItems.jsx
const BookItems = ({item}) => {
 const {title,author,price}= item;
 return (
   <div>
     <p>title : {title} </p>
     <p>Author: {author} </p>
     <p>Price: {price} </p>
   </div>
 )
}
export default BookItems;

예를 들어 BookItems 컴포넌트를 추출 한 경우 BookItems 안에 있는 <P> 엘리먼트가 아니라 배열의 엘리먼트가 key를 가져야 한다.또한 Key는 형제사이에서만 고유한 값이어야 한다. 두개의 서로 다른배열을 만들어 같은 Key값을 사용할 수 있다.

//Book.jsx
import BookItems from "./BookItems"
const Authors= ({author}) => {
return(
  <>
  <p>author : {author} </p>
  </>
)
}
export default function Book(){
const bookData= [
  {id:0,title:'Human',price:'$100',author:"John"},
  {id:1,title:'Ant',price:'$130',author:"Bernard"},
]
return (
  <>
    {
      bookData.map(item => <BookItems key={item.id} item={item} />)
    }
  <h2>Authors</h2>

    {
      bookData.map(item => <Authors key={item.id} author={item.author} />)
    }
  </>
)
}

고유의 string ID가 있다면 ID를 써서 key 값을 대체할 수 있지만, 고유의 ID가 없다면 index를 key값으로 써야하는데, 그럴경우 class형 컴포넌트에서는 변수를지정해 사용했다.

하지만 그렇게 사용할 경우, class형과 다르게 함수 컴포넌트일때는 랜더링 될때마다 함수를 다시 실행하기 때문에 n값이 랜더링 될때마다 초기화가 된다.

그래서 사람들이 useRef를 사용해 Key값을 관리하기 시작했다.

하지만 나는 useRef가 정확히 뭔지 모른다. 그래서 공부할꺼다.

중점적으로

• useRef 란?
• key값으로 사용하는 useRef / 사용이유
• 이벤트를 걸때 사용하는 useRef

useRef란?

useRef란 특정 DOM을 선택할 수 있게 도와주는 Hook 함수이다. useRef를 사용하는 이유는 useRef()는 리랜더링을 일으키지 않기 때문에 리렌더링 여부와 상관없이 같은 값을 유지한다. useRef()를 담은 값을 가져올때에는 변수.current로 접근해야 한다. 그 자체에 대입하면 안되고 항상 current 속성을 사용해 접근해야 한다.
(DOM 자체 엘리먼트에 접근 할 때)

useRef를 사용해야 할 때

공식문서에 따른 바람직한 사례는

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 실행시킬 때
• DOM 라이브러리를 React와 같이 사용할 때

같은 맥락에서 블로거에 따른 선배코더들의 코멘트

• 컴포넌트에 focus를 위치시킬 필요가 있는 경우
• 속성값을 초기화할 필요가 있는 경우
• useRef로 컴포넌트 안의 변수 관리할 경우

문서상으로 제대로 이해가 가지 않는 경우 예제를 보면서 감 잡아보깅!!

포커스, 테스트 선택영역, 미디어 관리할 때

const UseRefTest= () => {
  const here = useRef();  
  const onFocus= () => {
    here.current.focus()
    //here.current =  <inputtype="text" />
  }
  
  return (
    <>
      <input ref={here} type="text" />
      { " "}
      <button onClick={onFocus}>Click</button>
    </>
  );
};
export default UseRefTest;
//

다음편 계속 ! useRef사용해서 돔에 직접 접근해 애니메이션 실행시키기!