Electron + React = 💜

  • 11. Electron : Icons
  • 10. Electron : Build
  • 9. Electron : Native Node Module
  • 8. Electron : Shell
  • 7. React : 상태 관리
  • 6. React + Electron : 이벤트
  • 5. React + Electron : Example
  • 4. Electron : 이벤트
  • 3. Electron : 통신
  • 2. Electron : 기본 기능
  • 1. Electron : 구성

React : 상태 관리

8개월, 1주 전
@baealex

소비적인 일보단 생산적인 일을 좋아합니다.

데이터 추가하기

class App extends Component {
    id = 2
    state = {
        information: [
            {
                id: 0,
                name: '배진오',
                phone: '010-0000-0000'
            },
            {
                id: 1,
                name: '홍길동',
                phone: '010-0000-0000'
            },
        ]
    }
    handleCreate = (data) => {
        const { information } = this.state;
        this.setState({
            information: information.concat({
                id: this.id++,
                ...data,
            })
        })
        //console.log(data)
    }
    render() {
        const { information } = this.state;
        return (
            <div>
                <PhoneForm 
                    onCreate={this.handleCreate}
                />
                {JSON.stringify(information)}
            </div>
        )
    }
}

이벤트가 발생하면 concat 함수를 이용하여 기존에 데이터에 붙인 후 state를 적용하는 방식이다.


값 교환하기

class App extends Component {
    handleCreate = (data) => {
        console.log(data)
    }
    render() {
        return (
            <div>
                <PhoneForm 
                    onCreate={this.handleCreate}
                />
            </div>
        )
    }
}

위처럼 메서드 하나를 하위 컴포넌트의 props로 넘겨주고 하위 컴포넌트에서 해당 함수로 다음과 같이 값을 전달하면 된다.

class PhoneForm extends Component {
    state = {
        name: '',
        phone: '',
    }
    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        });
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.onCreate(this.state);
        this.setState({
            name: '',
            phone: '',
        })
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    placeholder="이름"
                    value={this.state.name}
                    onChange={this.handleChange}
                    name="name"
                />
                <input
                    placeholder="전화번호"
                    value={this.state.phone}
                    onChange={this.handleChange}
                    name="phone"
                />
                {/*<div>{this.state.name} {this.state.phone}</div>*/}
                <button type="submit">등록</button>
            </form>
        )
    }
}

컴포넌트가 깊어지면 깊어질수록 점차 작업이 귀찮아진다. Redux와 같은 패키지를 활용하면 이를 좀 더 수월하게 처리할 수 있다.

작성된 댓글이 없습니다!
로그인된 사용자만 댓글을 작성할 수 있습니다.