shouldComponentUpdate NextProps 와 nextState 질문있습니다.
20일 전
shouldComponentUpdate(nextProps, nextState){
if(this.state !== nextState){
return true;
}
return this.props.info !== nextProps.info;
//true일때만 업데이트를 한다.
}
여기서 nextProps랑 this.props 랑
this.State랑 nextState차이 상세히 설명가능
한가요 ㅠ?
렌더링시 두번씩 반복 됩니다.
2달 전
shouldComponentUpdate 기능 구현하기전부터 콘솔 로그확인시 두번씩 반복되는 것을 확인할수있는데, 적용후에도 동일하게 나타납니다. 어떤 문제인지 잘 파악이 되지않아 해당 화면 첨부드립니다.
확인부탁드리겠습니다. 감사합니다.
PhoneList.js 와 PhoneInfo.js 를 나누는 이유
5달 전
파일 구조를 보면 제가 이해하기로는
PhoneForm.js :
이름과 전화번호를 입력받고 입력상태를 App.js 로 넘기기
PhoneInfoList.js :
App.js 에 데이터를 PhoneInfoList.js 에서 받고 데이터를
map으로 돌려서 list 로 만들어준 후
PhoneInfo.js :
PhoneInfoList 에서 받은 list 를 style 에 맞게 보여준다.
이렇게 이해를 했는데요.
PhoneInfoList 와 PhoneInfo 를 구분한 이유가 궁금합니다.
App.js 의 데이터를 PhoneInfo 에서 받아서 map 을 사용해서
바로 style 에 맞게 화면이 보여주게 할 수도 있을텐데
List 로 만들어주고 화면에 보여주는 파일을 구분해주는 이유가
무엇인가요?
this.state.editing을 사용해야하는 것 아닌가요?
9달 전
state에 들어있는 editing을 사용하려면
this.state.editing을 사용해야하는 것 아닌가요?
ㅠㅠ 갑자기 어떻게 해서 검색기능이 구현된 건지 이해가 덜 되었어요...
10달 전
data={this.state.information.filter(
info => info.name.indexOf(this.state.keyword) > -1
)}
이 부분때문일 거 같긴 한데요. indexOf는 인덱스를 뽑는 건데, 이걸로 어떻게 검색(필터링)기능이 구현 된 것인지 이해가 안되어서 질문드립니다..!
리렌더링
10달 전
state가 바뀌면 컴포넌트의 렌더링이 다시 일어난다고 하셨는데요~
리덕스를 쓰는 경우에, 부모컴포넌트에서 내려주는 props가 변경되는 일이 생기기도 하는데, 이 경우에는 어떻게 되나요? props가 바뀌어도 리렌더링 되게 되나요?
props질문입니다.
11달 전
PhoneInfoList.js에서
<PhoneInfo info={info} key={info.id}/>
PhoneInfo컴포넌트한테 전달하는데
받을 때
const {name, phone, id} = this.props.info;
this.props.info로 받는건 알겠습니다.
그런데 App.js에서 PhoneInfoList로 전달할때
<PhoneInfoList data={this.state.information}></PhoneInfoList>
data=어쩌고 보내니까 PhoneInfoList에서
const { data } = this.props.data;로 받아야하는 줄 알고
그렇게 작성했더니 에러가 났습니다.
this.props; 로 하면 되고
this.props.data로 하면 에러가 나는데
개념이 아직 안되어있는건지는 모르겠는데 설명해주실 수
있나요 ㅠ
컴포넌트에 ref 달기가 정확히 동작하지 않네요. 답변 부탁 드려요
2019.03.19
강사님꼐서 쓰신"리액트를 다루는 기술" 이란 책도 사서 따라 해보고 있는데 잘 안되는 부분이 있어 글 올립니다. - 5.3 검포넌트에 ref 달기[ ScrollBo.js ]import React, { Component } from 'react';class ScrollBox extends Component {scrollToBottom = () => {const { scrollHegiht, clientHeight } = this.box;console.log("scrollHegiht : " + scrollHegiht);console.log("clientHeight : " + clientHeight);this.box.scrollTop = scrollHegiht - clientHeight;}render() {const style = {border : '1px solid black',height : '300px',width : '300px',overflow : 'auto',position : 'relative'}const innerStyle = {width : '100%',height : '650px',background : 'linear-gradient(white, black)'}return (<divstyle={style}ref={(ref) => {this.box=ref}}> );}export default ScrollBox;[App.js]import React, { Component } from 'react';import ScrollBox from './ScrollBox';class App extends Component {render() {return ( this.scrollBox=ref} /> this.scrollBox.scrollToBottom()}> 맨 밑으로 } );}}export default App;위 2개의 js를 만들어서 실행하면 "맨밑으로" 버튼을 누르면 스크롤바가 내려가지 않습니다.제가 어떤 부분을 코딩을 잘 못 한 건 가요?
