4 CRUD - C , shouldComponentUpdate

props는 read-only이고 내부에서 값을 바꾸려고 하면 에러가 난다.

상위 컴포넌트에서 하위 컴포넌트로 값을 보낼때는 props를 이용하여 값을 전달 할 수 있다.

반대로 하위 컴포넌트에서 상위 컴포넌트로 값을 보낼때는 어떻게 할까?

event를 활용해야한다. 상위 컴포넌트에서 하위 컴포넌트로 함수를 만들고 ex (this.setStatus({mode : id(매개변수)}) 

하위 컴포넌트에서는 그 함수의 매개변수(id)에 값을 넣어 다시  그 값을 전달받아 상위에서 값을 변경한다

 

CRUD에서 

Create를 만들어보았다.

CreateContent.js 에서

form을 전송했을 때(submit 버튼을 눌렀을 때) 실행되는 이벤트를 설정하고 e.target.title(name의 값).value를 하면 form에 있는

각 데이터의 값을 가져올 수 있다.

     onSubmit={function (e) {
          e.preventDefault();
          let newCon = {
            title: e.target.title.value,
            desc: e.target.desc.value,
          };
          this.props.onSubmit(newCon);
        }.bind(this)}

 

<CreateContent
          onSubmit={function (newCon) {
            const num = this.state.content.length;
            newCon.id = num;
            this.state.content.push(newCon);
            this.setState({
              mode: "read",
              selected_id: num,
            });
          }.bind(this)}
        ></CreateContent>

나 같은 경우에는 state에 있는 content에 push를 통하여 기존 배열에 추가해줬고

num이라는 변수를 onSubmit 이 발생할 때 마다 만들어 넣어 주는 방법을 사용했다.

 

이러한 방법은 좋지 않다고한다.

첫 번째로 

const _newContent = this.state.content.concat(newCon);

this.setState({

    content: _newContent }) 이렇게 concat으로 기존 배열을 수정하지 않고 새로운 배열의 return 값을 기존 값에 대입하는 방식을 성능을 개선할 때 좋다고 한다.

 

두번째로는 

num이라는 변수를 만드는 것 보다 처음에 App을 초기화 할 때 this.max_content_length 라는 값을 만들어 줘서 가져다 쓰는 방식을 하는 것이 낫다고 한다.

그렇다면 왜 state에 넣지 않을까??라는 생각을 할 수 있다.

이유는 저것은 단지 정보일뿐 UI와는 전혀 관련없는 것이기 때문에 state에 넣어줄 이유가 전혀 없는 것이다.

 

 shouldComponentUpdate(newProps, newState) {
    console.log(newProps.data);
    console.log(this.props.data);
    return false;
  }

Nav는 Create가 되면 목록의 title을 추가하면서 보여주는 컴포넌트이다.

render() 위에 저 함수를 추가한다면 어떻게 될까?

먼저 첫번째 인자(newProps) 를 통해서 바뀐 값을 알 수 있다. 

this.props.data에서는 create되기 전의 content가 나온다

newProps.data 4개 this.props.data 3개  -> newProps.data 5개 this.props.data 4개  -> ...

return 값이 false이면 render가 실행되지 않는다.

 

shouldComponentUpdate 이 함수를 통하면 props의 값이 업데이트가 됐을때만 render가 호출 될 수 있도록 하여 성능을 높일 수가 있다.

 

앞서 말한 push를 통해 원본을 바꾸는 방식을 사용하게 된다면 newProps.data의 값과

this.props.data의 값이 같아져 버리기 때문에  shouldConponentUpdate를 쓸 수 없게 되어버린다.

이것이 아까 말한 성능향상때문이다.. 

 

하지만 push를 쓸 수 있는 방법도 있다.

let new = Array.from(old)함수를통해서 복제본을 만들어주고

new.push()를 하게되면 원본은 변함없기에 사용해도 무방하다!

this.setState({ content: new}) 

 

작은 프로젝트에서는 전혀 상관없다고하는데 그냥 습관처럼 들여놓아야 겠다!!!