React_to-do_4

4. To-do_1

: 구조 분해 할당(Destructing)

 

 

구조 분해 할당이란

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.

 

말 그대로 구조를 분해하는 것이라고 보면 된다.

 

 

구조 분해 할당은 clean code!! 깔끔한 코드를 위해서 한다.

 

객체 구조 분해 할당이 있고 배열 구조 분해 할당이 있는데.. 일단 그렇다는 것 정도만 알아두자 하하하ㅏ.... 다음에 이건 자세하게.. 봐야지ㅠㅠ

 

 

---

 

 

4. To-do_2

: From 부분을 위한 컴포넌트 생성하기

 

 

이전 포스팅에서 List 부분의 컴포넌트까지만 생성해줬다.

 

이제 입력 창을 담당하는 Form 부분의 컴포넌트도 분리를 해줄 것이다.

 

List.js에서 했던 방식과 동일하므로 자세한 설명은 생략하겠다!!

 

 

우선 Form.js를 생성해서 입력 창에 해당하는 UI를 가져오고

 

 

App.js에서 Form파일을 import한 후 value와 setValue를 가지고 내려온다.

 

그런데 App.js에서

이 handleSubmit 함수는 내부에 setTodoData와 setValue처럼 state가 있어서.. App.js에 그대로 그냥 두고

 

 

handleSubmit도 props로 내려준다.

 

 

마지막으로 From.js에서

인자로 handleSubmit, value, setValue를 받아오면 끝!!

 

 

화면에서 확인하면 잘 돌아간다!!! 우헤헤....

 

 

 

 

---

 

 

4. To-do_3

: TailWindCSS

 

 

TailWindCss란

html 안에서 css 스타일을 만들 수 있게 해주는 css 프레임 워크이다.

 

그렇다면 css 프레임 워크란 무엇인가?

레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성(크롬, 사파리 등)을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발 디자인 프로젝트에서 적용할 수 있는 css 파일 모음이다. 따라서 더 빠르게 애플리케이션을 스타일링 하는데 도움을 준다.

 

 

css 프레임 워크의 종류는 다양한데 그 중에서 TailWindCss를 사용해볼 것이다.

 

TailWindCss의 장점으로는

부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 utility class를 활용하는 방식으로 html에서 스타일링을 할 수 있다.

이게 빠른 스타일링이 가능하고 class혹은 id명을 작성하는 고생을 하지않아도 된다.

유틸리티 클래스에 익숙해지는 시간이 걸리지만 금방 익힐 수 있다!!!!

 

class명과 id를 작성하고 이를 또 css에 바인딩하는 작업을 하지 않아도 되는 것이 되게 효율적인 것 같다...대박...

 

 

 

우선

 

extension에서 tailwind css를 설치했다.

 

 

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

 

이 사이트를 참고하면 유틸리티 클래스에 대해 확실하게 와닿을 수 있을 것이다.... ㅎㅅㅎ

 

 

 

---

 

 

tailwindcss를 리액트에서 사용하기 위해 모듈들을 설치해줄 것이다.

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

요길 참고해서!!!

 

 

 

 

 

터미널에 우선

이렇게 ... 해주면

 

package.json 파일에 devDependencies가 생겨난 것을 볼 수 있다... 뭐 이건 개발할 때만 사용되는 dependencies라고 한다....

 

 

그리고

 

이렇게... tailwindcss를 init 해주면 터미널에 써져있는 것처럼

 

이렇게 새로운 tailwind.config.js 파일이 생겨난 것을 확인할 수 있다.

 

 

 

 

이렇게 content 내부에는 템플리의 path를 써주는 것이다... 위의 사진처럼 저렇게 쓴다고 하네..ㅎㅎ;;

 

 

할 게 참 많다... 이제 App.css에

이걸 써주면... tailwind의 지시자를 css에 넣게 되는 것이다.. 흑 복잡해!!! 뿡....

 

 

 

 

 

자. 이제 tailwindcss를 쓸 모든 준비가 끝났으니 잘 되는 지 확인을 해 볼 것이다.

 

 

이렇게 h1 태그를 사용해서 underline이 생기도록 설정을 해주면

npm run start를 다시 했을 때

 

 

 

 

이렇게 hello world에 underline이 잘 생기면서 css가 미묘하게 달라진 것을 볼 수 있당.......오메...

 

 

 

---

 

 

4. To-do_4

: TailWindCSS로 todo 앱 스타일링 해주기

 

 

이제 tailwindcss를 이용해서 스타일링을 다시 해줄 것이기 때문에

 

App.css에 작성했던 요소들을 모두 지웠다.

이렇게 tailwind를 제외한 부분을 모두 삭제!!

 

 

 

그리고

App.js에서 css를 사용했던 dlv에 클래스네임도 모두 지워줬다.

 

 

 

 

List.js에서도

button 태그에 있던 btnStyle과 key가 있는 div 태그의 getStyle도 삭제했다.

 

 

마지막으로 Form.js에서

 

 

form 태그와 input 태그에 있던 style과 클래스 네임까지 모두 지워주면 된다.

 

 

 

그러면

이렇게 모든 스타일이 사라진 것을 확인할 수 있다.

 

 

---

 

이제 tailwindcss를 이용해서 스타일링을 해보자.

 

 

App.js에서 우선 className을 작성할 때 저렇게 flex를 쓰고 마우스 커서를 대면 해당하는 css 효과가 무엇인지 뜬다.

이런 식으로 우선 강의에서 미리 지정한 스타일링을 작성해주도록 하겠다!!

 

 

그래서 App.js는 일단

이... 이렇게..

 

 

 

그리고 Form.js에서는

 

...이...이렇게......

 

 

마지막으로 List.js에서는

 

자세한 건 하면서 익혀야 할 것 같다... 지금은 그렇구나 정도ㅠ.ㅜ

 

추가적으로 체크 박스와 목록 명을 하나의 div로, 버튼을 또 하나의 div로 나눠주었다.

 

 

 

 

이렇게 tailwindcss로 바꿔주면

 

아까 그 구렸던 화면에서

 

이렇게 깔끔하고 귀여운 화면으로 재탄생한다는 것..... 호호호

 

 

 

 

여기까....쥐....~