React) state, props

state

`state`는 `JSX`에서 제공하는 컴포넌트 내에서 상태를 관리하기 위해 사용되는 기능입니다. `Hook` 기능이 개발이 되기 전까지는 클래스 컴포넌트 내에서 모든 `state` 생명주기를 관리 해왔습니다. 그렇기 때문에 오래된 문서를 보게 되면 제어 컴포넌트를 생성하게 되면 클래스 컴포넌트를 활용해 개발하는 것을 볼 수 있습니다. 

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

 

이러한 클래스 컴포넌트를 사용하는 주 된 이유는 `state`의 생명주기를 모두 하나의 클래스에서 관리할 수 있기 때문입니다. 그렇다고 해서 함수형 컴포넌트에서는 불가능하냐 라는 것인데, `JavaScirpt`는 함수형과 클래스는 같은 `prototype`의 구조를 가지므로 함수형으로도 개발이 가능합니다. 하지만 이렇게 클래스 컴포넌트로 생성하는 개인적 이유로는 개발자의 편의성 때문이지 않을까 생각합니다. 

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);

 

`state`를 사용하면서 주의해야 하는 것은 `setState`를 어떤 상황에서 사용해야 하는 것인가 입니다. 다음과 같이 아래와 같은 코드가 있다고 보겠습니다 

this.state.comment = 'Hello';

 

해당 코드는 변경이 되어도 `React DOM` 에서 변경을 감지하지 못하여 변경을 하지 못합니다. 그렇기 때문에 자동으로 변경을 감지하게 하려면 `setState` 함수를 사용하여야 합니다 .

this.setState({comment: 'Hello'});

 

`setState` 함수는 비동기적으로 작동을 합니다. 그러므로 다른 동기적 함수에 의존하지 않도록 코드를 작성하여야 합니다. 동기적 함수와 의존을 하게 되어야 하는 환경이라면 콜백 함수로 작성하여 `setState`함수를 수행토록 하여야 합니다. 

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

 

state vs props

먼저, `state`는 유상태와 무상태로 나뉘게 됩니다. 여기서 유 유상태 컴포넌트는 자신의 상태를 변경할 수 있는 함수를 자식 컴포넌트에게 `props`로 전달할 수 있습니다. 이를 통해 자식 컴포넌트도 상태 변화를 일으킬 수 있습니다. 무상태 컴포넌트는 상태를 가지지 않으므로, 주로 부모 컴포넌트로부터 받은 `props` 를 이용하여 렌더링만 수행하며, 자체적으로 데이터를 변경하지는 않습니다.

 

여기서 우리가 알아야 하는 것은 `props`와 `state`의 차이점 입니다. `React` 문서에서 특히나, 이 두가지의 차이점에 대해서 주의 깊게 알려주고 있습니다. 

 

state

• 내부 상태 관리: `state`는 컴포넌트 내부에서 관리되며, 컴포넌트의 상태를 나타내는 데이터를 포함합니다. 이 상태는 주로 사용자와의 상호작용이나 서버 응답 등으로 인해 동적으로 변경될 수 있습니다.
• 컴포넌트 특유의 정보: 각 컴포넌트는 자신만의 `state`를 가질 수 있으며, 이를 직접 관리하고 업데이트 합니다. 
• 동적인 데이터: 사용자의 입력, 버튼 클릭, 데이터 수신 등에 의해 변경될 수 있는 동적 데이터를 다룹니다. 
• 변경 가능: 컴포넌트는 자신이 `state`를 변경할 수 있고, 이는 일반적으로 `setState` 메서드를 통해 수행됩니다. 

 

props

• 데이터 전달: `props`는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다. 이는 컴포넌트가 외부에서 받은 데이터를 처리하거나 표시할 때 중요합니다.
• 읽기 전용: `props`는 읽기 전용이며, 컴포넌트는 자신에게 전달된 `props`를 변경할 수 없습니다. `props`를 변경하려면 부모 컴포넌트에서 변경해야 합니다.
• 재사용성 증가: `props`를 통해 동일한 컴포넌트에 다른 데이터를 전달함으로써 컴포넌트의 재사용성을 높일 수 있습니다.
• 함수 포함 가능: `props`는 데이터뿐만 아니라 함수도 포함할 수 있으며, 이를 통해 부모 컴포넌트로부터 자식 컴포넌트로 특정 작업을 수행하는 함수를 전달할 수 있습니다.

 

state와 props의 차이점

• 변경 가능성: `state`는 컴포넌트 내부에서 변경할 수 있지만, `props`는 변경할 수 없습니다.
• 용도: `state`는 컴포넌트 내부에서 데이터를 관리하기 위해 사용되며, `props`는 컴포넌트 간에 데이터를 전달하기 위해 사용됩니다.
• 제어: `state`는 컴포넌트 자신이 제어할 수 있는 반면, `props`는 부모 컴포넌트로부터 제공받아 자식 컴포넌트가 사용합니다.

 

state 끌어올리기

`state`를 사용하다보면 하나의 자식 컴포넌트에서 사용되는 상태를 여러 컴포넌트에서 사용하여야 하는 경우가 생기게 됩니다. 이럴 때, `state` 끌어올리기를 수행하여 상위 컴포넌트에서 상태를 관리를 할 수 있도록 하고, 기존 자식 컴포넌트들은 유상태 컴포넌트가 될 수 있도록 하여야 합니다.