react로 나만의 웹사이트 만들기!!! # useState, props, router

후.... 1주일 동안 꾸준히 1시간씩 투자해서 부트스트랩을 공부하였는데 오늘 이걸 활용해보고자 합니다! 부트스트랩과 여태 배웠던 react 의 개념들을 활용해서 나만의 디자인 컬랙션 웹사이트를 만들어 보았습니다!! 엄청 잘한것은 아니지만... react 복습차원에서 엄청 의미있는 시간이라고 생각합니다!!!

 

그럼 결과물 부터 감상해봅시다!!!

 

---

 

 

#1. 레이아웃은 어떻게 했나 ?

 

부트스트랩을 활용해서 navbar와 jumbotron 이두가지를 활용했고 레이아웃은 부트스트랩 레이아웃 규격에 맞춰서 진행 하였습니다!

 

// 부트스트랩 설치하기
npm install react-bootstrap bootstrap

https://react-bootstrap.netlify.app/

React-Bootstrap

 

리엑트 부트스트렙 홈페이지 가면 사용방법이랑 유용한 컴포넌트가 많습니다!!! CSS에 자신이 없다면 부트스트랩 라이브러리를 사용하면 시간도 단축되고 좋은것 같습니다!!!

 

---

#2. 데이터 바인딩 및 컴포넌트 작업! by useState

 

리엑트의 핵심 개념인 useState를 학습하기 위해서 따로 데이터 파일을 만들어서 useState를 연습해 보았습니다!!! 데이터 만들기가 너무 귀찮아서 해당 작품 디자이너의 특징을 담아 적었습니다 ㅋㅋㅋ

 

data 만들어서 useState 연습하기!!!

 

 

아! 그리고 부트스트랩 사용하려면 아래 코드 3번줄과 같이 사용할 컴포넌트를 import해줘야 됩니다!!!

 

 

위에 13번줄에서 useState를 활용해서 데이터를 바인딩을 하였습니다! 처음엔 하드코딩으로 표현했지만 만약에 수십개의 데이터를 관리를 하게 된다면 의미가 없을 것 같아서 맵함수를 사용했습니다.

 

 

Card라는 컴포넌트에 props를 전달하여 데이터를 바인딩 하였고 이미지는 따로 구해서 진행하였습니다. 이미지에서 i는 반복문 돌릴때 사용할거여서 위에 카트 컴포넌트에서 따로 바인딩을 했습니다!

 

 

64번줄부터 69번줄은 주석을 해야됩니다!!! 처음에 저렇게 생각했는데 59~60번줄이 엄청 유용하다! 라는것을 알수 있겠습니다!!! 혹시나해서 주석으로 설명 보기!!!

 

---

#3. 페이지화하기! by router

 

이번 미니 프로잭트를 통해서 라우터에 대해 확실하게 잡은것 같습니다!!! ㅋㅋㅋ 우선 터미널에서 라우터를 설치 하였습니다!!

 

//라우터 설치하기
npm install react-router-dom

 

두번째 작업은 index.js파일에서 BrowserRouter를 불러옵니다. 그리고 아래 사진과 같이 브라우저 라우터를 12, 14번줄과 같이 감싸 줍니다!!!!

 

 

그리고 아까 2번째 이미지 처럼 Link, Route, Switch를 import해서 사용하면 됩니다!!@!@! 

 

 

 

Nabar에 있는 컨텐츠에 Link to를 활용해서 이동경로를 설정하였고 Switch와 Route를 다시 활용해서 각각 home과 detail, guestbook 컴포넌트에 지정해서 페이지화 했습니다!

 

 

 

---

 

미니프로잭트 후기

 

우선 이번 미니프로잭트를 통해서 useState와 route에 대한 개념을 확실하게 이해하는 시간을 가졌고 또한 

 

props가 어떻게 움직이고 활용하는지도 확실하게 알게되었다!(props는 꼭 상위컴포에서 하위컴포로 쓰자!!)

 

그리고 페이지화 하면서 추가적으로 알게된 함수도 있었고 그걸 활용하고 구현해서 너무 뿌듯하다! 

 

단편적으로는 뭔가 많이 한것같지만 너무 기본적인 내용만을 활용하였고 사스공부를 했음에도 프로그램

 

오류로 인해 활용하지 못해서 너무 아쉬웠다 ㅠㅠ 아직 리덕스나 유즈이펙트, 에이젝스, 훅 등 못배운 기술

 

들이 많다... 이것 또한 빨리 공부해서 적용해보고 싶다! 뭔가 시간이 충분하다면 고퀄리티로 만들고 싶지만

 

해야할 공부가 많기 때문에 컽~@