[React] React scribble

1828 단어 ReactReact
  • < 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값을 사용할 수 없는 경우가 있다.(비동기적처리의 경우) 이전값에 계산을 더하는 경우.

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

    1. 수정 : map
    2. 삭제 : filter
      // habit-tracker 예제 참조
  • data structure : object(hash table)
    1. 추가, 수정 :
    const updated = { ...curr };
    updated[card.id] = card;
    return updated; (setState 안에서)

    1. 삭제 :
      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의 기능과 같다.

좋은 웹페이지 즐겨찾기