---

State

---

1. 기본 프로젝트 생성
2. 컴포넌트 (클래스형 컴포넌트, 함수형 컴포넌트)
3. props: 매개변수
4. state: 컴포넌트 안에서 상태를 변경하는 값
5. 이벤트
   <a href="">

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

• State는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
• 두 가지 종류의 state가 있는데 하나의 클래스형 컴포넌트 state, 다른 하나는 함수 컴포넌트의 useState라는 함수를 이용한 state

함수 컴포넌트에서의 useState

• useState라는 함수를 사용하여 함수 컴포넌트에서도 state를 사용할 수 있게 되었다.
• Hooks라는 것을 사용한다. Hooks의 종류는 다양하다.

배열의 비구조화 할당

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

• Array안에 있는 값을 one과 two에 담아주는 코드이다. 위 코드는 배열 비구조화 할당을 사용하면 다음과 같이 표현할 수 있다.
  

import React, {useState} from 'react';

const Say = () => {
    const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage('하이');
    const onClickLeave = () => setMessage('바이');

    const [color, setColor] = useState('black');


  return (
  <div>
    <button onClick={onClickEnter}>입장</button>
    <button onClick={onClickLeave}>퇴장</button>
    <h1 style={{color}}>{message}</h1>

    <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>
  );
}

export default Say;

State

Props와 state를 같이 생각해야 한다.

• 사용자는 프롭스 조작을 통해서 컴포넌트를 조작할 수 있다.
• 사용자가 알 필요없는 내부적인 정보를 state라고 한다.
• 좋은 컴포넌트는 프롭스와 state가 철저하게 분리되어 있어야 한다.
• 사용하는 쪽과 구현하는 쪽을 철저하게 격리시켜 양쪽의 편의성을 각자 도모하는 구조
  

import React, {Component} from 'react';

class Event extends Component {
    state = {
        msg : ''
    }

  render() {
    return (
        <div>
            <h1>이벤트 연습</h1>
            <input type="text" name="msg" placeholder='우악' value={this.state.msg}
            onChange={
                (e) => {
                    console.log(e.target.value);
                    this.setState({
                        msg : e.target.value
                    })
                }
            }>
            </input>
            <button onClick={
                () => {
                    alert(this.state.msg);
                    this.setState({
                        msg : ''
                    })
                }
            }>확인</button>
        </div>
    );
  }
}


export default Event;