Habits 컴포넌트 만들기(State up, list key)

Habits라는 컴포넌트를 만들어보자

진행중인 프로젝트 폴더 habit-tracker의 components의 폴더 안에 habit.jsx파일을 만들어 준다.

rcc를 이용해서 뼈대를 생성하고

 

컴포넌트에는 state 오브젝트가 있는데 이 state라는 오브젝트에는 habits이라는 배열을 가지고 있다. 각각의 배열에는 habit이라는 오브젝트가 있다. habits.jsx파일에서 map을 이용해 각각의 habit을 받으면서 알맞는 JSX로 변환해준다.

 

 

여기서 Habit이라는 컴포넌트를 앞에서 만들어 놨으니까 써주고 App 컴포넌트에서 Habit이 아니라 Habits로 바꿔준다.

app 컴포넌트에서 import한 habit을 habits로 바꿔준다.

 

그러면 Habit은 더 이상 안 쓰이니까 지우고 habits 컴포넌트에 habit 컴포넌트를 import 해준다.

이제 habits.jsx에서 props를 쓸 건데 props는 properties의 약자이다. 부모 컴포넌트나 다른 컴포넌트로부터 데이터를 받아서 데이터를 표기하기 위해서 쓰여지는데, Habit라는 컴포넌트는 자기 맘대로 원하는것을 표기 하니까 재사용성이 떨어진다. 재사용력을 높이기 위해서는 데이터를 받아서 해당하는 데이터를 보여줄 수 있도록 만들어 줘야한다.

 

props로 전달을 해줘보자. Habit 컴포넌트에 habit이라는 오브젝트를 전달해 줄 건데 habit 이라는 prop 이름에 각각의 habit을(데이터를) 전달해 주는 것이다.

 

외부로부터 받아온 데이터는 props라는 클래스 안에 있는 데이터에 저장되어진다.

여기서 const habitName = this.props.habit.name; 이렇게 해서 이 name을 여기 괄호를 이용해 변수에 접근한다.

 

밑에다가 괄호를 이용해서 name, count 변수에 각각 name과 count라는 변수에 this.props에 있는 habit 이렇게 해서 자동으로 데이터가 name과 count라는 대신에 동일한 이름을 쓴다.

const { name, count } = this.props.habit;

habit파일에서 props를 이용하여 외부에서 받은 데이터를 저장해준다.

이렇게 해서 습관들을 담을 수 있는 Habits라는 컨테이너 컴포넌트를 만들었고 state에는 습관들을 담고 있는 배열의 데이터를 가지고 있다.

 

그리고 render 안에서는 이 배열들을 돌면서 각각의 컴포넌트에 연결해 주는 일들을 했다. 결국 습관들(habits)라는 컴포넌트는 3개의 자식 habit 컴포넌트를 가지고 각각의 Habit 컴포넌트 안에는 여기 배열 안에 있는 아이템들이 전달이 된다.

 

그래서 컴포넌트창을 보면 Habits라는 부모 컴포넌트 안에는 세 개의 자식 컴포넌트들이 있고 각각의 컴포넌트 안에는 보무 컴포넌트로부터 전달받은 props으로 습관들이 전달되는 것을 볼 수 있다.

 

부모 컴포넌트 안에 세 개의 자식 컴포넌트들이 있고 props으로 habit들이 전달

즉 컴포넌트 안에 배열의 제일 첫 번째 아이템이 prop으로 전달이 되고 첫 번째는 Reading 이라는 데이터가 출력되고 두 번째 컴포넌트에는 배열에서 있던 것이 prop으로 전달되엇 running이 들어가 있고 세 번째도 배열의 세 번째가 전달되어져 있다.

 

그래서 habits라는 습관들 컴포넌트 안에는 3개의 habit 컴포넌트들이 있고 각각 habit 컴포넌트 안에는 부모 컴포넌트로부터 전달받은 이 prop으로 전달받은 배열의 아이템들이 각각 전달되어져 있다.

 

habits파일안에 아이디를 이용해서 계산을 해주는데, 리스트 안에서 쓰이는 자식 컴포넌트에게 아이디를 부여하는 것이 굉장히 중요하다. key 안에 habit 안에 있는 id를 지정해주면서 성능개선을 위해서 이렇게 id를 이용해준다.

habits파일에서 id를 이용하여 성능개선

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Destructuring assignment - JavaScript | MDN