[React] React scribble

• < App /> 은 html 이 아니라 "component"
  component 는 html 을 반환하는 함수
  jsx : JS를 확장한 문법, JS안의 html, JS의 모든 기능 포함

• So, "JSX" is React-style 'JavaScript→HTML'.

Component is a function that returns HTML, which is shape of the 'Self-Closing Tag' (< />).(정의 / 사용)

And Prop(full name.Property) is the way to give information to the component,
which is the shape of the 'Attribute'(< ~="~">).
These 'attribute' goes to the component(=function)'s argument as 'props',
but you can use curly bracket( { } ) to get props from inside of props.

• 이 props 라 불리는 것들, html 에서는 attribute 라 불리는 값들은 컴포넌트의 정의부에 object 의 형태로써 인자로 넘어오게 되는데 { favorite } 라고 입력함으로써 내부의 값을 가져옵니다.

• this.setState((curr)=>({count:curr.count+1})) 이런식으로 setState안에는 콜백함수가 들어가야한다. 직접 state를 변경하는 것이 더 직관적이지만(에러는 안남) 이전state값을 사용할 수 없는 경우가 있다.(비동기적처리의 경우) 이전값에 계산을 더하는 경우. => setState 리턴객체에서 this.state가 나오면 함수형을 작성하자!!

• 리액트 li update 시, data structure : array
  1. 추가 : [...this.state.array, {추가}]

  2. 수정 : map
  3. 삭제 : filter
     // habit-tracker 예제 참조

• data structure : object(hash table)
  1. 추가, 수정 :
  const updated = { ...curr };
  updated[card.id] = card;
  return updated; (setState 안에서)

  2. 삭제 :
     const updated = { ...curr };
     delete updated[card.id];
     return updated;(setState 안에서)

** setState 바깥에서 정의하는 경우.
this._deleteNotification = (id) => {
  const updated = { ...this.state.notifications };     delete updated[id];
  this.setState({ notifications: updated });
    };

• useEffect(()=>{ return ()=>func()},[])
  : useEffect 내에서 사용한 return 함수는 ComponentWillUnmount의 기능과 같다.

• react 내 controled/uncontroled input
  => value와 onChange는 세트, onChange 안쓸거면 defaultValue 사용.

• 함수안에서 this 안쓰면 클래스 컴포넌트 밖으로 뺴는게 낫다.