TIL #11 state & props

State & Props

State

state는 화면에 보여줄 컴포넌트의 정보를 지니고 있는 객체이다.

 

state는 컴포넌트의 생성자(constructor) 내에서 this.state를 통해서 초기 상태 값을 설정해 줄 수 있다.

import React from "react";
import Child from "../Child/Child";

class Login extends React.Component {
    constructor() {
        super();

        this.state = {
            color: "blue",
        };
    }
    render() {
        return (
            <div className="Login">
                <section className="login_container">
                    <h1 className="title" style={{ color: this.state.color }}>
                        Westagram
                    </h1>
                    <form className="contents">
                        <div className="id_box input_box">
                            <input
                                className="input_id"
                                type="email"
                                placeholder="전화번호, 사용자 이름 또는 이메일"
                            />
                        </div>
                        <div className="pw_box input_box">
                            <input
                                className="input_pw"
                                type="password"
                                placeholder="비밀번호"
                            />
                            <button className="show_pw" type="button">
                                비밀번호 표시
                            </button>
                        </div>
                        <button className="submit_btn" type="submit">
                            로그인
                        </button>
                        <Child titleColor={this.state.color} />
                        <a href="https://en.wikipedia.org/wiki/Help:Reset_password">
                            비밀번호를 잊으셨나요?
                        </a>
                    </form>
                </section>
            </div>
        );
    }
}

위에서와 같이 this.state를 통해 객체 형식으로 초기값을 설정해 줄 수 있다. (객체의 key값은 원하는 대로 설정이 가능하다.)

설정한 초기값을 컴포넌트 내의 태그에서 속성 값으로 사용이 가능하다.

 

setState()

state의 값을 변경하기 위해서는 setState() 함수를 사용해야 한다.

import React from "react";
import "./Login.scss";

class Login extends React.Component {
    constructor() {
        super();

        this.state = {
            color: "blue",
        };
    }

    changeColor = () => {
    	this.setState({
            color: "red",
        })
    };
    render() {
        return (
            <div className="Login">
                <section className="login_container">
                    <h1 className="title" style={{color : this.state.color}} onClick={this.changeColor}>Westagram</h1>
                    <form className="contents">
                        <div className="id_box input_box">
                            <input
                                className="input_id"
                                type="email"
                                placeholder="전화번호, 사용자 이름 또는 이메일"
                            />
                        </div>
                        <div className="pw_box input_box">
                            <input
                                className="input_pw"
                                type="password"
                                placeholder="비밀번호"
                            />
                            <button className="show_pw" type="button">
                                비밀번호 표시
                            </button>
                        </div>
                        <button
                            className="submit_btn"
                            type="submit"
                        >
                            로그인
                        </button>
                        <a href="https://en.wikipedia.org/wiki/Help:Reset_password">
                            비밀번호를 잊으셨나요?
                        </a>
                    </form>
                </section>
            </div>
        );
    }
}

'title' 클래스명을 가진 h1태그에 onClick 이벤트를 설정하여 클릭 시 color의 값을 setState()를 활용해 변경해준다.

 

setState 참고

1. setState의 두번째 매개변수로 setState의 실행이 완료되고 컴포넌트가 다시 렌더링 된 뒤에 실행될 콜백 함수를 전달할 수 있다. (리액트 공식문서에는 해당 방식으로 setState를 사용할 경우 componentDidUpdate()의 사용을 권장한다.)
2. setState에는 객체뿐만 아니라 함수를 전달할 수도 있다.
3. setState를 사용하지 않고 state의 값을 변경할 경우 컴포넌트를 다시 렌더링 하지 않는다. (setState를 사용해야 하는 가장 중요한 이유!!)
4. setState는 컴포넌트를 항상 즉각적으로 갱신하지 않는다. 그렇기 때문에 setState 호출 후 바로 this.state에 접근할 경우 변경내용이 state에 적용되어있지 않을 수 있다. (이 경우 1번, 2번 방법의 사용을 권장한다.)

---

Props

props는 컴포넌트의 속성값으로 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다.

import React from "react";
import { withRouter } from "react-router-dom";
import Child from "../Child/Child";
import "./Login.scss";

class Login extends React.Component {
    constructor() {
        super();

        this.state = {
            color: "blue",
        };
    }

    changeColor = () => {
        this.state.color === "blue"
            ? this.setState({
                  color: "red",
              })
            : this.setState({
                  color: "blue",
              });
    };
    goMain = () => {
        console.log("this = ", this);
        this.props.history.push("/main");
    };
    render() {
        return (
            <div className="Login">
                <section className="login_container">
                    <h1 className="title">Westagram</h1>
                    <form className="contents">
                        <div className="id_box input_box">
                            <input
                                className="input_id"
                                type="email"
                                placeholder="전화번호, 사용자 이름 또는 이메일"
                            />
                        </div>
                        <div className="pw_box input_box">
                            <input
                                className="input_pw"
                                type="password"
                                placeholder="비밀번호"
                            />
                            <button className="show_pw" type="button">
                                비밀번호 표시
                            </button>
                        </div>
                        <button
                            onClick={this.goMain}
                            className="submit_btn"
                            type="submit"
                        >
                            로그인
                        </button>
                        <Child
                            changeColor={this.changeColor}
                            titleColor={this.state.color}
                        />
                        <a href="https://en.wikipedia.org/wiki/Help:Reset_password">
                            비밀번호를 잊으셨나요?
                        </a>
                    </form>
                </section>
            </div>
        );
    }
}

위의 코드에서는 Child 컴포넌트 내에 changeColor와 titleColor속성을 지정해 주었다. (속성의 이름은 마음대로 지정 가능)

import React from "react";

class Child extends React.Component {

    render() {
        return (
            <h1
                onClick={this.props.changeColor}
                style={{ color: this.props.titleColor }}
            >
                Hello world!!
            </h1>
        );
    }
}

export default Child;

Child 컴포넌트 내에서는 전달받은 속성 값을 props객체를 통해 접근할 수 있다.