Web tutorial with React-2

hongcoder·2020년 9월 17일
0

Front-end

목록 보기
12/12

한번에 끝내기에는 양이 좀 많을 것 같아서 2부로 나눠서 이어서

기록을 해볼 예정이다.

먼저 Product를 구성하는 Product.js를 살펴보자.

원래는 axios를 이용해서 바로 작성을 했는데 Home, Product에서도

react hooks를 이용하는 부분이 겹쳐서

HttpRequest.js파일로 리액트 훅을 한번에 작성했다.

그래서 useState, useEffect axios는 지워도 된다.

Loader는 파일를 새로 로드할 때, 시간이 걸릴 때 css 로딩 템플릿에 따라

화면에 서클을 구현하는 코드이며 인터넷에 검색하면 쉽게 구할 수 있다.

function Product()을 내에서 우리가 원하는 데이터의 api를 받아오는데

https://5e9623dc5b19f10016b5e31f.mockapi.io/api/v1/products/

이 url에서 products/:id 값을 받기때문에 이를 변수값과

const { id } = useParams()
const url = `https://5e9623dc5b19f10016b5e31f.mockapi.io/api/v1/products/${id}`

useParams hook를 통해서 Route를 쓰지않는 컴포넌트에서도

match,location,history같은 객체에 접근할 수 있다.

원래는 axios를 이용해서

axios.get(url)
	.then(response=> {
	setProduct(response.data)
    })

이렇게 작성을 할 수 있는데 이런 경우 network탭을 보면 url을 지속적으로

요청하기때문에 useEffect로 변화가 있을 때마 불러오게끔 해준다.

let content = null

초기 컨텐츠 값을 설정해주고

이처럼 주석처리한 부분은 바로 뒤에 useAxiosGet.js에서

나타낼 예정이다.

let product = useAxiosGet(url)

products에 에러가 있을 경우, 예를 들면

url주소에서 products/{id} id값이 80까지일 때, 90번째 프로덕트를 호출하면

위와 같은 에러 문구를 나타나게 하고

아까 언급한 것처럼 로딩중이면 그에 맞는 Loader양식을 보여주고

이처럼 product에 데이터값이 있을 경우,

content를 제품이름, 이미지, 가격, 그리고 설명까지 가져와줄 수 있다.

그리고 return에 기본값으로

return (
 <div>
	{content}
</div>
)

이렇게 해주면 된다.

마지막으로 홈 화면을 구성하는 Home과 자식 컴포넌트 ProductCard.js

그리고 react hooks를 모아놓은 HttpRequest까지 살펴보자!

Home.js는 큰 틀은 Product와 비슷하게 간다.

function Home()에서 차이는

변수 url에서 id값을 1번부터 10개만 가져와보기 위해서

const url =`https://5e9623dc5b19f10016b5e31f.mockapi.io/api/v1/products?page=1&limit=10`

이렇게 시작값과 리밋값을 준다.

그리고 Hooks를 가져오는 변수도 그냥 product가 아닌 홈 화면에선

복수로 제품군을 가져오니까 let products= useAxiosGet(url)

똑같이 컨텐츠의 초기값은 =null로 해두자.

product의 error, loading은 코드가 같은데 주의할 점은 홈에선

product가 아니고 products.error products.loading으로 나타내자.

데이터 값을 받았을 때는

if(products.data) {
   content=
	products.data.map((product)=> 
  <div key={product.id}>
  	<ProductCard product={product} />
  </div>
}

이렇게 프로덕트카드에서 제품들을 받아올 수 있는 코드를 작성한다.

마지막으로 return에 이처럼 값을 주고 웹을 보면

<div>
      <h1 className="font-bold text-2xl mb-3">
        Best Seller
        </h1>
    	{content}
</div>

Best Seller라는 문구와

프로덕트 카드들이 10가지가 나오게 된다.

그럼 프로덕트 카드는 어떻게 구성이 되었나 살펴보면

링크를 이용해서 원하는 프로덕트로 갈 수 있게 해주는 코드가 작성돼있다.

props.product.id는 Home에서 ProductCard에 state값을

product={product}로 줬기에 자식 컴포넌트에서

props.product를 받아 id값, price, description을 데이터에서

얻어낼 수 있다.

그럼 마지막으로 이번 프로젝트에서 핵심인 react hooks들을 살펴보자.

react hooks를 굳이 따로 파일로 작성한 이유는 홈과 프로덕트에서

중복적으로 사용되기에 한번만 코드를 작성해서 가져다쓰면 더욱 쉽고

관리하기 수월하기에 useAxiosGet() 컴포넌트로 만들어줬다.

리액트에서 axios를 사용하는 이유는 리액트는 HTTP Client가

내장돼있지않아서 리액트 어플리케이션에서 AJAX를 구현하려면

자바스크립트의 내장객체인 XMLRequest를 이용하거나

다른 HTTP Client 라이브러리를 사용해야한다.

(참고:https://velopert.com/1552)

axios를 사용하기 위해서 npm을 통해 설치부터 해주자.

npm install axios

코드를 자세히 살펴보면

useState를 사용하기 위해서

const [request, setRequest] = useState({
	loading: false,
    	data: null,
        error: false
})

디폴트값을 위와 같이 작성해주자.

그리고 api에 변화가 있을 때, 실행될 수 있게 useEffect를 이용하면


useEffect(()=> {
    setRequest({ // 로딩이 되다가
      loading: true,
      data:null,
      error: false
    })
    axios.get(url) //url값이 들어오면 
        .then(response => {
          setRequest({
            loading: false,
            data: response.data,
            error: false
          })
        })
          .catch(() => { //오류시에
            setRequest({
              loading: false,
              data: null,
              error: true
          })
        })
  }, [url])

이렇게 리액트 훅을 따로 컴포넌트화 해두면 여러 곳에서 사용할 시에

매번 작성하는 것보다 편리하게 사용할 수 있다.


처음에 유투브 과정을 보면서 클로닝을 할 때는 쉽게 이해했다고 생각했는데 이렇게 막상 기록을 하려니 생각만큼 바로바로 나오지않아서 다시 한번 필요한 부분만 참고해가면서 기록을 작성했다.

확실히 아직 내 수준도 그렇고 튜토리얼자체가 영어다보니 한번 보고는 완벽히 이해하기 어려운 부분들이 꽤 있었는데 velog에 기록을 하면서 조금 더 윤곽이 잘 잡힌거같아서 기록의 중요성을 새삼 한번 더 느낀다. 리액트의 적절한 사용예시와 axios를 통한 http와의 연동 또한 이번 프로젝트를 통해서 어느정도 이해할 수 있었고 react-spring은 생각보다 흥미로워서 내 포트폴리오 페이지를 만들 때, 한번 활용해보려고 한다.

이제는 남이 가르치는 클로닝이나 튜토리얼이 아니라 직접 0에서 시작하는 클로닝과 내 포트폴리오 페이지를 만들어보면서 부족한 부분이 뭔지를 조금 더 찾아보며 기록해야겠다.

내 모토는 꼭 기록하자..🔥
기록안하면 치매걸린다....🤪

profile
기록하지 않으면 기억되지않음🧐

0개의 댓글