본문 바로가기

Javascript/React

[React] useRef로 컴포넌트 안의 변수 만들기

728x90
반응형

 

 

예를 들어 컴포넌트 내부에 let 키워드를 사용하여 변수를 선언했을 다음 렌더링이 변수 값이 초기화 된다.

만약 유지하는 값을 관리하려면 useState 사용해야 하는데useState 상태를 바꾸게 되면 컴포넌트가 랜더링 된다.

 

하지만, 가끔 어떤 값을 바꿨을 굳이 리렌더링 필요 없는 값을 관리하는 경우도 있다.

이럴 useRef 사용하면 된다.

 

useRef 특정 DOM 선택해야할 사용하는데

이것 외에도 컴포넌트가 렌더링 때마다 계속 기억 되는 값을 관리할 때도 사용할 있다.

 

주로 setTimeout, setInterval 사용했을 주어지는 ID값을 기억해야 사용하고

외부 라이브러리를 사용하여 생성된 인스턴스를 담을 때도 사용하고, 스크롤 위치 등을 알고 있어야 등에 사용한다.

 

알아 두어야 것은 useRef 관리하는 값은 바뀌어도 컴포넌트가 렌더링 되지 않는 다는 이다.

 

바로 이전 챕터에서 작성한 UserList.js 파일을 활용하여 진행한다.

먼저 이전 챕터의 UserList() 안에 선언된 배열을 주석처리 한다.

function UserList({ users }) {
    // const users = [
    //     {
    //         id: 1,
    //         username : 'kwkim',
    //         email : 'hi@gmail.com'
    //     }, 
    //     {
    //         id: 2,
    //         username : 'tester', 
    //         email : 'tester@gmail.com'
    //     },
    //     {
    //         id: 3,
    //         username : 'developer',
    //         email : 'developer@gamil.com'
    //     }
    // ];
    return (  
        <div>
            {   
                // map을 사용하여 엘리먼트 형식으로 변환
                // map은 기존 배열의 내용을 통체로 변경할 때 사용한다.
                // 즉 해당 예시에서는 users라는 배열을 <User user={user} key={user.id}/> 라는 형식으로 변경해서 화면에 뿌려주는 것이다.
                users.map(
                    user => (<User user={user} key={user.id}/>)
                )
            }
        </div>
    )
}

 

app.js 이동하여 UserList.js 작성되었던 배열을 선언 아래 소스를 추가한다.

function App() {
  // 이전에 userList.js의 UserList() 안에 있던 배열을 여기서 선언한다.
  const users = [
    {
        id: 1,
        username : 'kwkim',
        email : 'hi@gmail.com'
    }, 
    {
        id: 2,
        username : 'tester', 
        email : 'tester@gmail.com'
    },
    {
        id: 3,
        username : 'developer',
        email : 'developer@gamil.com'
    }
];
// 해당 값은 컴포넌트가 리 렌더링 되어도 계속 기억된다.
const nextId = useRef(4);

// 새로운 항목을 추가할 때
const onCreate = () => {
  // nextId에 담아둔 4라는 값을 조회
  console.log(nextId.current) // 4
  // onCreate 함수가 실행될 때마다 기존 값에 1을 더해줌
  nextId.current += 1;
}
  return (
      <UserList users={users} />
   )
}

 

728x90
반응형