props와 state

React 컴포넌트의 핵심: props와 state 심층 분석

React 컴포넌트를 개발하다 보면 자주 마주치게 되는 두 가지 개념이 바로 props와 state입니다. 이 둘은 컴포넌트의 데이터를 관리하는 데 있어서 핵심적인 역할을 하며, 올바르게 이해하고 활용하는 것이 효과적인 React 개발을 위한 필수 조건입니다.

props: 부모에서 자식으로 전달되는 데이터

• 정의: props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용되는 일종의 속성입니다. HTML 태그의 속성과 비슷하게 생각할 수 있습니다.
• 특징:
  • 읽기 전용: 자식 컴포넌트 내에서는 props의 값을 직접 변경할 수 없습니다.
  • 하향식 데이터 흐름: 부모에서 자식으로 한 방향으로만 데이터가 전달됩니다.
  • 컴포넌트 간 데이터 공유: 부모 컴포넌트에서 관리하는 데이터를 자식 컴포넌트에서 사용할 수 있도록 합니다.
• 사용 예시:

  // 부모 컴포넌트
  function Parent() {
    const name = '홍길동';
    return <Child name={name} />;
  }
  
  // 자식 컴포넌트
  function Child({ name }) {
    return <div>안녕하세요, {name}님!</div>;
  }
  

  위 예시에서 name이라는 props를 통해 부모 컴포넌트에서 정의된 이름을 자식 컴포넌트로 전달하고 있습니다.

728x90

state: 컴포넌트 내부에서 관리되는 데이터

• 정의: state는 컴포넌트 내부에서 관리되는 데이터로, 컴포넌트의 상태를 나타냅니다.
• 특징:
  • 변경 가능: 컴포넌트 내부에서 setState 메서드를 사용하여 state의 값을 변경할 수 있습니다.
  • 렌더링 재실행: state가 변경되면 해당 컴포넌트와 자식 컴포넌트가 다시 렌더링됩니다.
  • 컴포넌트 내부 로직: 사용자 상호 작용, 타이머, 데이터 가져오기 등 컴포넌트 내부에서 발생하는 다양한 동작을 관리하는 데 사용됩니다.
• 사용 예시:

  class Counter extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: 0 };
    }
  
    handleClick = () => {
      this.setState({ count: this.state.count + 1 });
    };
  
    render() {
      return (
        <div>
          <p>현재 카운트: {this.state.count}</p>
          <button onClick={this.handleClick}>증가</button>
        </div>
      );
    }
  }
  

   

   
  위 예시에서 count라는 state를 사용하여 클릭 시 카운트 값이 증가하는 간단한 카운터 컴포넌트를 만들었습니다.

props와 state의 차이점 요약

데이터 흐름	부모 -> 자식	컴포넌트 내부
변경 가능성	불가능	가능 (setState 사용)
용도	컴포넌트 간 데이터 전달	컴포넌트 내부 상태 관리

 

props와 state를 효과적으로 사용하기 위한 팁

• props는 읽기 전용: 자식 컴포넌트에서 props를 직접 수정하려고 하지 마세요.
• state는 최소화: 불필요한 state를 만들지 않고, 꼭 필요한 데이터만 관리하세요.
• Context API 활용: 깊이 중첩된 컴포넌트 계층에서 데이터를 전달해야 할 경우 Context API를 고려해 보세요.
• Redux: 대규모 애플리케이션에서는 상태 관리 라이브러리인 Redux를 사용하여 복잡한 상태를 효율적으로 관리할 수 있습니다.

결론

props와 state는 React 컴포넌트의 데이터 흐름을 이해하는 데 있어서 가장 중요한 개념입니다. 각각의 특징을 정확히 파악하고, 적절하게 사용하면 더욱 유연하고 효율적인 React 애플리케이션을 개발할 수 있습니다.