리액트 Component & props

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.

 

리액트 주석 사용방법.

=> {/*     */}