Udemy React 강의 134번 정리
React에는 UI를 구성하는 두 개의 중요한 값이 있다.
- state : UI를 업데이트하기 위한 값
- ref : DOM 요소 또는 저장하고 싶은 값을 직접 참조하기 위한 값
둘은 "언제 사용하는가"와 "리렌더링이 발생하는가"에서 큰 차이를 가진다.
이번 글에서는 왜 ref만으로 UI를 업데이트할 수 없는지, state와 ref의 정확한 역할 차이를 살펴본다.
1. 왜 ref 값만 사용해서 UI를 업데이트하면 안 될까?
아래 코드가 왜 안 되는지부터 보자.
<p>{playerName.current.value}</p>첫 번째 렌더에서 에러가 발생한다. → ref.current가 undefined
처음 컴포넌트가 렌더될 때는 아직 <input ref={playerName}>와 연결되기 전이다. → 따라서 playerName.current === undefined
그래서 첫 렌더 때 "Cannot read property 'value' of undefined" 같은 오류가 난다.
2. 해결처럼 보이는 코드도 결국 안 됨
강의에서 소개된 우회 코드 :
<p>{playerName.current ? playerName.current.value : "Unknown entity"}</p>이렇게 하면 에러는 사라지지만, 버튼을 클릭해도 UI가 업데이트되지 않는다.
왜일까?
3. 핵심 차이 : ref는 변경되어도 리렌더링을 발생시키지 않음
이게 state와 ref의 가장 중요한 차이다.
| 구분 | ref | state |
|---|---|---|
| 값이 변해도 UI가 리렌더링 되나? | ❌ 리렌더링 안 됨 | ⭕️ 리렌더링 됨 |
| DOM 요소 접근 용도 | ⭕️ | ❌ |
| 값이 자주 바뀌지만 UI에 반영할 필요 없을 때? | ⭕️ 매우 효율적 | ❌ 매번 리렌더링 됨 |
| UI 업데이트 필요할 때? | ❌ 사용하면 안 됨 | ⭕️ 필수 |
React는 state가 변경될 때만 컴포넌트가 다시 실행된다.
ref는 아무리 바뀌어도 컴포넌트를 다시 실행하지 않는다.
그래서 ref만으로는 UI가 업데이트 될 수 없다.
4. 왜 state가 필요한가?
state는 UI와 1:1로 연결되어 있기 때문에
- 값이 바뀐다 → 컴포넌트 재실행 → UI 업데이트
즉, UI에 즉시 반영되어야 하는 값은 반드시 state로 관리해야 한다.
반면 ref는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다. 따라서 UI에 반영되지 않는다.
❗️ ref는 DOM에 접근하거나 렌더링과 무관한 값 저장용일 뿐, UI를 업데이트하려면 무조건 state를 사용해야 한다.
5. ref와 state는 서로 대체 관계가 아님!
React에서 두 값은 목적 자체가 다르다.
state를 써야 하는 경우
- 화면에 값이 보여야 할 때
- 값이 바뀌면 UI도 바뀌어야 할 때
- 입력값을 실시간으로 화면에 반영해야 할 때
ref를 써야 하는 경우
- DOM 요소에 직접 접근해야 할 때
- 입력값을 나중에 한 번에 가져올 때
- 값이 변경되어도 UI 업데이트가 필요 없는 경우
- 리렌더링을 피하고 싶을 때
