반응형 props3 리액트 | 페이지를 이동할 때 데이터도 함께 넘기는 방법 1. URL 매개변수 이용하기 URL 매개 변수를 사용하여 데이터를 전달할 수 있습니다. 예를 들어, /products?category=shoes와 같은 URL을 사용하여 카테고리가 "신발"인 제품 목록 페이지로 이동할 수 있습니다. 이 방법은 React Router의 Link 컴포넌트를 사용하여 구현할 수 있습니다. import { Link } from 'react-router-dom'; function MyComponent() { const categoryId = 123; return ( 상품 목록 ); } 2. React 컴포넌트 props로 전달하기 Link 컴포넌트 대신, 다른 페이지로 이동할 때 React 컴포넌트 props를 전달하여 데이터를 전달할 수도 있습니다. 예를 들어, 아래와 같이 .. 2023. 2. 16. 리액트 & 클린코드 | 변수명 중복 피하기 부모 컴포넌트로부터 전달받은 props의 이름이 자식 컴포넌트의 변수명과 같을 경우, 어떻게 중복을 피하는게 좋을까요? 혹은 부모 컴포넌트로부터 받은 props를 자식 컴포넌트에서 새로운 변수에 할당해서 사용하려고 할 때도 마찬가지로 변수명을 어떻게 지어야할지 고민이 됩니다. 참고 : 전달받은 props와 새로운 변수의 이름이 같을 경우, 코드를 읽기 어렵게 만들 수 있습니다. 이러한 경우, 새로운 변수의 이름을 지을 때 props 이름을 참고하면서, 더 구체적으로 나타낼 수 있는 이름을 사용하는 것이 좋습니다. 💄 변수명 중복을 피하기 위한 규칙 일반적으로, 다음과 같은 규칙을 따르면 좋습니다: props 이름과 유사한 이름을 사용합니다. 예를 들어, props로 전달된 데이터가 “title”인 경우,.. 2023. 2. 16. 리액트 | Props 사용할 때 주의사항 1. Props란? 리액트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. 🤔 부모 컴포넌트로부터 전달받은 Props를 그대로 사용해도 될까? 이러한 props를 컴포넌트 내부에서 사용할 때, 새로운 변수에 할당하지 않고 그대로 사용하면 의도하지 않은 결과를 초래할 수 있습니다. 이는 일반적으로 props를 변경하거나 동일한 props를 여러 번 사용할 때 발생합니다. 2. Props 사용할 때 주의사항 props는 일반적으로 읽기 전용이며 컴포넌트 내부에서 수정되어서는 안 됩니다. 이를 위반하면 다음과 같은 문제가 발생할 수 있습니다. 부작용: props는 부모 컴포넌트에서 전달되는 값이므로, 부모 컴포넌트가 변경되면 props도 변경됩니다. 그러나 props를 직접 수정하면 .. 2023. 2. 15. 이전 1 다음 반응형
