[REACT] state

* 김민준님의 '리액트를 다루는 기술'을 공부하며 개인적으로 정리한 내용입니다.

state

- 컴포넌트 내부에서 바뀔 수 있다.

props

- 부모 컴포넌트에서만 바꿀 수 있다.

- 컴포넌트는 props를 읽기전용으로만 사용할 수 있다.

 

---

두 종류의  state가 있다.

- 클래스형 컴포넌트의 state

- 함수형 컴포넌트의 state (useState 함수)

---

import React, { Component } from 'react';

class Counter extends Component {
    constructor(props){
        super(props);
        this.state = {
            number: 0
        }
    }
    render() {
        const {number} = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <button
                    onClick={() => {
                        this.setState({number: number + 1})
                    }}
                >+1</button>
            </div>
        );
    }
}

export default Counter;

버튼을 누를 때 마다 state의 number 값을 1씩 올려주는 컴포넌트이다.

여기서 onClick 을 onclick이라고 적어서 안됐다.

대소문자를 꼭 구분해주자.

에러 메세지도 안떠서 찾기 어렵다.

 

---

constructor(props){
        super(props);
        this.state = {
            number: 0,
            fixedNumber: 0
        }
    }

    state = {
        number: 0,
        fixedNumber: 0
    }

위 2개의 state 값 초기화는 같은 역할을 한다.

편의성을 위해 아래껄 쓴다.

 

---

Hooks ?

함수형 컴포넌트에서 state를 사용하기 위해 쓰는 도구

useState 를 사용한다.

 

배열 비구조화 할당 ?

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

 

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

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

위의 형식으로 사용하는 것을 배열 비구조화 할당이라고 한다.

 

---