강의 유튜브 주소 :
https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn
리액트에서 돔을 컨트롤할때 ref를 사용하여 접근한다.
Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.
리액트는 대체로 돔을 컨트롤 하지 않아야하는데, input에 focus하는 작업등을 위해서 사용할 수 있다.
*바람직한 사용 사례는 포커스, 텍스트 선택영역, 미디어 재생을 관리, 애니메이션 직접적 실행, 서드파티 DOM 라이브러리를 React와 사용할때라고한다.
jQuery에서는 아래와 같이 작업을 한다.
var input = $('.is-input');
input.focus();
React의 class 컴포넌트에서는 아래와 같이 작업한다.
먼저 inputEl을 해당 class 컴포넌트의 멤버로 등록한다.
그리고 난 후 jsx에서 어떤 돔을 컨트롤할지 ref={} 를 통해 선언한다.
이때 함수로 핸들러는 빼는 것이 좋으며 onRefInput에서 보듯이 넘겨받은 인자값을 this.inputEl에 넣어준다.
그 다음 this.inputEl.focus()를 통해 jQuery와 같이 동작하도록 한다.
inputEl;
onRefInput = (c) => {
this.inputEl = c;
};
this.inputEl.focus();
render(){
<>
<form>
<input ref={this.onRefInput} />
</form>
</>
}
그렇다면 Hooks에서는 어떻게 사용할 수 있을까?
Hooks에서는 useRef를 사용해서 구현할 수 있다.
const React = require('react');
const {useRef} = React;
const [input, setInput] = useRef(null);
input.current.focus();
return{
<>
<form>
<input ref={input} />
</form>
</>
}다만 useRef를 사용할때에 focus를 한다면 반드시 input.current.focus()에서 current를 써줘야한다.
class에서 ref를 Hooks와 비슷하게 만들어 사용할수도 있다.
(예전에 이런식으로 쓰였다는데 없어진 방법은 아니며 조금이지만 사용되고 있기는 하다고 한다.)
요즘은 아래와 같이 createRef()를 통해 간단하게 구현할 수 있다.
import React, {Component, createRef} from 'react';
inputRef = createRef();
input.current.focus();
render(){
<>
<form>
<input ref={this.inpurRef} />
</form>
</>
}
Hooks로 useState를 사용하는 것과 다르게 Class에서 setState할때에는 this.setState내부에 다른 동작을 넣을 수 있다.
이런걸 일급함수라고 한다.(hoc)
this.setState( (prevState) => {
// !!이곳에 다른 동작을 추가할 수 있다.
return {
// ...
}
});
만약 render 내부에 setState를 사용한다면 무한루프에 빠지니 주의해야한다.
render는 state가 변경될때 되기 때문에, render -> setState -> render.. 가 반복되니말이다..
render(){
// 무한루프
this.setState({});
return{
}
};
자식 컴포넌트에서 props는 절대로 직접적으로 수정하면 안된다.
// 부모
<Welcome name={this.state.name} />
// 자식
class Welcome extends React.Component {
componentDidMount(){
// (X)
this.props.name = '안녕';
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
실무에서 props를 변경해야하는 경우가 있는데, 이럴경우에는 부모 컴포넌트의 state를 변경 시켜줘야한다.
정말 어쩔수 없이 props를 변경해야할 경우 자식컴포넌트의 state로 선언하여 수정해준다.
근데 이것도 좋은 방법은 아니라고한다.
나중에 알려줄 getDerivedStateFromProps를 사용하면 된다고 한다. (6까지 봤는데, 아직까지 강의에 등장안했다!)
// 부모
<Welcome name={this.state.name} />
// 자식
class Welcome extends React.Component {
state = {
newName : this.props.name
}
componentDidMount(){
this.setState({
newName : '안녕'
});
}
render() {
return <h1>Hello, {this.state.newName}</h1>;
}
}
class 함수 내부에 construct가 사용되는 경우가 있다.
이때 construct 함수를 쓰게되면 미세한 컨트롤이 가능하다고한다.(정밀한 동작, 기본객체로는 힘든것)
constructor(props){
super(props);
// 이곳에 다른 동작을 추가할 수 있다.
// 예를 들어서 필터링한 것이라던가?
const filter = () => {
return '';
};
this.state = {
value : filter()
};
}