React_to-do_1

학습 목표

 

• to-do 앱을 만들어 보자고!!!!!

 

---

1. To-do_1

: 할 일 목록 앱 컨테이너 생성

 

 

우선 기본적으로 불필요한 App.js , App.css , index.css의 내용을 지워줬다.

 

 

 

배경 색은 강의와 동일하게 aliceblue로 했고 

 

 

이는 index.js 에서 index.css를 import 하기 때문에 화면에 그려질 수 있는 것이다! 

 

 

이제 배경 위에 올라올 컨테이너를 만들 것이다.

리액트에 대해 알아보면서 클래스형 컴포넌트와 함수형 컴포넌트가 있다는 것을 배웠었다..

 

우선 클래스형 컴포넌트로 만들어보자!!

 

자... 설명을 해보자면

 

리액트는 라이브러리였다. 그래서 {Component} from "react"는 리액트에서 컴포넌트를 가져온다는 뜻!

그리고 그 컴포넌트를 리액트에서 사용할 수 있도록 extends!! 확장!! 하는 것이다..

 

따라서 클래스 내부에서 render라는 메소드를 사용해 내부에 UI를 작성하면 되는 것!!

 

(함수형 컴포넌트에서는 render가 필요없다.)

 

 

 

 

자 이제 본격적인 컨테이너를 만들어 보자!!!

 

우선 html과 달리 JSX에서는 class가 아니라 className이라고 작성을 한다는 차이가 있다!!

 

그래서 큰 container div와 실제 목록들이 그려질 todoBlock 클래스를 만들었다.

 

 

 

해당 css는 이렇게...

 

 

마지막으로

이렇게 할 일 목록을 title인 클래스에 h1태그로 넣어주면

 

 

 

ㅎㅎㅎ 이렇게 나왔당

 

 

---

1. To-do_2

: 할 일 목록 UI 생성

 

 

할 일 목록이라는 큰 제목 아래 정말 해야 할 일들의 목록들을 리스트 형태로 만들 것이다.

 

 

 

그래서 이렇게 title div 아래 새로운 div를 만들고...

우선 체크 박스와 기본 값은 false로 만들어주었다.. 버튼은 일단 스타일을 지정하지 않고 보면

 

 

 

이렇게 못생긴 공부하기가 탄생했다ㅎㅎㅎ

 

 

이제 스타일링을 할 건데 css에 하지 않고 버튼 태그 내부에 style을 지정할 것이다.

 

 

이렇게 button 태그 내부에 this.btnStyle을 넣어주고 render함수 위에 이 스타일을 정의해주면 된다!!

 

 

 

 

그러면

 

이렇게 x 버튼이 귀여워졌다^_^

 

 

 

이번엔 리스트 스타일링을 해보쟈

흠 그런데 체크 박스를 체크하게 되면 목록에 선이 그어지면서... 동적으로 만들 것이기 때문에 함수로!! 정의할 것이다.

 

 

이렇게 하나의 공부하기 목록의 div 스타일에 getStyle 함수를 작성하고

btnStyle을 해준 것처럼 getStyle 함수를 render 함수 위에 작성해주었다.

 

 

 

짜좐~~~ 이렇게 아래 선이 나오는 것을 확인할 수 있다!!!

 

 

 

---

 

1. To-do_3

: Map 메소드를 사용한 할 일 목록 나열

 

 

목록을 나열할 때 위에 쓴 코드를 하드 코딩으로 계속 나열할 수 없기 때문에 map 메소드를 이용할 것이다.

 

map() 메소드란 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 것이다.

 

 

따라서 할 일 목록의 데이터를 배열에 넣어놓고 하나씩 호출을 할 것이다!!!

 

 

 

 

 

 

그래서 이렇게 render 함수 위에 todoData로 배열을 하나 만들고 두 개의 할 일 요소를 만들었다.

 

 

 

그리고 map 함수를 통해 이 todoData를 사용할 것이다.

 

우선 이렇게 기존의 공부하기 목록이 있던 div 태그를 map 메소드 내부에 넣어주었다.

 

map 메소드의 인자로는 todoData 배열에 있는 data를 받는다. 그리고 작성해두었던 공부하기 목록 div 태그를 내부에 작성했다.

달라진 점은 "공부하기"를 {data.title}로 해준 것과 key를 추가해준 것!!

 

중괄호를 하지 않고 그냥 data.title로 작성하면 todoData의 title 값이 아닌 그냥 "data.title"이 출력된다.

 

그리고 리액트에서 리스트가 여러 개이고 나열을 할 때 key를 넣어줘야 한다.

자세히는 다음 챕터에서 쓰겠지만..

key의 속성에는 객체의 유니크한 값을 넣어줘야 한다. 여기서 유니크한 값은 id이기 때문에 id를 key 값으로 넣어주었다.

 

 

 

---

 

1. To-do_4

: JSX의 Key 속성 이해하기

 

 

위에서 key를 사용한 이유를 알아보자!!

 

 

우선 key를 지우고 콘솔 창을 확인해보면

 

 

이렇게 key 넣으라고 경고 뜸...

 

 

그래서 key가 무엇인고... 다시 말해보자면

key는 리액트가 변경, 추가, 제거된 항목을 식별하는데 도움이 된다. 따라서 요소에 안정적인 id를 부여하려면 배열 내부의 요소에 키를 제공해야 한다.

 

 

가상 돔에 대해서 배울 때, 리액트는 가상 돔을 이용해 바뀐 부분만 실제 돔에 적용했다.

따라서 key를 이용해야 어떤 부분이 바뀌었는지 알 수 있는 것이다.

 

(키에 index를 넣어줄 수도 있지만... 추천하지 않으니까 그냥 id를 사용하자^^)

 

 

 

헤헤