export => import 를 써주면서 코드를 간결하게 만들 수 있다.
리액트 컴포넌트를 쓰는 이유는 *재사용성.
- 해당되는 컴포넌트를 어디든지 가져다가 쓸 수 있음.
- 가독성도 좋아진다. (코드가 길어질 수록 컴포넌트로 빼는 것도 좋다.)
- 성능 최적화 할 때 좋다.
****
컴포넌트를 사용해야 할 때 주의할 점!!!
중요 부분. (V, i)를 따로 읽지 못한다.(key 값)
(상대방 입장도 들어봐야 된다.)
=>
ex)
*<Try value={ v } index={ i } / > props를 사용한다. // HTML에서는 Attribute라고 함.
{ this.props.value.fruit } - { this.props.index }
*<Try v= { v } i= { i } / >라고 쓸 수도 있음.
{ this.props.v.fruit } - { this.props.i }
Tip =>
탑다운 방식, 큰 컴포넌트로 만들고 => 분리를 한다.
*props 가 생기면서 부모, 자식 관계가 생긴다. (상속)
-props는 부모가 없으면 생기지 않음 => 부모를 찾아야 함.
*** 꼭 key값을 가지고 있어야 한다.
ex)
*<Try key={ v.fruit + v.taste } value={ v } index={ i } / >
*<Try key={ v.fruit + v.taste } v = { v } i = { i } / >
고조 할아버지 <=> 손자 교류 있게 하기 위해
Redux 사용
Redux가 은행 역할.
React 자체에 context가 있고, context 복잡한 일을 할 수 있게 만든 것이 Redux.
리액트 주석 사용방법.
=> {/* */}
'TIL > REACT' 카테고리의 다른 글
props 는 부모가 설정. (props 추가설명) (0) | 2019.10.11 |
---|---|
this.setState => render() 실행! (0) | 2019.10.11 |
PureComponent & props 사용 방법 (0) | 2019.10.11 |
리액트 렌더링 & push(X) & shouldComponentUpdate(nextProps, nextState, nextContext) & {PureComponent} (0) | 2019.10.11 |
React requirements - node js, npm , git (0) | 2019.10.11 |
comment