18Feb2020 TIL

 

• 하나의 component 는 한가지 기능만 수행하는 것이 좋다.  e.g.) setState() 되는 것 따로 / fetch 되는 것 따로!
• componentDidMount()는 한 번만 실행된다.
• this.state는 rendering 될 때 그려지는 요소 저장으로 쓰는 것이 좋다. e.g.) 동영상 리스트, 현재 재생 동영상 등

---

ref 

: render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공

Dom 안에서 document.queryselector() 나 <App /> 에 직접 접근하여 값을 가져오거나 값을 변경하거나 기타 등등의 이유로 사용할 때,

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.handleEvent = this.handleEvent.bind(this);
    this.myRef = React.createRef(); // 1. ref 의 변수를 지정
  }

  handleEvent() {
    const node = this.myRef.current;   // 3. ref의 변수를 다른 변수이름으로 담아줌.
    let value = node.value;
 }

  render() {
    return (
      <div className="searchbar">
        <input
          className="form"
          type="text"
          ref={this.myRef}	// 2. 직접 접근하고 싶은 node에 변수명과 함께 적어준다
        />
      </div>
    );
  }
}

 

---

setState()는 비동기

: 순차적으로 작동하지 않는다. 

 

---

 

비동기를 고려하지 않은 나의 생각 :

value 의 값을 받음-> .setState()로 state 의 text 를 수정 -> this.state.text 를 상위컴포넌츠에 올려준다.

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text = ''};
  }

  handleEvent(value) {
    this.setState({text:value});
    this.props.liftUp(this.state.text);
  }
 
 //이하 생략
 }

 

문제는 setState가 비동기적으로 작동하기 때문에 내가 생각하는 순서대로 작동하지 않았다. state 를 바꾸기도 전에 빈 문자열을 상위 컴포넌츠에 전달하기도 하고, 이미 지나간 검색어를 전달하기도 하는 등 원하는 대로 구현되지 않았다. 

 

보다 바른 예시 : 

 

class Search extends React.Component {
  constructor(props) {
    super(props);
  }

  handleEvent(value) {
    this.props.liftUp(value);	//바로 전달하면 되었다^^;;
  }
 
 //이하 생략
 }

 

실시간으로 이벤트를 받아 움직여야 하는 일을 언제 바뀔지 모르는 setState에 의존하는 것보다,

받은 값을 바로 위로 전달해주면 되는 일이었다. 한단계 꼬아 생각했던 것 같다. 

 

 

---

lift state up 은 내일 포스팅해야겠다..넘 졸려...