React setState 렌더링

Question

리엑트로 페이지 작업중입니다. 아래의 예시 처럼 작업중입니다.state 값을 input value로 주고변경시 state 값을 변경해주는 방식인데페이지에 input 이 한 2~300 정되 되는 페이지에 서는input 을 변경 할때마다 렌더링 되는 과정에서 모든 부분이 렌더링 되서 버벅되는 현상이 발생되는데요 이부분을 해결하기 위해서는 key 값을 줘야 한다고 하는데..input 에 직접 key값을 줘야 하나요? key값을 어떤 방식으로 줘야 할까요?table 여러개이고 또 각테이블은 for문이나 stream을 돌릴수 없는 비정형 테이블 입니다. class Testextends Component { state = { name: "", phoneNumber: "" }; onChange = e => { this.setState({ [e.target.name]: e.target.value }); }; render() { return (

phone book

); }} export default PhoneForm;

loveDog · Answer

저같으면 input을 custom 컴포넌트로 만든 뒤에 React.memo를 사용해서 최적화를 시킬것같습니다.

밥도둑계장 · Answer

onChange 말구 onBlur 어떠신지

LeeCoder · Answer

form 태그로 묶은 input 은 submit 이 되면 새로고침현상이 발생하게 됩니다. 그래서 버벅이는 현상을 보신듯 하네요. onChange 함수안에 e.preventDefault() 함수를 넣어주시면 새로고침이 발생하지 않습니다.

React setState 렌더링

3개의 답변

#render 목록