props와 state의 차이점

어제 custom component를 다루면서 props와 state 부분을 짚고 넘어가야겠더라고요!
그래서 chat gpt와 공식문서를 참조하면서 리액트 props와 state의 차이점 정리해보았습니다
 
 

 
 


 

Q. 리액트에서 props와 state의 차이점

React에서 props와 state는 모두 컴포넌트의 데이터를 다루는 데 사용됩니다.
그러나 두 가지 개념은 목적과 사용 방법에서 차이가 있습니다.

props는 "properties"의 줄임말로, 컴포넌트가 외부에서 받는 데이터를 의미합니다. 즉, 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터입니다. props는 읽기 전용이므로 컴포넌트 내부에서 직접 수정할 수 없습니다. 대신, 부모 컴포넌트에서 값을 변경하여 자식 컴포넌트가 새로운 값을 받게 됩니다. props는 컴포넌트 간에 데이터를 전달하는 데 사용됩니다.

반면에 state는 컴포넌트 내부에서 관리되는 데이터를 의미합니다. 즉, 컴포넌트 자체가 가지고 있는 데이터입니다. state는 컴포넌트의 상태를 변경하거나 업데이트할 때 사용됩니다. state는 읽기와 쓰기 모두 가능하며, setState() 함수를 사용하여 값이 변경됩니다. 일반적으로 사용자 입력 또는 네트워크 응답과 같은 이벤트에 응답하여 state를 업데이트합니다.

즉, props는 데이터의 흐름을 부모에서 자식으로, state는 컴포넌트 내부에서 관리하는 데이터를 의미합니다. props는 읽기 전용이며 컴포넌트 간에 데이터를 전달하는 데 사용되고, state는 컴포넌트 내부에서 변경 가능하며 컴포넌트의 상태를 변경 또는 업데이트할 때 사용됩니다.
 
 
 
 
 

Q. 음 그런데 props로 state를 전달할 수도 있지 않니?

네, 맞습니다. React에서는 props를 통해 state를 전달할 수 있습니다.
부모 컴포넌트에서 state 값을 자식 컴포넌트로 props로 전달할 수 있습니다. 이 경우, 자식 컴포넌트에서는 전달받은 props를 사용하여 state 값을 사용할 수 있습니다. 이를 통해 부모 컴포넌트에서 state 값을 관리하고, 자식 컴포넌트에서 해당 값을 사용하면서도 자식 컴포넌트는 해당 state 값을 직접 변경하지 않도록 할 수 있습니다.

예를 들어, 부모 컴포넌트에서 이름과 나이 값을 가지고 있는 state를 관리하고, 이 값을 자식 컴포넌트로 전달하여 자식 컴포넌트에서 해당 값을 출력하는 경우, 부모 컴포넌트에서는 state 값을 변경하고, 자식 컴포넌트에서는 전달받은 props를 사용하여 해당 값을 출력합니다. 이를 통해 자식 컴포넌트에서는 state 값을 직접 변경하지 않아도 되므로, state 값의 무결성을 보존할 수 있습니다.



 
 
 

Q. props로는 state나 state 변경함수, 변수, 함수 모두 전달할 수 있는 거지?

네, 맞습니다. React에서는 props를 통해 state나 state 변경 함수, 변수, 함수 모두 전달할 수 있습니다.

state나 state 변경 함수를 props로 전달하는 경우, 자식 컴포넌트에서 해당 값을 사용하거나 호출할 수 있습니다. 변수나 함수를 props로 전달하는 경우, 자식 컴포넌트에서 해당 변수나 함수를 사용할 수 있습니다. 이를 통해 부모 컴포넌트에서 정의한 값이나 함수를 자식 컴포넌트에서 사용할 수 있으며, 이를 통해 컴포넌트 간의 데이터 전달이나 함수 호출을 할 수 있습니다.





 
 

Q. props 사용하는 방법을 단계별로 알려줘

React에서 props를 사용하는 방법을 간단한 단계로 알려드리겠습니다.

1. props 정의하기: 부모 컴포넌트에서 자식 컴포넌트로 전달할 데이터를 정의합니다.

function ParentComponent() {
  const data = { name: "John", age: 30 };
  return (
    <ChildComponent data={data} />
  );
}

2. props 받아오기: 자식 컴포넌트에서 props를 받아옵니다.

function ChildComponent(props) {
  // props.data를 이용하여 데이터를 사용합니다.
  return (
    <div>
      <p>Name: {props.data.name}</p>
      <p>Age: {props.data.age}</p>
    </div>
  );
}

 
 
 
 
 

Q. props로 state를 전달하는 예시를 보여줄래?

 

import React, { useState } from "react";

function ParentComponent() {
  const [count, setCount] = useState(0);
  return (
    <ChildComponent count={count} setCount={setCount} /> // 부모 컴포넌트에서 props 정의하기
  );
}

function ChildComponent(props) {
  // props.count와 props.setCount를 이용하여 state를 사용합니다.
  return (
    <div>
      <p>Count: {props.count}</p> 
      <button onClick={() => props.setCount(props.count + 1)}>Increment</button>
      // 자식 컴포넌트에서 props 받아오기
    </div>
  );
}

 
 
 
 
 

---

 
+ props 전달할때 간단한 방법
 

Q. 위의 코드에서 ChildComponent의 () 안에 props를 넣는 대신, {count}나 {setCount} 로 정의한 props 자체를 넣을 수도 있어?

 
네, ChildComponent에서 props를 구조 분해 할당을 통해 count와 setCount를 추출하고, 그것들을 직접 사용할 수 있습니다.
 ChildComponent 파라미터 안에 {}을 치고, 위의 props 작명을 그대로 가져옴!
 

import React, { useState } from "react";

function ParentComponent() {
  const [count, setCount] = useState(0);
  return (
    <ChildComponent count={count} setCount={setCount} />
  );
}

function ChildComponent({ count, setCount }) { // {}를 쳐서 위에 정의된 props를 작명그대로 가져옴!!
  return (
    <div>
      <p>Count: {count}</p> // {작명} 그대로
      <button onClick={() => setCount(count + 1)}>Increment</button> {작명} 그대로
    </div>
  );
}

 
위와 같이 구조 분해 할당을 통해 props를 분해하면, props.count 대신 count를 사용할 수 있으며, props.setCount 대신 setCount를 사용할 수 있습니다.

이 방식을 사용하면, 코드가 좀 더 간결해지고 가독성이 좋아집니다. 그러나 이 방법이 언제나 적합한 것은 아니며, 상황에 따라 다른 방식이 더 적합할 수 있습니다.
 
 
 
 
 
 

Q. 위의 방식을 어떤 문법이라고 불러?

 
위에서 사용된 방식을 구조 분해 할당(Destructuring Assignment)이라고 부릅니다. 구조 분해 할당은 ES6(ES2015)부터 추가된 기능으로, 객체나 배열에서 필요한 값들만 추출하여 변수에 할당할 수 있도록 해줍니다.

위의 코드에서는 ChildComponent의 props를 구조 분해 할당을 통해 { count, setCount }로 추출했으며, 이렇게 추출된 count와 setCount는 이후에 직접 사용됩니다.