[React] props와 state의 차이

리액트는 컴포넌트 단위로 나눠서 작업하기에 최적화되어 있다.
그래서 작은 컴포넌트 단위로 잘개 쪼개서 작업하고 또 합쳐서 큰 컴포넌트에 들어갈 수도 있다. 부모와 자식이 존재할 수 있다는 것이다.

이런 사전 지식을 알고 나서 props와 state를 인지하게 되면 둘의 차이를 보다 쉽게 알 수 있다.

• 참고: 본 블로그의 리액트 사용 예시는 모두 리액트 훅스(함수형)를 사용하고 있습니다. 틀린 내용이 있다면 댓글로 피드백 부탁드립니다 :)

props란?

• 자식 컴포넌트에서 상속받아 쓰는 부모 컴포넌트의 상태 값
• 사용 예시

    function Welcome(props) {  // 자식 컴포넌트
      return <h1>Hello, {props.name}</h1>;
    }

    function App() {  // 부모 컴포넌트
      return (
        <div>
          <Welcome name="Sara" />
          <Welcome name="Cahal" />
          <Welcome name="Edite" />
        </div>
      );
    }

    ReactDOM.render(  
      <App />,  // 부모 컴포넌트를 렌더링 
      document.getElementById('root')
    );

state란?

• 현재 컴포넌트에서 변하는 상태 값
• 사용 예시

    import React, { useState } from 'react';

    function Example() {
      // Example 컴포넌트에서 변하는 상태 값인 count,
      // count를 업데이트 시켜주는 setCount
      const [count, setCount] = useState(0);

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }

사용 예시 참조

• 리액트 공식 홈페이지