리액트 props질문드립니다

Question

app.js// const aa = [{x:1},{x:2},{x:3},{x:4},{x:5}] << 라는 임의의 배열이 있다고 했을 때return (<자식 컴포넌트 data = {aa} /> ) << 이렇게 자식 컴포넌트 props로 넘겨주었습니다. 자식.js//useEffect(()=>{console.log("변경")},[props.aa]); aa[3]의 x의 값을 10으로 변경 하게 되었을 때 자식 컴포넌트에 useEffect에서 값이 변경되었다는걸 인식하지 못합니다 해결 방법이 있을까요? 풀코드로 올리기에는 너무 복잡할것같아서 최대한 간추려 질문드립니다 혹시 이해안가는 부분있으면 말씀해주세요!

킁킁탐정 · Answer

배열이나 객체를 변경할땐 반드시 전체를 새롭게 구성해야합니다. 그렇지 않으면 이전과 동일한것으로 간주합니다. 예를 가장 간단하게 만들어보면 다음과 같습니다. 가능하면 lodash, ramda 같은 도구를 이용하시기를 권해드립니다. import { useEffect, useState } from "react"; function Child(props) { useEffect(() => { console.log(props.aa); }, [props.aa]); return null;} export default function App() { const [data, setData] = useState([{ a: 1 }, { b: 2 }, { c: 3 }]); const onClick = () => { // 새로 구성 const newData = [...data]; // 변경 newData[2] = { b: 5 }; // 상태 업데이트 setData(newData); }; return (

);}

프론트어 · Answer

기존 코드는 리듀서 스테이트를 받아와서 자식컴포넌트로 넘겨줬습니다. (스테이트값은 위에 예시처럼 배열객체입니다)useState를 사용하지 않아도 useSelector를 사용하면 state값이 변경되는걸 알 수 있지 않나요?리듀서 스테이트를 실시간으로 받아 올 때 값이 변경되는걸 어떤 방법으로 처리해줘야 할지 모르겠습니다....useState를 사용해볼려고 했으나 아무리 시도해도 방법이 안나옵니다...const coinInfoList = useSelector((state: ReducerType) => state.coinInfoList);return(<> { coinInfoList.kimchi?.length > 0 && } );

킁킁탐정 · Answer

useState나 useSelector를 사용하는것이 문제가 아닙니다. 늘 새로운 값이어야 한다는 점이 중요합니다. 새롭게 만들어진 변경된 상태(데이터)를 말합니다.const a &#61; [1, 2, 3] a[0] &#61; 10위처럼 하고 a를 넘겨도 a는 새로운게 아니라 자기 자신의 내부를 변경한 객체일뿐입니다.const b &#61; [...a]b[0] &#61; 10위 처럼하면 a의 요소를 모두 복사해서 새롭게 b 배열 객체를 만듭니다. 이 상태에서 b의 값을 변경하고 넘기면 새로운 값을 인식합니다.이 차이점을 제대로 이해하셔야 문제 해결에 도움이 되실꺼 같습니다.immutable vs mutable 그리고 shallow copy vs deep copy 대해서 찾아보시를 권해드립니다. 추가, redux toolkit이 아니라 redux만 사용하신다면 immer를 사용해보시기를 권해드립니다.https://immerjs.github.io/immer/

리액트 props질문드립니다

3개의 답변

Q&A 목록