TIL 49 | State & Event

Saemsol Yoo·2021년 1월 29일
0

React

목록 보기
3/6
post-thumbnail

React는 View 를 담당하는 라이브러리이다. 그리고 리액트는 component들로 이루어졌다고 볼 수 있는데, component란 재사용가능한 UI 요소의 최소단위이다. React, UI, 보여지는 것! 항상 이 부분을 염두에 두고 리액트를 공부해야 이해하기 좋은 것 같다! ✨


State

state 는 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트 UI의 상태값을 의미한다. 그래서 화면에 보여줄 컴포넌트의 UI정보를 객체형태로 가지고 있다.
state는 컴포넌트 내에서 정의하고 사용하면서 그 상태데이터는 얼마든지 변경될 수 있다. 👏🏻


1. state 정의하기

state는 object 형태로 되어있으며, 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있다.

① class component에서 정의하기

import React from 'react';

class State extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1>Class Component | State</h1>
      </div>
    );
  }
}

export default State;
  • class component 는 필수적으로 render 함수가 필요하고, 화면에 나타내고 싶은 요소들은 jsx 문법으로 return 안에서 작성해 준다.
  • 그리고 이 render 함수 위에 constructor 함수가 있다.
  • state는 constructor 함수 안에서 설정해준다! ✨
  • 그리고 this.state 값에 컴포넌트의 초기 상태값을 설정해준다. ✨

② state 형태

 this.state = {
      color: 'red'
    };
  • component의 state는 객체이다.
  • 객체 안의 key 이름은 원하는대로 설정해줄 수 있다.



2. State 사용 예시

🤔 state는 왜 필요하고, 왜 사용하는걸까?
→ 리액트는 view를 담당하는거고, 각각의 컴포넌트들이 모여 화면에 띄워진다. 컴포넌트의 상태에는 이런 보여지는 것들에 대한 데이터가 들어있는것이고, 보여지는 화면에 변화가 생긴다는것은 이 컴포넌트 상태값이 바뀌었기 때문인것이다.
또한! state 상태에 변화가 생기면 리액트는 자동으로 render함수를 호출하면서 변화된 상태값을 반영한 화면을 다시 브라우저에 띄워준다. 이런 과정으로 데이터가 바뀔 때마다 효율적으로 UI 를 나타내주기 위해 state에서 상태값을 설정해주는거다 👏🏻

import React, { Component } from 'react';

export class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
      </div>
    );
  }
}

export default State;

→ 이렇게 State 라는 컴포넌트에서, constructor 부분과 / 그 안의 state에 있는 데이터를 어떻게 가져와 사용하는지 알아보자!


① this.state = { }

this.state = {
      color: 'red'
    };
  • 우선 this.state 객체는 super() 메소드 다음으로 온다.
  • state 객체 안에는 key - value 짝 으로 데이터가 들어있다.
  • value에는 string 뿐만 아니라 배열, boolean 타입 등 여러 종류의 데이터 타입이 올 수 있다.

② this.state.key

<h1 style={{ color: this.state.color  }}>Class Component | State</h1>

// this : 해당 컴포넌트
// this.state : 해당 컴포넌트의 state 객체
// this.state.color : state 객체의 특정 key(color)값. 즉 "red"

jsx 문법에서는 이렇게 html 처럼 작성하다가 자바스크립트문법을 작성해주어야 할 때에는 {중괄호}를 열어서 작성해준다. 그리고 color를 state에 있는 데이터를 가져와 쓰기위해 객체에 접근하는 dot notation을 이용해서 this.state에 있는 color의 키에 담긴 값을 불러와 써준다. (='red')



3. Event & setState

state의 상태는 setState를 이용해서 업데이트 시켜줄 수 있다. ✨

import React, { Component } from 'react';

export class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red',
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}

export default State;

→ 이 코드에서 발생하는 이벤트를 순서에 따라 정리해보겠습니다 🙂

① 이벤트발생

<button onClick={this.handleColor}>Click</button> 버튼 태그에 있는 onClick 이벤트는 → 이 버튼을 클릭하면 this(=이 State 컴포넌트)에 있는 handleColor 라는 함수를 실행시켜준다.

② 함수실행

onClick 이벤트의 발생으로 this.handleColor라는 함수가 실행된다. 이 함수는 this.setState를 실행해주는 함수이다.

③ setState

setState 함수가 실행되면, this.setState({color: 'blue'})
→ this.state 에서 key가 color인 값이 'blue' 로 변경된다.

④ render 함수 호출

state가 변경(업데이트)가 되면 자동으로 render함수가 호출된다. render함수에는 화면에 보여줄 요소들이 jsx문법의 형태로 들어있는것이며, state가 바뀌었기 때문에 변경된 새로운 state 값을 반영해서 화면에 보여준다.
결국 이 과정에서는 <h1> 태그의 글자 색상이 blue로 바뀌게 되었다 👀

profile
Becoming a front-end developer 🌱

0개의 댓글