PureComponent

간단하게 말하자면 PureComponent로 구현을 하면 직접적으로 props를 주는 상위 컴포넌트나 자기 컴포넌트가 업데이트가 되는 것이 아니라면 re-randering이 일어나지 않게 하는 것이다.

두개의 변수(states)가 동일한 오브젝트를 가리키고 있는 경우:
const ellie1 = { name: 'ellie' };

const ellie2 = ellie1;

1. ellie1 == ellie2 => true

2. ShouldComponentUpdate => false

두개의 참조값이 같으므로, 업데이트 할 필요가 없어서 ShouldComponentUpdate 함수는 false를 리턴
그래서 이 부분은 리랜더링이 일어나지 않는다.

두개의 변수(states)가 다른 오브젝트를 가리키고 있는 경우:
(이때, 동일한 값을 가지고 있더라도, 두개는 엄연히 다른 오브젝트이므로 다른 참조값을 가지게 됨)

const ellie1 = { name: 'ellie' };

const ellie2 = { name: 'ellie' };

1. ellie1 == ellie2 => false

2. ShouldComponentUpdate => true

두개의 참조값이 다르므로, 업데이트가 필요함! ShouldComponentUpdate 함수는 true를 리턴
리랜더링이 일어남.

box-sizing: border-box

css 종류인데, 마진같은 것을 전부 포함하여 100 기준으로 만든다.

보통 이걸 기준으로 생각해서 만들기 때문에, CSS에 시작하면

• {box-sizing: border-box} 이걸 넣어주고 시작한다.

ref

react에서 사용하는 document.querySelector와 같은 기능.

접근하고자 하는 곳의 이름을 따서 Ref를 붙여주는 것으로 만든다.

 formRef = React.createRef();
  inputRef = React.createRef();

그 뒤 , 접근하고자 하는 곳에 이런 식으로 넣어준다.
rander() 뒤에 return 부분에서 접근해야 한다.

render() {
   return (
     <form ref={this.formRef} className="add-form" onSubmit={this.onSubmit}>
       <input
         ref={this.inputRef} //접근하고자 하는 곳에 이런 식으로 넣어준다.
         type="text"
         className="add-input"
         placeholder="Please enter your Habit"
       />

render 메서드 안에서 ref가 엘리먼트에게 전달되었을 때, 그 노드를 향한 참조는 ref의 current 어트리뷰트에 담기게 된다.

 onSubmit = (event) => {
    event.preventDefault();
    const name = this.inputRef.current.value;
    if (name) {
      this.props.onAdd(name);
    }
    // this.inputRef.current.value = "";  첫번째 방법. input창 submit 후 초기화 방법
    this.formRef.current.reset(); //두번째 방법
  };

함수형 component에서는 사용할 수 없다~!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!