State, Props

State

React에서 가장 중요한것이라고 하면, 아마 state와 props일것이다.
그중, 먼저 state에 대해 알아보도록 하자.

state는 일반적으로, Class Component에 존재한다.(Hook을 사용하면 함수형에서도 state를 사용 할 수 있지만 그건 다음에..)

State는 단어의 뜻대로 상태값이라는 의미를 가지고 있고, 이 상태값은 바로 state가 있는 클래스 컴포넌트가 자체적으로 가지고 있는 값이라는 의미이다.

오히려 더 헷갈릴 수 있는 설명이기에 더 풀어서 설명하자면,

Component는 UI를 그리기 위한 구성단위이고, State는 UI를 그리기 위한 정보를 담고 있는 정보(Object)

라고 할 수 있을것이다.

기본적으로 Object의 형태를 하고 있고, 각 컴포넌트에서 어떤 데이터를 나타낼것인지를 기록하는 것이 state인것이다.

물론 이는 고정값이 아니며, 메서드를 통해 재정의 할 수 있다.

State의 사용

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;

위의 코드 예시로 state가 어디에 정의 되는지 알 수 있을것이다.

return은 JSX를 반환시키고, state는 render가 실행 되기 전에 선언을 해두는 방식이다.
이렇게 해야, 컴포넌트가 렌더링 될때, constructor가 호출 되는 동시에 state가 선언 되고, 여기에 저장 된 state의 값을 가지고 render메서드가 컴포넌트를 렌더링 하는 흐름이 완성 되기 때문이다.
때문에, 당연하겠지만 처음에 선언 되는 state는 default값이 되는것이다.

State를 변경하려면?

당연한 이야기이겠지만, state를 선언 해 둔 값에서 변경이 불가능하다면, 큰 의미를 가지지 못했을것이다.
우리가 원하는것은 여러가지 데이터를 입력했을때, 각각의 데이터를 담아낼 프레임이지, 하나의 값만 가지는 고정형 부품이 아니기 때문이다.

물론, state의 값은 앞서 말한 것 처럼 변화 시킬 수 있는 값이다.
다만, 일반적인 방법을 사용해서는 변화를 반영 시킬 수 없다.

변화를 반영 시킬 수 없다 라고 한것은, state값은 변해도, 그 값이 반영 되지 않는다는 이야

만약 constructor에서 한번 선언한 state를 다른 메서드에서

changeColor = () => {
  this.state = {
  color : 'blue';
}
}

처럼 직접 변화시켜도, state값은 변할 지언정 렌더링 된 컴포넌트의 색은 변하지 않는다.

그러면 어떻게 해야할까?
react에는 이를 위해, state를 변화 시키는 메서드를 내장하고 있다.
그것이 바로 setState이다.

setState메서드를 사용하는 방법은

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

와 같이, setState의 인자로 바꿀 state의 key와 value를 전달해서 state를 바꾼다.

여기서 setState와 직접 지정하는것의 차이가 발생하는데, setState는 render메서드를 호출 해서, 다시 렌더링 한다는 차이점이 있다.

즉, 바뀐 state를 가지고 다시 해당 컴포넌트를 업데이트 한다는것이다.

여기서 하나 의문점이 생기는데,

그렇다면, render도 메서드이니, 직접 state를 변경하고 render를 호출하면 컴포넌트가 업데이트 될까?

하는 점이었다.

결과적으론 다시 렌더링 되지 않았고, 아마 setState에는 다른 로직이 있을것이라 생각했다.

Props

props는 properties의 약자로, 속성이라는 뜻의 영단어를 축약한 키워드이다.
props는 다른 컴포넌트가 없고, 하나의 컴포넌트만 있다면 사용할 필요가 없다.

하지만, 다른 컴포넌트가 있고, 컴포넌트간 데이터전달이 필요할 경우 사용된다.

props도 물론 object의 형식을 따르고, 전달 되는 값으로 여러가지를 넣을 수 있지만,
함수를 전달 할 수도 있다.

부모 컴포넌트에서 이벤트를 할당하고, 그걸 자식컴포넌트에서 사용할때, 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;

여기까지가 자식 컴포넌트라 할때,
부모 컴포넌트에선 state를 바꾸는 메서드로서 handleColor를 선언했다.
그리고, 이를 자식컴포넌트에 속성(properties)으로서 전달했다.(<Child titleColor={this.state.color} changeColor={this.handleColor}/>)
자식 컴포넌트에 와서, 이 props를 받게 되는데,
현재 전달 된 props에는 두가지가 있다.
하나는 자식 컴포넌트의 색을 state에 따라 바꾸는 titleColor={this.state.color}와, 메서드로서 정의한 changeColor={this.handleColor} 두가지의 props이다.

이를 자식 컴포넌트에서 사용 할땐, 위의 코드와 같이 this.props.Name(Name은 props의 이름)으로 해당 props를 사용할 수 있다.
이때, props를 한번만 사용 할 수 있는것은 아니며, 해당 값이 필요한곳에 넣을 수 있다.

주의사항

이처럼 react는 state를 이용해 data를 UI에 담기는 정보로서 사용하고, 다른 컴포넌트에 props라는것을 사용해서 전달 할 수 있다.

하지만 유의해야 할 것은, react의 데이터 전달 방향은 위에서 아래, 즉 부모에서 자식으로만 흐른다.

풀어서 설명하자면, 부모는 자식에게 자신의 state를 props로서 전달 할 수 있지만, 자식은 자신의 state를 부모에게 값으로서 전달 할 수 없다.

이럴땐, state를 보다 상위 컴포넌트에 선언을 해두고, 그 값을 props로 전달 받을 필요가 있다.

물론 그렇게 되면 그 하위에 있는 컴포넌트들에게 모두 props를 전달 해야 하는 단점이 생긴다.
그리고 그걸 위해서, 상태관리가 필요해지는것이다.
이는 추후에 다시 다루도록 하겠다.