[Main] React의 Props와 State 정리

안녕하세요. 현고미입니다

오늘은 React의 Props와 State에 대해 알아보려고 합니다.

이 두 가지 개념은 React 애플리케이션을 구축하고 관리하는 데 아주 중요한 역할을 합니다.

자, 함께 살펴볼까요?

 

Props와 State 란?

Props(속성)와 State(상태)는 React 컴포넌트가 데이터를 전달하고 관리하는 방법을 의미합니다.

이 둘은 각자 다른 역할을 하지만, 모두 컴포넌트 간의 데이터 흐름을 원활하게 만들어줍니다.

 

1) Props: 정보 전달의 편리함

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.

이 데이터는 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없습니다.

이런 특징 덕분에 데이터 흐름을 예측 가능하게 만들어줍니다.

 

Props를 사용하면 컴포넌트 간에 재사용성을 높일 수 있고, 컴포넌트의 구조를 깔끔하게 유지할 수 있습니다.

예시 코드를 통해 살펴보겠습니다:

// 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달
function ParentComponent() {
  const greeting = "안녕하세요!";
  return <ChildComponent greeting={greeting} />;
}

// 자식 컴포넌트에서 props 사용
function ChildComponent(props) {
  return <p>{props.greeting}</p>;
}

2) State: 동적인 상태 관리

State는 컴포넌트 내부에서 유동적인 데이터를 관리하기 위해 사용됩니다.

이 데이터는 변경 가능하며, 컴포넌트가 다시 렌더링될 때마다 업데이트될 수 있습니다.

주로 사용자 입력, API 요청 결과, 시간 경과 등과 같은 변화하는 데이터를 다룰 때 활용됩니다.

예시 코드:

class TimerComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.timerID = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000);
  }

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

  render() {
    return <p>경과 시간: {this.state.seconds}초</p>;
  }
}

정리하며

Props와 State는 React 애플리케이션 개발의 핵심 개념입니다.

Props는 컴포넌트 간 데이터 전달에, State는 컴포넌트 내부의 동적 데이터 관리에 사용됩니다.

이 두 가지 개념을 잘 이해하고 활용하면, 보다 유연하고 효율적인 React 애플리케이션을 구축할 수 있을 것입니다.

이상으로 오늘의 주제, 'React의 Props와 State의 특징'에 대해 알아보았습니다. 

블로그를 방문해주셔서 감사합니다. 

더 많은 정보와 팁을 원하신다면 제 블로그를 자주 찾아주세요! 🚀

참고 출처

- React 공식 문서: https://reactjs.org/docs/getting-started.html