리액트 상위컴포넌트 리랜더링 후 하위컴포넌트에서 업데이트 된 데이터가 보이는 원인

Question

자동완성 기능을 구현하려는 도중 이해하지 못한 부분이 있어 글을 올리게 되었습니다.List컴포넌트 -> autoComplete컴포넌트 트리 구조로 되어 있습니다.코드로는List.jsx const List = ({schdule})=>{ //schdule :데이터객체 const [day, setDay] = useState(schdule); const onChange = (e) => { e.preventDefault(); setDay({ ...day, [e.target.name]: e.target.value }); }; return ( ) }AutoComplete.jsx const AutoComplete = ({day, setDay})=>{ const [inputValue, setInputValue] = useState(day.NAME || ""); const [suggestions, setSuggestions] = useState([]); const onChange2= async (e) =>{ e.preventDefault(); //setInputValue(e.target.value); setDay({...day, [e.target.name]:e.target.value}); } return ( <> onChange2(e)}/> ) }setInputValue를 사용하면 inputValue값을 업데이트 시키면 입력한 내용이 출력이 되지만 객체 데이터 day의 NAME 항목에추가가 되지 않아 setDay함수를 사용하여 day객체를 업데이트하였습니다.그렇다보니 setInputValue를 사용하지 않고 setDay를 사용하여 day를 업데이트키시면 List가 리랜더링되면서 AutoComplete도 리랜더링 되기때문에 inputValue에 업데이트된 day.NAME값이 출력이 될것이라고 생각했는데 아무것도 출력이 되지 않고 input에 입력을 해도 아무내용이 출려되지 않습니다.오히려 setInputValue와 setDay를 둘 다 사용하여야 input에 입력한 내용이 출력이 되고 day의 NAME 항목에도 최신값으로 등록이 됩니다.아직 리랜더링과 상태 업데이트에 대한 지식이 부족한것 같은데 setDay만으로 input입력시 화면출력을 할수 없는 것일까요?

EmDev · Accepted Answer

왜냐면 최초 마운팅 될때만 inputValue의 초기 값을 아래 코드처럼 설정해주고 리렌더링(업데이트) 할 때는 설정을 안 해주기 때문이죠..//AutoComplete.jsx const [inputValue, setInputValue] &#61; useState(day.NAME || &#34;&#34;);

자전거타고러닝하고 · Answer

AutoComplete.jsx 에서 const inputValue &#61; useMemo(()&#61;>{ return day.NAME || &#34;&#34;;}, [day]); memo 써서 해보시고 useState set 함수를 내리지 마시고 함수 하나 만들어서 하위 컴포넌트로 내리시고. 아 List 도 schedule 를 상위에서 받는거군요. 흠... 아래 내용 꼭 한번 천천히 읽어 보세요~ https://ko.legacy.reactjs.org/docs/thinking-in-react.html 위 내용중 일부... 1.부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다. 2.시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다. 3.컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다. . . 기억하세요: React는 항상 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따릅니다. 어떤 컴포넌트가 어떤 state를 가져야 하는 지 바로 결정하기 어려울 수 있습니다. 많은 초보자가 이 부분을 가장 어려워합니다. 아래 과정을 따라 결정해 보세요.

리액트 상위컴포넌트 리랜더링 후 하위컴포넌트에서 업데이트 된 데이터가 보이는 원인

2개의 답변

기술 목록