앞서 useState와 useRef의 차이점을 알아보면서, useRef는 렌더링을 발생시키지 않기 때문에 성능상의 이점을 고려해 useState 대신 useRef를 사용하는 경우가 있었다. 하지만 이를 실무에 적용할 때는 단순히 성능 이슈만으로 판단하기 보다는 해당 입력 값이 UI와 어떻게 상호작용해야 하는지를 고려해야 한다. useRef는 값이 변경되더라도 리렌더링을 발생시키지 않으므로, 폼에서 많은 입력 필드를 동시에 다루거나, 자주 업데이트해야 하는 값이 있을 때 성능을 개선할 수 있다. 그러나 리렌더링이 발생하지 않는다는 점은 한편으로 UI 업데이트가 필요할 때는 단점으로 작용할 수 있다. 예를 들어, 사용자가 입력한 값에 따라 실시간으로 UI가 변화해야 하거나, 입력 필드의 유효성을 즉각적으로 ..
React를 사용해 프로젝트를 진행하다 보면, 사용자의 입력을 받아 UI에 반영하는 작업이 필수적이다. 특히 폼(form) 요소와 같이 input 필드의 값을 어떻게 관리할지에 대한 고민을 자주 하게 된다. 이때 주로 사용하는 두 가지 Hook이 바로 useState와 useRef이다. 두 Hook은 상태를 관리하는 방식과 리렌더링에 대한 차이점이 있기 때문에 상황에 따라 적절히 선택해야 한다.리액트를 처음 시작하는 사람들은 useState로 모든 값을 관리하려는 경향이 있지만, 경우에 따라서는 useRef가 더 적합한 선택일 수 있다. 이번 포스팅에서는 useState와 useRef의 차이점과 각 훅을 언제 사용하는 것이 더 효율적인지에 대해 알아보고, 특정 상황에서 어떤 기준으로 선택할지에 대해 다뤄..
Front-End/React JS 2024. 9. 22. 18:20
앞서 useState와 useRef의 차이점을 알아보면서, useRef는 렌더링을 발생시키지 않기 때문에 성능상의 이점을 고려해 useState 대신 useRef를 사용하는 경우가 있었다. 하지만 이를 실무에 적용할 때는 단순히 성능 이슈만으로 판단하기 보다는 해당 입력 값이 UI와 어떻게 상호작용해야 하는지를 고려해야 한다. useRef는 값이 변경되더라도 리렌더링을 발생시키지 않으므로, 폼에서 많은 입력 필드를 동시에 다루거나, 자주 업데이트해야 하는 값이 있을 때 성능을 개선할 수 있다. 그러나 리렌더링이 발생하지 않는다는 점은 한편으로 UI 업데이트가 필요할 때는 단점으로 작용할 수 있다. 예를 들어, 사용자가 입력한 값에 따라 실시간으로 UI가 변화해야 하거나, 입력 필드의 유효성을 즉각적으로 ..
ASAC/Front-End 2024. 9. 18. 17:37
React를 사용해 프로젝트를 진행하다 보면, 사용자의 입력을 받아 UI에 반영하는 작업이 필수적이다. 특히 폼(form) 요소와 같이 input 필드의 값을 어떻게 관리할지에 대한 고민을 자주 하게 된다. 이때 주로 사용하는 두 가지 Hook이 바로 useState와 useRef이다. 두 Hook은 상태를 관리하는 방식과 리렌더링에 대한 차이점이 있기 때문에 상황에 따라 적절히 선택해야 한다.리액트를 처음 시작하는 사람들은 useState로 모든 값을 관리하려는 경향이 있지만, 경우에 따라서는 useRef가 더 적합한 선택일 수 있다. 이번 포스팅에서는 useState와 useRef의 차이점과 각 훅을 언제 사용하는 것이 더 효율적인지에 대해 알아보고, 특정 상황에서 어떤 기준으로 선택할지에 대해 다뤄..