리액트의 State 와 Props 에 대한 내용과 Event 를 통해 이를 활용하는 내용 등을 포함합니다. 😊

리액트 State 📋

리액트를 통해 동적 웹을 구현하고자 할 때, 빼놓을 수 없는 없는 개념 중 하나가 State 다. State 는 말 그대로 상태를 의미하며, 그 상태의 대상은 해당 컴포넌트를 향한다.

또한, State 는 컴포넌트의 UI 정보를 지닌 객체이기도 하다. 이게 무슨 의미인지 클래스형 컴포넌트에서 State 를 어떻게 정의하는 지에 대한 내용과 함께 알아보자.

import React, { Component } from 'react';

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;

State 를 위 예시를 활용하여 설명해보자. 일단 constructor 를 통해 state 의 초기 값을 설정해준다. 이 과정에서 해당 super() 를 꼭 넣어주어야 한다. 해당 super() 를 왜 필수로 사용해야 하는지에 대해서는 명확히 이해하지 못했기 때문에, 별도로 기재한다.

💡 super() 에 대하여

자바스크립트의 class 에서 super 란 부모 클래스의 생성자 내지 메서드를 불러옴을 의미한다. extends 를 사용하여 부모 클래스를 통해 클래스를 생성하면 super() 를 사용할 수 있게 된다. 그렇게 되면 다음과 같은 상황을 만들 수 있다.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first+this.second;
    }
}
class PersonPlus extends Person{
    constructor(name, first, second, third){
        super(name, first, second);
        this.third = third;
    }
    sum(){
        return super.sum()+this.third;
    }
}

위와 같이 Person 이라는 class 에서 파생된 PersonPlus 에서 super() 를 사용하여 부모 클래스의 생성자를 공유하고, super 를 통해 부모의 메서드를 사용할 수 있다.

리액트에서는 해당 super() 를 this 사용의 조건으로 강제한다는 부분이 있는데 해당 내용에 대해서는 심화 학습이 필요하기 때문에, 이번 리액트 state 에서는 생략하겠다.

setState() 🔧

변수가 아닌 state 를 사용하는 장점은 값을 동적으로 변경할 수 있을 때 진가를 발휘할 것이다. setState() 는 이러한 state 값을 변경할 수 있는 방법이다. 위 예시에서는 setState() 를 통해 요소의 색을 변경하고자 하였다.

  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>
    );
  }
}

해당 예시에서 setState() 를 통해 color 값을 blue 로 바꾼다는 것을 handelColor 라는 arrow function 을 통해 정의해준다. 그리고 h1 태그에 style 속성에서 color 에 해당하는 값으로 해당 state 값을 대입하고, 해당 state 값을 변경하기 위해 미리 정의해두었던 함수를 button 태그의 onClick 이벤트에 연동하여 대입해준다. 그렇다면 버튼을 클릭했을 때, h1 태그의 텍스트 색이 변화하는 것을 확인할 수 있을 것이다.

위와 같이 state 값을 변화시켜 동적인 웹 구축에 활용할 수 있다. 추가적으로, 함수형 컴포넌트의 경우 useState 라는 것을 활용하여 state 값과 변경 함수에 대해 일괄적으로 정의할 수 있다.

props 🗃️

state 에 대해 이해했다면 이제 props 에 대해 이해하면서 컴포넌트를 다루기 위한 준비를 확실하게 해보자. props 는 말 그대로 컴포넌트 속성 값을 의미하며, 자세히 말하자면 부모 컴포넌트로 부터 전달 받은 데이터 객체를 의미한다.

이게 사람 말인가 싶다면 그게 정상이다. 😊 자괴감에 빠지지 말고 좀 더 쉽게 알아보자.

props 를 통한 데이터 전달 📩

// Parent.js

import React from 'react';
import Child from '../pages/Child/Child';

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

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
	<Child titleColor={this.state.color}/>
      </div>
    );
  }
}

export default State;

// Child.js
import React from 'react';

class Child extends React.Component {
  render() {
		// console.log(this.props);

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
      </div>
    );
  }
}

export default State;

위와 같이 두 가지 컴포넌트가 정의되어 있다고 가정하자. Parent 컴포넌트는 아래 작성된 Child 컴포넌트를 불러와 사용하고 이름대로 부모 자식의 관계를 갖는다. 해당 상황에서 Child 는 Parent 컴포넌트의 값에 접근하기 위해 어떻게 해야 할까?

우선 위 예시의 Parent 컴포넌트에서 Child 컴포넌트를 불러와 사용하는 과정에서 props 를 넘기기 위해 Parent 의 state 값인 blue 를 this.state.color 를 통해 전달해준다. 그리고 해당 props 를 titleColor 라고 정의한다.

그렇다면 이제 Child 컴포넌트는 titleColor 라는 값에 props 객체를 통해 접근 가능하다. 그렇게 Child 컴포넌트에서 this.props.titleColor 를 통해 넘겨 받은 props 값에 접근하고 이를 활용할 수 있는 것이다.

또한 props 를 통해 state 값 뿐만 아니라 setState 를 활용하는 event handler 또한 전달할 수 있다.

props 를 통한 함수 전달 📬

// Parent.js

import React from 'react';
import Child from '../pages/Children/Children';

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

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

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
	<Child titleColor={this.state.color} changeColor={this.handleColor}/>
      </div>
    );
  }
}

export default State;

// Child.js

import React from 'react';

class Child extends React.Component {
  render() {
		// console.log(this.props);

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
	<button onClick={this.props.changeColor}>Click</button>
      </div>
    );
  }
}

export default State;

이어지는 예시는 setState 부분에서 button 을 통해 h1 태그의 색을 바꾸는 것과 같은 예시이다. 다른 점이 있다면, event handling 을 부모 컴포넌트가 아닌 자식 컴포넌트에서 진행한다는 점이다. 그러기 위해서 부모 컴포넌트에서 정의한 state 를 변경할 수 있는 setState 가 들어간 event handler 함수를 위와 같이 전달하는 것이다.

함수를 전달하는 방식은 앞의 값 전달 방식과 동일하다. changeColor={this.handleColor} 를 통해 전달하고자 하는 props 함수를 changeColor 라는 이름으로 전달한다. 그리고 전자와 마찬가지로 자식 요소에서 props 객체를 통해 함수를 전달 받아 이벤트에 바로 사용하면 된다.

위와 같은 방식을 활용하면 컴포넌트의 컴포넌트화를 진행하는 과정에서 자유롭게 부모 자식의 데이터를 공유할 수 있다.

마무리 🧾

사실 학습하다 보니, state 와 props 라는 부분은 실제로 적용하면서 학습하는 과정에서 더욱 이해가 깊어지는 것 같다. 이를 활용하여 진행 중인 프로젝트의 컴포넌트화를 원활히 진행한 후 학습했던 내용을 되짚어 보는 것도 좋을 것 같다.

• state 는 컴포넌트의 상태이며 컴포넌트가 갖는 값을 의미한다.
• props 란 컴포넌트 속성으로 부모 컴포넌트로 부터 상속 받는 데이터를 의미한다.
• setState 를 통해 state 값을 변경할 수 있으며, 이를 이벤트 핸들링에 활용할 수 있다.
• props 를 통해 부모 요소의 state 를 자식에 반영할 수 있고, 이를 변경할 수도 있다.(State 끌어올리기)
  
  

그럼 20000 👍🏻