[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값을 사용할 수 없는 경우가 있다.(비동기적처리의 경우) 이전값에 계산을 더하는 경우.
-
리액트 li update 시, data structure : array
1. 추가 : [...this.state.array, {추가}]- 수정 : map
- 삭제 : filter
// habit-tracker 예제 참조
-
data structure : object(hash table)
1. 추가, 수정 :
const updated = { ...curr };
updated[card.id] = card;
return updated; (setState 안에서)- 삭제 :
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의 기능과 같다.
Author And Source
이 문제에 관하여([React] React scribble), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kenatman/React-React-개념노트저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)