(React Basic) Habit Tracker 2_Habits(부모)와 Habit(자식)컴포넌트, props의 개념

🤷🏻‍♀️🤷🏻‍♀️  Props란??

컴포넌트 밖에서 주어지는 데이터.

컴포넌트 안에서 자체적으로 주어지는 state와는 다르게

Props은 컴포넌트 외부에서 데이터를 제공받는다.

가장 근본적인 이유는 컴포넌트의 재사용을 높이기위해서!

상황에따라 주어진 데이터를 받아, 그 데이터에 맞게 UI를 보여주기위해 사용되어진다.

 

< LikeButton title = { 'Like' }  onClick = { this.handleClick } />

 

이처럼 부모컴포넌트에서 이렇게 LikeButton컴포넌트를 사용할 때,

title, onClick과 같은 아이들을 인자로 전달해주면

이 아이들이 props오브젝트로 묶여서 LikeButton컴포넌트에 전달이 된다.

 

props는 render안에서 접근, 변수로 할당해서 사용가능

 

따라서 LikeButton안에서 this.props.title, this.props.onClick으로

각각 전달된 'Like'와 'this.handleClick'함수에 접근이 가능 :)

 

---

 

 

Habits 부모컴포넌트 생성 후,

state에 3가지 데이터를 담은 habits배열을 저장해준다.

즉, Habits안에 3개의 자식Habit컴포넌트가 존재하고,

render에서 map으로 이 배열을 돌면서 각각의 습관들을 Habit 자식컴포넌트에 연결이되는 것

각각의 Habit컴포넌트 안에는 배열안에 들어있는 3가지의 아이템들이 전달됨

 

Habits 부모컴포넌트안에 3개의 자식컴포넌트들이있고,

각각 3개의 자식컴포넌트 안에는 부모로부터 전달받은 props으로 습관들이 전달됨

 

1번Habit = Reading,

2번Habit = Running,

3번Habit = Coding

 

이 세가지를 구분하기위해 id를 부여해주는것이 매우중요

배열 인덱스는 금지! 고유번호를 사용해야함 

 

 

부모컴포넌트 Habits

자식컴포넌트 Habit