TIL #8 React State

• State

Component의 내부에서 정의하는 Component의 상태 값.
클래스형 컴포넌트를 작성할 때 해당 클래스 내부의 맨 위쪽에 작성하는 것이 일반적이다.

State 작성 예시

import React from 'react';
class Login extends React.Component {
    constructor (){
        super();
        this.state = {
            backgroundColor: "white",
            id: "seungmin",
            password: ""
        }        
    }
<button type="button" style={backgroundColor : this.state.backgroundColor} className="loginBtn">로그인</button>

위의 예시와 같이 Component에 State를 정의하고 JSX 코드에 입력하면 Component 내부에 있는 요소들이 그 데이터를 반영하게 된다.

• constructor, super 함수가 반드시 입력되어야한다.
• State의 형태는 Object (객체) 로 key와 value 형식으로 되어 있다.

• State를 이벤트에 이용하기

import React from 'react';
import Logo from './logo_text.png';
class Login extends React.Component {
    constructor (){
        super();
        this.state = {
            backgroundColor: "",
            id: "",
            password: ""
        }        
    }
    HandleIdInput = event => {
        this.setState({
            id: event.target.value
        });
    }
    HandlePasswordInput = event => {
        this.setState({
            password:event.target.value
        })
    }
    render () {
        return (
            <div className = "main-container">
                <div>
                    <img className = "logo" src = {Logo} alt = "logo"/>
                </div>
                <div className="login-form">
                    <input id="idInput" onChange={this.HandleIdInput} className="idInput" type="text" placeholder="전화번호, 사용자 이름 또는 이메일"/>
                    <input id="passwordInput" onChange={this.HandlePasswordInput} className="passwordInput" type="password" placeholder="비밀번호"/>
                    <button type="button" style={{backgroundColor : this.state.id.length > 0 && this.state.password.length >0 ? "#3399ff" : "#B2DFFC"}} className="loginBtn">로그인</button>
                </div>
                <div>
                    <p className="resetPassword">비밀번호를 잊으셨나요?</p>
                </div>
            </div>            
        )
    }
}
export default Login;

• 해당 코드는 로그인 폼에서 아이디 input값과 패스워드 input값이 모두 입력되어야만 button이 활성화 되는 코드이다.
• #idInput 태그와 #passwordInput 태그에 각각 onChange 이벤트를 입력하여 이벤트를 걸어주었다.
• onChange 이벤트 안에 위에 정의해놓은 이벤트 함수를 입력하고, 이벤트 함수를 입력해놓은 태그에 변화가 발생하면 그것을 감지하고 이벤트가 시작된다.
• 상단에 총 세가지의 State를 아래와 같이 지정해주었다.

	{
	backgroundColor: "",
	id: "",
	password:""
	}        

id, password 값은 사용자가 입력하는 값에 따라 변경되어야 하기 때문에 비워두었고, backgroundColor 값은 이벤트가 발생했을때와 발생하지 않았을때 각각 달라야하기 때문에 비워두었다.

• 유저가 id를 입력할 시 onChange 이벤트를 통해 HandleIdInput 함수가 실행되고 HandleIdInput 함수는 해당 이벤트 자체를 인자로 받는다.
• 이후 setState 함수를 통해 id라는 state 값이 event.target.value 로 설정된다. 여기에서 event.target은 idInput이기 때문에 idInput의 value값을 id에 넣어준다는 의미가 된다.
• password도 id와 동일한 방식으로 이벤트가 적용되고 유저가 id, password를 입력하면 그 값은 id와 password라는 state의 value 값이 된다.
• 이렇게 id, password라는 state 에 변화가 발생하면 button의 backgoundColor 가 변경될 수 있도록 inline style을 사용했고 그 안에 3항 연산자를 사용하였다.

style={{backgroundColor : this.state.id.length > 0 && this.state.password.length >0 ? "#3399ff" : "#B2DFFC"}}

• id 라는 state와 password state의 length 가 0보다 클 경우 backgroundColor 값은 "#3399ff" 가 되고 그렇지 않을 경우 "#B2DFFC" 가 된다.