2025/12/11 2

React 리액트 - useRef() vs useState()

useRef() VS useState() useState(): 화면을 업데이트해야하는 '상태'를 저장하는 용도-> 상태가 바뀌면 화면이 다시 렌더링된다 VS useRef(): 리렌더링 없이 값을 저장하거나 DOM에 접근하는 용도-> 값이 바뀌어도 화면이 렌더링되지 않는다 - 값이 바뀌어도 화면을 바꾸고 싶지 않을 때 사용- useState()를 남발하면 불필요한 렌더가 계속 일어나기 때문에 성능이 저하된다-> useRef()가 훨씬 효율적이 될 수 있다 - checkBox처럼 화면과 무관한 값을 저장할 때 useRef()를 사용하기 좋다 Check 유효성 검사 사용자로부터 ID와 PW를 입력받아 전송유효성 검사를 통해 ID와 PW과 입력받지 않은 경우 경고창을 띄운다 import React fro..

Frontend/React 2025.12.11

React 리액트 - 레퍼런스(Ref)

useReference useRef란?: 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook- Ref는 reference, 즉 참조를 뜻한다- ref == DOM리액트는 돔을 지양하기 때문에 돔을 사용하는 것을 권장하지 않는다때문에 돔과 동일하게 쓸 수 있는 reference가 있다 Name - useState 사용 사용자가 입력창에 이름을 입력하고 버튼을 누르면'님' 존칭이 붙도록 함 import React, { useState } from 'react';const Name = () => { const [inputValue, setInputValue] = useState(""); const [name, setName] = useState(""); const [isSubmi..

Frontend/React 2025.12.11