1. 개요

지금까지 작성해본 React의 js 파일과 scss 파일을 토대로 state 객체를 통해 UI를 관리하는 동적 데이터가 어떻게 관리 되는지 알아본다. 지금까지 만들어 온 Westagram HTML 파일과 CSS 를 리액트 언어로 바꿔서 화면에 구현하기는 완료 하였다.

2. State 객체

State 객체는 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로 화면에 보여줄 컴포넌트의 UI 정보 (상태) 를 지니고 있는 객체이다. 컴포넌트 내에서 정의하고 사용하며 얼마든지 변경 가능한 값만 들어온다.

아래는 State 객체를 활용한 예시이다.

import React, { Component } from 'react';

class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red',
    };
  }
// state 설정 시 constructor 함수를 적고 super 함수를 호출한다.
// this.state 값에 컴포넌트의 초기 상태값을 설정해준다.
  handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }
// Button 을 클릭하는 이벤트가 발생 시 handleColor 함수가 실행된다.
// handlerColor 함수에는 변경되는 state 값을 넣어준다.
// 이 때 사용하는 것이 setState 이다.
// this.state 는 컴포넌트를 재랜더링 하지 않기 때문에 대신 setState를 사용하여 변경 값을 준다.
  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}
// render 함수가 호출된다.
// Button 을 클릭하는 이벤트가 발생 시 handleColor 함수가 실행되었고 그에 따라 바뀐 state 값이 반영되어 h1 태그의 글자 색상이 바뀌게 된다.
export default State;

3. State 객체 적용

Login 페이지에서 ID, PW의 input 에 입력된 값을 state 에 저장한다.
순서는 아래와 같다.

1. ID <input> 에서 onChange event 발생
2. event 발생 시 handleIdInput 함수 실행
3. handleIdInput 는 이벤트를 인자로 받음
4. event가 일어난 요소에 담긴 value 값 (event.target.value)을 state에 저장
5. 위의 과정을 PW <input> 에도 동일하게 적용

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

class LoginSg extends React.Component {
  constructor() {
    super();
    this.state = {
      idInput: '',
      pwInput: '',
    };
  }
// input 창의 초기 값으로는 빈 값을 주어야 하니 this.state 에서는 홑따옴표로 빈 값을 준다.
// 가독성을 위해 따옴표나 숫자 0, 빈 배열 등을 넣어준다.
// input 으로 들어가는 값에 따라 따옴표나 숫자 0, 빈 배열 등을 넣어준다.
  updateIdInput = e => {
    this.setState({
      idInput: e.target.value,
    });
  };
// id input 태그에 들어오는 값을 감지하는 함수이다.
  updatePwInput = e => {
    this.setState({
      pwInput: e.target.value,
    });
  };
// pw input 태그에 들어오는 값을 감지하는 함수이다.
  render() {
    return (
      <main className="login">
// 첫 번째 클래스 명이나 ID 명은 컴포넌트 명과 동일하게 작성할 것
// 팀 프로젝트로 merge가 되면 한 html과 routes로 모이기 때문에 코드가 겹칠 수 있다.
        <div className="boxWrapper">
          <header>
            <p className="login__logo">Westagram</p>
          </header>
          <section>
            <form className="login__form">
              <input
                type="text"
                id="login__id"
                placeholder="Phone number, username, or email"
                onChange={this.updateIdInput}
              />	// id input 값이 변경될 때 발생하는 onChange 를 걸어준다.
              <input
                type="password"
                id="login__pw"
                placeholder="Password"
                onChange={this.updatePwInput}
              />	// pw input 값이 변경될 때 발생하는 onChange 를 걸어준다.
              <button disabled id="login__btn">
                Log In
              </button>
            </form>
          </section>
          <section>
            <div className="password__reset">
              <a href="https://www.#.com">Forgot password?</a>
            </div>
          </section>
        </div>
      </main>
    );
  }
}

export default LoginSg;

4. 느낀 점

리액트는 아직까지 어렵긴 하지만 계속 반복해서 개념을 보고 직접 코드로 옮겨보니 처음 봤을 때의 그 혼란스러움에서 조금은 벗어난 듯 하다. 어려울 때마다 동기분들과 이야기하면서 차근 차근 이해 중이다. 잘만 사용하면 리액트의 특성 답게 UI 측면에서 보이는 코드들을 효율적으로 관리할 수 있을 것이다.