id와 ref
HTML 에서 특정 DOM 요소에 ID를 달아서 식별하는것처럼 리액트의 JSX 에도 같은 기능이 있습니다. 바로 ref 인데요, 그럼 JSX 내에서 id를 사용할 수 없냐? 그렇지 않습니다. 하지만 권장하지 않습니다.
ref 컴포넌트 내부에서만 참조가 가능합니다.
id 전역에서 참조가 가능합니다.
id는 여러 컴포넌트에서 중복된값이 있을 때 잘못된 사용방법이 됩니다. 특수한 경우가 아니라면 사용을 지양해야 합니다.
ref를 사용해야할 때
ref는 DOM 에 직접적으로 접근할 때 사용합니다.
DOM을 사용해야할 때
- 특정 input에 포커스 주기
- 스크롤박스 조작하기
- canvas 요소에 그림그리기
등등
클래스형 컴포넌트의 ref
함수형 컴포넌트에서 ref를 사용하려면 HOOK을 사용해야합니다. 나중에 알아보도록할게요.
createRef를 사용한 ref 설정
class 클래스명 extends Component {
ref명 = React.createRef();
render(){
return(
<div>
<input ref={this.ref명} />
</div>
)
}
}콜백함수를 사용한 ref 설정
class 클래스명 extends Component {
render(){
return(
<div>
<input ref={(ref)=>{this.ref명=ref}} />
</div>
)
}
}클래스형 컴포넌트에 ref 달기
리액트는 컴포넌트 자체에도 ref를 달 수 있습니다.
<컴포넌트명 ref={(ref) => {this.ref명 = ref}} />이렇게하면 컴포넌트명 의 내부메서드, 내부변수, 내부ref에도 접근이 가능합니다.
중요 먼저 ref를 사용하지 않고 기능구현이 가능한지 생각해봅니다. 또, 서로 다른 컴포넌트간에 ref로 데이터를 교류하는것은 지양해야합니다. 대형 프로젝트에서 이런식으로 데이터 교류를 하게 되면 스파게티처럼 꼬여버리기 때문입니다.
Front End