React_ state, setState, callback, etc..

* 제로초 "웹 게임을 만들며 배우는 React" 강의를 보면서 작성했습니다.

  예제 또한 강의에서 사용되는 것을 가져왔습니다. 강의보기👀

 

1. State

 - State란 바뀔 여지가 있는 부분, 상태를 말함. 

 - 초기값을 this.state = { } 로 설정해준다. 초기값 설정은 필수이다.

class GuGuDan extends React.Component {
    constructor(props) {
         super(props);
         this.state = { // 초기값 설정
              first: Math.ceil(Math.random() * 9),
              second: Math.ceil(Math.random() * 9),
              value: '', 
              result: '',
              };
    }
}

2. setState

 - this.state에 설정된 초기값을 변경할 때엔 반드시 setState( )를 사용해야 한다.

 - React에서는 setState( )가 호출되면 컴포넌트가 리렌더링 되도록 설계되어 있다.

 - setState( )가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 객체 대신 함수를 전달해야 한다.

   그래야 여러 업데이트 사항이 충돌없이 차례대로 반영이 될 수 있다.

 class GuGuDan extends React.Component {
         constructor(props) {
            super(props);
            this.state = {
               first: Math.ceil(Math.random() * 9),
               second: Math.ceil(Math.random() * 9),
               value: '', // (사용자)입력창에 들어갈 값
               result: '',
            };
         }

         onChange = (e) => {
             this.setState({ value: e.target.value }, () => { console.log(this.state.value) });
             // (객체, 콜백함수) 이렇게 2개 인자를 받아올 수 있다
         };

         onSubmit = (e) => {
             e.preventDefault();
             if (parseInt(this.state.value) === this.state.first * this.state.second) {
                 this.setState((prevState) => {
                      return {
                          result: (prevState.value).concat('  정답'),
                          first: Math.ceil(Math.random() * 9),
                          second: Math.ceil(Math.random() * 9),
                          value: '',
                      };
                });
                this.input.focus();
            } else {
                 this.setState({
                      result: '땡',
                      first: Math.ceil(Math.random() * 9),
                      second: Math.ceil(Math.random() * 9),
                      value: '',
                 });
                 this.input.focus();
            }
        };
}

3. callback 함수

 - setState는 비동기 함수이다. state가 변경되기도 전에 초기state를 불러오기에 내가 설계한 대로 작동이 안됨...

   이럴때에, setState(state변경, callback함수) 방법을 사용해서 2개 인자를 순서대로 실행해줌으로 정상 작동시킨다.

 

 - callback은 쉽게 말하면, 어떤 일을 다른 객체에 시키고, 그 일이 끝나는 것을 기다리고 실행하는 것이다. (순서보장)

   callback 함수를 사용하지 않으면, 콜백 받지 못한 채 다음 프로세스가 진행될 수 있다.

   우리는 차례대로 실행되는 것을 원할 때에 callback 함수를 사용해야겠죠?ㅎ

 - 화살표 함수 사용하기~ ( ) => { }

onChange = (e) => {
    this.setState({ value: e.target.value }, () => { console.log(this.state.value) });
    // (객체, 콜백함수) 이렇게 2개 인자를 받아올 수 있다
};

4. etc..

onSubmit = (e) => {
     e.preventDefault();
     if (parseInt(this.state.value) === this.state.first * this.state.second) {
          this.setState((prevState) => {
          return {
              result: (prevState.value).concat('  정답'),
              first: Math.ceil(Math.random() * 9),
              second: Math.ceil(Math.random() * 9),
              value: '',
          };
       });

(prevState.value).concat('  정답') 표시

 - prevState : 예제에서는 구구단에서 사용자가 이전 문제에서 맞춘 정답을 기억하고 다시 표기하기 위해 사용되었다.

 - parseInt( )는 문자열(string)을 정수(number)로 바꾸는 함수이다.

   예제에서 parseInt(this.state.value) === this.state.first * this.state.second 이렇게 사용되어졌는데,

   좌항(this.state.value)에 사용자가 숫자를 입력해도 string으로 인식하고

   우항(this.state.first * this.state.second) 값은 number로 인식한다.

   parseInt함수 없으면, string ≠ number . ✨그래서 parseInt함수를 사용해주는 것✨