react rerendering 되는 부분이 왜이렇게 되는지 이해하기 어렵네요. 조언해주시면 감사하겠습니다ㅠ

Question

function SearchForm(props) { return(

) } class MainPlate extends React.Component{ constructor(props){ super(props); this.state = { loginStatus : false, languageStatus : 0, //default English location: '', keyword: false } } shouldComponentUpdate(nextProps,nextState) { if(this.state.keyword){ return false; } return true; } searchByKeyword(e){ const keyName = e.key; const inputKeyword = e.target.value; if(keyName === 'Enter'){ console.log('typed keyword is',inputKeyword); this.setState({ keyword : inputKeyword }) // this.handleSearch(this.keyword); } } handleSearch(keyword) { const Http = new XMLHttpRequest(); const url = ''; Http.open('GET',url); Http.send(); Http.onreadystatechange = (e) => { } } productGetRequest(pid){ } render(){ if(this.state.keyword){ return(

); } return(

this.searchByKeyword(e)} />

); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); 리액트로 제가 원하는 프로그램을 만들어보려고 하는데 인터넷으로 찾아봐도 답을 찾지 못하고 막혀서 해결이 되지 않는 부분이 있어 글 올립니다.제가 원래 원하던 흐름은 처음 페이지가 랜더링될 때는 MainPlate 클래스에 keyword가 false 값으로 초기화되어 render 함수에서 if문을 건너뛰고 그 아래의 JSX를 리턴하여 랜더링하고 input 요소에 텍스트를 입력하여 enter 키를 누르면 state 값이 바뀌며 리랜더링을 하여 if문 안의 JSX가 랜더링되고 해당 화면에서 다시 input 요소에 텍스트를 입력하면 if문 안의 JSX가 input 요소에 텍스트만 바뀌어 랜더링되는 것을 원했습니다. 그런데 첫 화면에서 텍스트를 입력하여 엔터를 눌렀을 때는 원하는대로 동작하지만 두번째 화면에서 input요소에 텍스트를 입력하고 엔터를 눌렀을 때는 서버로 다시 GET 요청을 보내는 것 같습니다. 여기저기 조금씩 고쳐봐도 해결이 되지 않아 도움을 부탁드리고자 글 올려봅니다.-처음 접속했을 때 기본값으로 초기화된 화면입니다.-첫 화면의 input 요소에 텍스트를 입력하면 원하는대로 두번째 화면이 랜더링됩니다.-두번째 화면의 input 요소에 텍스트를 입력하고 엔터를 누르면 GET 요청을 다시 보내고 MainPlate 클래스가 처음 상태로 초기화되는 것 같습니다.

react rerendering 되는 부분이 왜이렇게 되는지 이해하기 어렵네요. 조언해주시면 감사하겠습니다ㅠ

0개의 답변

기술 목록