FrontEnd/React & React-Native

[React] State

devwoodie 2023. 3. 14. 23:25
728x90
반응형

📝 state

state는 Component 내부에서 바뀔 수 있는 값을 의미합니다. props는 Component가 사용되는 과정에서 부모Component가 설정하는 값이며, component 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. props를 바꾸려면 부모 Componenet에서 바꾸어 주어야합니다.

React에는 두 가지 state가 있습니다.
하나는 class형 Component가 지니고 있는 state이고, 다른 하나는 함수형 Component가 지니고 있는 useState라는 함수를 통해 사용하는 state입니다.

📜 class형 Component의 state

- Component에 state를 설정할 때는 constructor 메서드를 작성하여 설정합니다.

consturctor(props){
    super(props);
      // state의 초깃값 설정
      this.state = {
        number = 0
    }
}

constructor를 작성할 때는 반드시 super(props)를 호출해 주어야 합니다. 이 함수가 호출되면 현재 class형 Component가 상속받고 있는 react의 Component 클래스가 지닌 생성자 함수를 호출해 줍니다.

그 다음에는 this.state 값에 초깃값을 설정해 주었습니다. Component의 state는 객체형식이어야 합니다.

- render 함수에서 현재 state를 조회할 때는 this.state를 조회하면 됩니다.

render(){
      const { number } = this.state; //state 조회
    return(
      ....
    );
}

- setState라는 함수를 이용해 state 값을 바꿔줍니다.

render(){
      const { number } = this.state; //state 조회
    return(
      <div>
          <button onClick={() => {
            this.setState({ number: number + 1 });
        }}
      </div>
    );
}

📜 함수형 Component의 useState

  • 배열 비구조화 할당

배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법입니다.

const array = [1, 2];
const arr1 = array[0]; //1
const arr2 = array[1]; //2

위의 코드를 배열 비구조화 할당을 사용해 작성하면 아래와 같습니다.

const array = [1, 2];
const [arr1, arr2] = array;
  • useState 사용하기
    먼저 코드 상단에 useState 함수를 불러와야합니다. 
    import { useState } from 'react';
    그리고 배열 비구조화 할당 문법을 이용해 state의 기본 값을 지정해 줍니다. 
    const [state, setState] = useState('');
    useState의 괄호 안의 값이 state에 담겨있는 상태입니다.
    state 값을 변경하기 위해서는 state가 아닌 setState를 이용해 변경해야 합니다.

아래는 버튼 클릭 시 state 내용이 바뀌도록 설정한 코드입니다.

import { useState } from 'react';

const ChangeState = () => {
    let [text, setText] = useState('');
      return(
        <div>
              <button onClick={() => {
                setText('Hello');
            }}
          </div>
    )
}

버튼을 클릭하게 되면 아무것도 안 담겨 있는 state가 setText 함수로 인해 'Hello'로 변경됩니다.

📜 state 사용 시 주의 사항

  • *state 값을 변경해야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용해야 합니다. *
  • state에 담겨있는 배열이나 객체를 변경하고 싶을 때는 아래와 같이 사용하면 됩니다. 
    import { useState } from 'react';

const ChangeState = () => {
let [text, setText] = useState(['Hi', 'Hello']);
return(


<button onClick={() => {
let copy = [... text];
copy[0] = 'Bye';
setText(copy);
}}


)
}

```
위 코드와 같이 객체에 대한 사본을 만들 때는 spread 연산자를 사용하여 처리해야 합니다.

728x90
반응형