리액트 | Props 사용할 때 주의사항

1. Props란?

리액트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.

🤔 부모 컴포넌트로부터 전달받은 Props를 그대로 사용해도 될까?

이러한 props를 컴포넌트 내부에서 사용할 때, 새로운 변수에 할당하지 않고 그대로 사용하면 의도하지 않은 결과를 초래할 수 있습니다. 이는 일반적으로 props를 변경하거나 동일한 props를 여러 번 사용할 때 발생합니다.

2. Props 사용할 때 주의사항

props는 일반적으로 읽기 전용이며 컴포넌트 내부에서 수정되어서는 안 됩니다. 이를 위반하면 다음과 같은 문제가 발생할 수 있습니다.

1. 부작용: props는 부모 컴포넌트에서 전달되는 값이므로, 부모 컴포넌트가 변경되면 props도 변경됩니다. 그러나 props를 직접 수정하면 예상치 못한 부작용이 발생할 수 있습니다.
2. 유지보수성: props를 새로운 변수에 할당하지 않고 그대로 사용하면 해당 컴포넌트를 읽기 어렵게 만들 수 있습니다. 컴포넌트의 코드가 복잡해지면 유지보수성이 떨어지고 버그 발생 가능성이 높아집니다.

따라서, props를 그대로 사용하지 말고, 새로운 변수에 할당하거나 필요한 데이터만 추출하여 사용하는 것이 좋습니다. 예를 들어 다음과 같은 방식으로 사용할 수 있습니다.

function MyComponent(props) {
  const { name, age } = props; // 새로운 변수에 할당
  // name, age 변수를 사용하여 컴포넌트 로직 수행
}

또는 객체 비구조화를 사용하여 필요한 프로퍼티만 추출하여 사용할 수 있습니다.

function MyComponent({ name, age }) {
  // name, age 변수를 사용하여 컴포넌트 로직 수행
}

 

요약 : 리액트에서 props를 사용할 때, 그대로 사용하지 말고 새로운 변수에 할당하거나 필요한 데이터만 추출하여 사용하자.