반응형 리액트상태4 리액트 | 커스텀 훅에서 변경한 전역 상태가 컴포넌트에 반영되지 않을 때 해결 방법 🙌🏻 커스텀 훅에서 변경된 리코일 상태가 컴포넌트에 반영되지 않는 이유는 여러가지가 있을 수 있지만, 이 포스트에서는 리액트 라이프사이클과 관련된 내용을 다루고 있습니다. 커스텀 훅에서 전역 상태를 업데이트했는데, 컴포넌트 리렌더링은 일어나지 않는다?! 😣 리코일로 관리하는 상태를 업데이트해주는 커스텀 훅을 사용하는데, 상태가 업데이트 되어도 컴포넌트 리렌더링이 일어나지 않는다면 커스텀 훅에 useEffect() 훅을 통해 컴포넌트의 라이프사이클을 잘 제어하고 있는지 먼저 확인해보는게 좋습니다. 커스텀 훅은 일반적으로 리액트 컴포넌트 내부에서 사용됩니다. 컴포넌트는 상태(state) 또는 속성(props)이 변경될 때마다 다시 렌더링됩니다. 그러나 커스텀 훅은 컴포넌트의 라이프사이클과는 별개로 동작하기 때문에.. 2023. 3. 9. 리액트 | 페이지를 이동할 때 데이터도 함께 넘기는 방법 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 다음 반응형
