JavaScript의 Props와 State

JavaScript의 Props와 State에 대해 알아보자.

나무소리 채널의 YouTube 영상을 참고하였습니다.

🏹 Props

Props

Props는 부모 컴포넌트로부터 전달받은 읽기 전용 데이터이다. props는 컴포넌트 간에 데이터를 전달하고 컴포넌트를 구성하는 데 사용된다. props는 컴포넌트가 생성될 때 전달되며, 그 이후에는 읽기 전용으로 사용된다.
.
.
즉, 자신을 포함하고 있는 상위 컴포넌트로부터 데이터를 전달 받으며 이 값을 받은 하위 컴포넌트에서 전달받은 데이터는 변경이 불가능이다.

그렇다면 어떻게 데이터를 변경할 수 있을까?
이어지는 내용에서 알아보자.

🏹 State

State

state는 React 컴포넌트에서 관리되는 동적인 데이터아더. 컴포넌트의 상태를 나타내며, 컴포넌트의 생명주기 동안 변경가능하다.

클래스 컴포넌트에서의 state

클래스 컴포넌트에서는 state를 클래스 내부에서 this.state로 접근하고 변경한다. state는 객체 형태로 선언되며, setState 메서드를 사용하여 state를 변경한다. setState를 호출하면 state가 변경되고 컴포넌트가 다시 렌더링된다.

함수형 컴포넌트에서의 state

함수형 컴포넌트에서는 React Hooks 중 하나인 useState를 사용하여 state를 관리한다. useState는 초기 상태와 해당 상태를 업데이트하는 함수를 반환한다. state의 값을 변경하면 컴포넌트가 다시 렌더링된다.

컴포넌트의 렌더링과 state

state의 값이 변경되면 React는 컴포넌트를 리렌더링하여 업데이트된 데이터를 반영한다. state를 변경하면 React는 Virtual DOM을 사용하여 변경된 부분만 실제 DOM에 반영하고 최적화된 업데이트를 수행한다.

state의 범위

state는 해당 컴포넌트 내에서만 유효하다. 즉, state는 컴포넌트에서 선언된 후에 해당 컴포넌트의 라이프사이클 동안만 사용할 수 있다.

State의 초기화와 변경

state의 값을 초기화하는 것은 객체 필드의 선언부 or 생성자에서 구현한다.
state의 값을 변경하는 것은 setState, useState 메서드를 사용한다.

클래스 컴포넌트에서의 초기화와 변경

constructor에서 this.state를 사용하여 초기 state 값을 설정한다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  // ...
}

클래스 컴포넌트에서 state를 변경하기 위해서는, setState 메서드를 사용한다. setState는 변경할 state 객체를 전달하거나 이전 state를 인자로 받는 함수를 전달한다.

this.setState({ count: 1 }); // 객체 전달
jsx
Copy code
this.setState((prevState) => ({ count: prevState.count + 1 })); // 함수 전달

함수형 컴포넌트에서의 초기화와 변경

React Hooks 중 하나인 useState를 사용한다. useState는 초기 state 값을 반환하고, 해당 값을 변수에 할당한다.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  // ...
}

함수형 컴포넌트에서는 state를 변경하기 위해 setCount와 같은 setState 함수를 사용한다. setState 함수에 새로운 state 값을 전달하여 변경할 수 있다.

setCount(1);

🏹 Props와 State

간단한 예시로 설명해보면, 아래의 코드에서 name은 props로 전달되고 count는 state로 관리된다.

import React, { Component } from 'react';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    const { name } = this.props;
    const { count } = this.state;

    return (
      <div>
        <h1>Hello, {name}!</h1>
        <p>Count: {count}</p>
      </div>
    );
  }
}

export default ExampleComponent;