3.4 state

리액트 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다 에러 해결

• yarn start를 했는데 이런 오류가 발생 한 경우
• 깃으로 리액트 관련 폴더를 클론 했을 때 모듈 관련 문제가 생긴다
• yarn add react-scripts 를 한 뒤 yarn start를 하면 문제 해결.
• 노드js 모듈로 create-react-app으로 프로젝트를 만들었을 때 react-scripts가 같이 설치된다. create-react-app은 빠르게 react프로젝트를 시작할 수 있도록 귀찮은 설정을 대신해주는 모듈이다. babel이나 webpack따위를 포함. 정확히 뭔지는 모르겠다...
• 참조 - https://thespoiler.tistory.com/21

3.4.1 클래스형 컴포넌트의 state

• 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미
• props는 컴포넌트가 사용 되는 과정에서 부모 컴포넌트가 설정하는 값
• 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 가능
• props를 바꾸려면 부모 컴포넌트에서 바꾸어야 한다.
• 새로운 Counter 컴포넌트 생성

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    // state 의 초깃값 설정하기
    this.state = {
      number: 0,
    };
  }

  render() {
    const { number } = this.state; // state를 조회할 때는 this.state로 조회
    return (
      <div>
        <h1>{number}</h1>
        <button
          // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정
          onClick={() => {
            //this.setState를 사용하여 state에 새로운 값을 넣을 수 있다.
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

• 코드 역할
  • 컴포넌트에 state를 설정할 때는 다음과 같이 constructor 메서드를 작성하여 설정
• 컴포넌트 생성자 메서드
  • 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해야 주어야 한다.
  • 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속 받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출
  • this.state 값에 초깃값을 설정
  • 컴포넌트의 state는 객체 형식

constructor(props) {
    super(props);
    // state 의 초깃값 설정하기
    this.state = {
      number: 0,
    };
  }

• render 함수에서 현재 stat를 조회할 때 this.state를 조회
• 버튼 안에 onClick이라는 값을 props로 넣어 주었는데 이는 버튼이 클릭될 때 호출 시킬 함수를 설정할 수 있게 해준다

3.4.1.1 state 객체안에 여러 값이 있을 때

class Counter extends Component {
  constructor(props) {
    super(props);
    // state 의 초깃값 설정하기
    this.state = {
      number: 0,
      number2: 7590,
      fixedNumber: 150,  
    };
  }

  render() {
    const { number, number2, fixedNumber } = this.state; // state를 조회할 때는 this.state로 조회 

    return (
      <div>
        <h1>{number}</h1>
        <h2>상수 : {fixedNumber} </h2>
        <h3>그냥 넣은 : {number2}</h3>
        <button
          // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정
          onClick={() => {
            //this.setState를 사용하여 state에 새로운 값을 넣을 수 있다.
            this.setState({ number: number + fixedNumber });
          }}
        >
          +1
        </button>

        <button
          onClick={() => {
            this.setState({ number: number * number2 });
          }}
        ></button>
      </div>
    );
  }
}

• fixedNumber라는 값은 고정 되고 number 값만 바꿀 수 있다

3.4.1.2 state를 constructor 꺼내기

• state의 초깃값을 지정하기 위해 constructor 메서드를 선언해 주었는데, 또 다른 방식으로 state의 초깃값을 지정할 수 있다.

----------- 23-7-9-----

3.4.1.3 this.setState에 객체 대신 함수 인자 전달하기

• this.setState를 사용하여 state 값을 업데이트 할 때는 상태가 비동기적으로 업데이트
• onClick에 설정한 함수 내부에서 this.setState를 두번 호출하면?

            //3.4.1.3
            this.setState ({number : number + 1});
            this.setState({number : this.state.number + 1});

• 이렇게 해도 값은 1씩 더해짐
• this.setState 를 사용해도 state 값이 바로 바뀌지 않기 때문
• 이를 해결하기 위해 this.setState를 사용할 때 객체 대신 함수 인자를 넣어준다

this.setState((prevState, props) => {
    return {
    // 업데이트 할 내용
    }
})

• 여기서 prevState는 기존 상태
• props는 현재 지닌 props.. 업데이트 하는 과정에 필요 없다면 빼도 된다

          this.setState(prevState => {
               return {
                 number : prevState.number + 1
               }
              });


            // 위 코드와 아래 코드는 똑같은 기능
            // 아래 코드는 함수에서 바로 객체를 반환한다는 의미 

            this.setState(prevState => ({
              number : prevState.number + 1
            }));

• 바로 반환할 때는 return 을 생략하고 코드 블록 { } 생략
• a 와 b를 받아와 합을 구하는 함수를 작성하고 싶다면

const sum = (a,b) => a + b;

3.4.1.4 this.setState 가 끝난 후 특정 작업 실행

 <button
        // 3.4.1.4 
        // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정
          onClick={() => {
            this.setState(
              {
                number2 : number2 + 1 
              },
              // callback (void)
              () => {
                console.log("방금 호출 됐습니다")
                console.log(this.state);
              }
            );
          }}
        >
          + number2
        </button>

3.4.2 함수형 컴포넌트에서 useState 사용하기

• 16.8 이전 버전에서는 함수형 컴포넌트에서 state 사용 불가
• 16.8 이후부터는 useState라는 함수를 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있다
• 이 과정에서는 Hooks의 useState만 사용

3.4.2.1 배열 비구조화 할당

• Hooks를 사용하기 전 배열 비구조화 할당 이라는 것을 알아보자
• 객체 비구조화 할당과 비슷
• 배열 안 값을 쉽게 추출할 수 있게 해주는 문법

const array = [1, 2];
const one = array[0];
const two = array[1]; 

// 이 코드를 배열 비구조화 할당을 사용하면 

cosnt array = [1, 2];
const [one, two] = array;

3.4.2.2 useState 사용하기

• Say.js 생성

import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안뇽');
  const onClickLeave = () => setMessage('잘가유');

  return (
    <div>
      <button onClick={onClickEnter}>입장 </button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};
export default Say;

3.4.2.3 한 컴포넌트에서 useState 여러번 사용

  //3.4.2.3 여러번 사용
  const [color, setColor] = useState('black');

  return (
    <div>
      <button onClick={onClickEnter}>입장 </button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      {/* 3.4.2.3 */}
      <button style={{ color: 'red' }} onClick={() => setColor('red')}>
        빨간색~
      </button>
      <button style={{ color: 'green' }} onClick={() => setColor('green')}>
        초록색~
      </button>
      <button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
        파란색~~
      </button>
    </div>
  );
};

정리

• props와 state는 둘 다 컴포넌트에서 사용하거나 랜더링할 때 데이터를 담고 있으므로 비슷해 보일 수 있지만, 그 역할은 매우다르다.
• props는 부모 컴포넌트가 설정
• state는 컴포넌트 자체적으로 지닌 값. 컴포넌트 내부에서 값 업데이트 가능
• props를 사용한다 해서 무조건 고정 값이 아니다
  • 부모 컴포넌트의 state를 자식 컴포넌트의 props로 전달
  • 자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 컴포넌트에서 메서드를 호출하면 props도 유동적으로 사용 가능