useRef 와 React Hooks

useRef

새로운 Reference 객체를 생성하는 기능

const refObject = useRef()

• 리액트에서 컴포넌트가 리렌더링될 때마다 초기화되지 않고 값을 계속 유지하고 싶을 때 사용
• 또는 DOM 요소에 직접 접근할 때 사용

useRef 와 useState 의 차이

useRef 로 관리하는 값이 변경되어도 컴포넌트가 리렌더링 되지 않는다. 그래서 화면에 반영이 필요한 값은 보통 useState로, 그렇지 않으면 useRef 로 관리한다.

 

▶️ 즉, useRef 는 리렌더링과 무관하게 값을 기억하거나, 화면 요소에 직접 접근해야 할 때 매우 유용하다. 

const inputRef = useRef();
const onSubmit = () => {
	if(input.name===""){
    	// 이름을 입력하는 DOM  요소 포커스
        inputRef.current.focus();
    }
}
...
return (
	<input
    	ref={inputRef}
        name="name"
        value={input.name}
        onChange={onChange}
        placeholder={"이름"}
    />
);

 

React Hooks

Hooks 이전에는 State 나 생명주기 기능을 클래스 컴포넌트에서만 쓸 수 있었다. Hooks 덕분에 함수 컴포넌트에서도 강력한 React 기능들을 자유롭게 사용할 수 있게 되었다.

// 3가지 hook 관련된 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
// 2. 조건부로 호출될 수는 없다.
// 3. 나만의 훅(Custom Hook) 을 직접 만들 수 있다. 

function useInput() { // 커스텀 훅
    const [input,setInput]=useState("");
    
    const onChange = (e) => {
    	setInput(e.target.value);
    }
    
    return [input,onChange];
}

const HookExam = () =>{
    const [input, onChange]=useInput();
    
    return (
    	<div>
        	<input value={input} onChange={onChange} />
        </div>	
    );
}

export default HookExam;

• 컴포넌트마다 반복되어서 동작하는 로직이 있고
• 해당 로직이 useState 와 같은 hook 을 사용하는 로직이라면

▶️ 커스텀 훅을 만들어서 분리해줄 수 있다.

▶️ 이러한 커스텀 훅은 보통 컴포넌트와 같은 파일에 두지는 않고, src 디렉토리 아래 Hooks 라는 별도의 폴더를 만들어서 hook 의 이름으로 보관하는 것이 일반적이다. 

---

출처

 

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지