[React] props와 state에 대해

props

 

설명

 

• props는 부모 컴포넌트로부터 자식 컴포넌트로 전달할 때 사용
• 읽기 전용 데이터
• props는 컴포넌트 내부에서 변경할 수 없으며, 부모 컴포넌트에서 변경된 경우에만 업데이트
• 자식 컴포넌트에서 props를 사용하여 전달받은 데이터를 화면에 렌더링하거나 다른 작업에 활용 가능

 

---

 

사용하는 상황

 

데이터 전달

 

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 할 때 props를 사용
• 예를 들어, 사용자 이름, 설정값 등을 부모 컴포넌트에서 자식 컴포넌트로 전달할 때 props를 활용

 

읽기 전용 데이터

 

• props는 읽기 전용이기 때문에, 자식 컴포넌트에서 직접 수정할 수 없는 데이터를 전달할 때 사용

 

주의할 점

 

읽기 전용

 

• 읽기 전용이므로, 자식 컴포넌트에서 직접 수정하려고 시도하면 에러가 발생
• 따라서 props를 사용하는 컴포넌트에서는 해당 데이터를 변경하지 않아야 한다.

 

데이터 유형 검사

 

• props로 전달되는 데이터의 유형을 검사하고 유효성을 확인하는 것이 좋다.
• PropTypes 또는 TypeScript와 같은 도구를 사용하여 props의 유효성을 검증 가능

 

---

 

예시

 

import React from 'react';

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

export default Greeting;

 

 

---

 

state

 

설명

 

• state는 컴포넌트 내부에서 관리되는 상태 데이터
• 컴포넌트가 생성될 때 초기값을 설정하고, 이후 변경될 수 있다.
• state는 컴포넌트 내부에서 변경할 수 있으며, 변경되면 리액트는 자동으로
  컴포넌트를 다시 렌더링하여 변경된 상태를 화면에 반영
• 주로 사용자의 입력값이나 컴포넌트의 동적인 상태를 관리하는 데에 활용

 

---

 

사용하는 상황

 

내부 상태 관리

 

• 컴포넌트 내부에서 관리해야 하는 동적인 상태를 저장하고 업데이트할 때 state를 사용
• 예를 들어, 사용자의 입력값, 토글 버튼의 상태, API에서 받아온 데이터의 상태 등을 관리하는 데에 state를 활용

 

컴포넌트의 렌더링 조건

 

• state는 값에 따라 컴포넌트의 렌더링 여부를 결정할 때 state를 사용
• 조건부 렌더링을 구현하거나, 특정 상태에 따라 다른 화면을 보여주는 등의 작업에 state를 활용

 

주의할 점

 

직접 변경하지 않기

 

• state는 컴포넌트 내부에서 변경 가능하므로, setState() 함수를 사용하여 state를 업데이트해야 함
• 직접 state를 변경하면 리액트가 변화를 감지하지 못하고 화면이 업데이트되지 않을 수 있다.

 

비동기 업데이트

 

• setState() 함수는 비동기적으로 동작할 수 있으므로, 이전 state 값을 기반으로
  업데이트를 수행해야 할 때에는 콜백 함수를 사용하거나 prevState 매개변수를 활용

 

불필요한 렌더링 방지

 

• state가 변경될 때마다 컴포넌트가 다시 렌더링되므로, 불필요한 렌더링을
  방지하기 위해 shouldComponentUpdate() 메서드나 React.memo()를 사용하여 성능을 최적화 가능

 

---

 

예시

 

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default Counter;

 

 

---

 

props와 state의 차이점

 

변경 가능성

 

props

 

• 읽기 전용이므로 자식 컴포넌트에서 직접 수정 불가
• 부모 컴포넌트에서 변경된 경우에만 업데이트

 

state

 

• 컴포넌트 내부에서 변경 가능
• 컴포넌트가 생성될 때 초기값을 설정하고, 이후 변경 가능
• 변경된 state는 리액트에 의해 자동으로 다시 렌더링되어 화면에 반영

 

소유자

 

props

 

• 부모 컴포넌트에서 자식 컴포넌트로 전달
• 자식 컴포넌트는 props를 받아와 사용 가능하지만, 직접적인 소유권은 부모 컴포넌트에 있다.

 

state

 

• state는 컴포넌트 자체에 속해 있으며, 해당 컴포넌트에서 직접적으로 소유 관리

 

업데이트 방법

 

props

 

• 부모 컴포넌트에서 변경해야 함
• 부모 컴포넌트에서 props가 변경 되면 해당 컴포넌트의 자식 컴포넌트들도 자동으로 업데이트

 

state

 

• 컴포넌트 내부에서 변경 가능하며, 변경된 state는 리액트에 의해 자동으로 다시 렌더링 되어 화면에 반영

 

사용 목적

 

props

 

• 주로 부모 컴포넌트로부터 데이터를 전달받아 자식 컴포넌트에서 사용
• 예를 들어, 부모 컴포넌트에서 자식 컴포넌트로 사용자 이름, 설정값 등을 전달할 때 props를 사용

 

state

 

• 컴포넌트의 내부 생태를 관리하고 업데이트하는 데 사용
• 주로 사용자의 입력값, 컴포넌트의 동적인 상태 등을 관리하는 데에 활용

 

---

 

props와 state 같이 쓴 예시

 

import React, { useState } from 'react';

const Counter = (props) => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + props.incrementBy);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default Counter;

 

 

---