[React] newsAPI로 뉴스 페이지 만들기

또띠·2023년 9월 6일

리액트를 다루는 기술

요즘 리액트 공부하면서 리액트를 다루는 기술 이라는 책을 읽으면서 함께 공부를 하고 있다.

책을 보던 중 newsAPI를 이용해서 뉴스 페이지를 만드는 부분이 있어서 굉장히 흥미로워서 일단 책보고 따라해 보기로 했다.

완성된 뉴스 페이지

탭을 이동하면 router를 통해 해당 탭의 기사글들만 필터링된다. 🥺

굉장히 신기했고 실제로 현업에서도 많이 사용될 기술이라 눈을 반짝이며 작업을 시작했으나, 끝은 내가 아직도 잘 못하고 있구나라는 비참함을 느꼈다.

하지만 어렵다고 포기하면 안되기 때문에 보고 따라 쳐서 만든 결과물에서 얻은 느낀점과 부족한 부분을 간단하게 정리해 보려고 한다.

🧐 새롭게 알게 된 부분

1. NavLink

styled-component 사용할때 NavLink라는걸 사용했다.
그래서 이게 무엇인가 하니 '특정 링크에 스타일을 넣을 수 있는 기능'이라고 한다!

현재 URL과 to가 가리키는 링크가 일치할 때, activeStyle과 activeClassName이 활성화 되고 일치하지 않으면 비활성화가 된다고 한다.

이 부분을 정말 자세하고 친절하게 설명해주는 블로그가 있어서 함께 가져왔다.

🔗 Link와 NavLink - seong-dodo님

나의 컴포넌트에는 to안에 현재 경로에 대한 내용이 담겨 있는데 NavLink를 사용하려면 이런식으로 작업할 수 있다는 것을 알게 되었다.

2. 반응형 styled-component

일반 css파일에서 반응형 만드는건 어려움이 없는데 styled-component에서 반응형을 어떻게 만들지? 하는 궁금증이 있었는데 이번 뉴스 페이지 만들면서 알게 되었다. 바로 해당 styled-component 안에 똑같이 반응형 css를 작업하면 된다는 것이다.

3. response 받기 전 상태 표시

이 부분도 굉장히 궁금했다.

일반적인 홈페이지에서 보통 화면이 그려지기 전(데이터를 받아서 화면에 뿌려주기 전) 로딩바나 그래프를 이용해서 나타내는데 이 시점이 궁금했었다.

여기서는 loading이라는 useState를 하나 만들어서 기본값을 false로 둔 다음 아래와 같은 순서로 구동이 되게끔 만들어져 있다.

setLoading(true); // 요청이 대기 중

if (loading) {
    return <NewsListBlock>대기 중...</NewsListBlock>; // 대기 중
  }

setLoading(false); // 요청이 끝남

이런식으로 loading 상태에 따라 중간에 대기 중이라는 화면을 응답 받기 전까지는 보여줄 수 있다는 점이 굉장히 흥미로웠다.

🥊 잘 모르거나 어려웠던 부분

1. API를 사용한다면 꼭 json 데이터값이 어떻게 들어오는지 확인하자.

바보같이 이상한데 시간을 쏟았던 부분이였다...

분명 api url을 타고 들어가면 json 데이터가 잘 나오는데 이상하게 내 화면에서는 아무것도 나오지 않았고 map 함수에서 에러가 자꾸 발생했다.

너무 화가나서 책에 있는 코드를 비교했는데 설마했던 부분에서 탈이 났다.
바로 오타...였다.

api에서는 articles로 적혀 있었는데 article로 적어놓고 map을 사용하니 당연히 map 입장에서는 "야! article가 뭔지 모르는데 나보고 어쩌라는거냐!!"할 수 밖에....😩

그래서 이번 계기로 꼭 api를 사용할땐 옆에 api 데이터를 띄워놓고 복붙을 해서 값을 가져오도록 해야겠다는 다짐을 했다.

2. 무슨 코드인지 해석 불가능...

카테고리에 따라 경로를 지정해 주는 부분이 있었는데 사실 나는 저 부분이 이해가 안된다... 왜 &를 사용한거고 왜 url의 저 부분에 경로를 넣었는지도 😭

그래서 우선 GPT한테 물었는데 다음과 같은 답변을 받았다.

질문한 내용

&category=${category} 뜻
response 안의 경로에서 ${query}를 저 위치에 넣은 이유가 궁금해

우선 1번에 대한 답변은 &가 경로를 이동할때 붙여서 사용하기 때문에 들어간 기호이기 때문에 &category에 카테고리 값을 담은 의미였다.

2번째는... 완전히 이해가 가지 않지만 저 api url의 카테고리 부분에 우리가 만든 변수를 올바른 위치에 넣어야 정상적으로 실행되기 때문이란 생각이 들었다.

리액트... 뭔가 알 것 같으면서도 알지 못하는 아리쏭한 라이브러리이다ㅠㅠ

또띠

✨ 𝑬𝒗𝒆𝒓𝒚𝒕𝒉𝒊𝒏𝒈 𝒄𝒐𝒎𝒆𝒔 𝒕𝒐 𝒉𝒊𝒎 𝒘𝒉𝒐 𝒉𝒖𝒔𝒕𝒍𝒆𝒔 𝒘𝒉𝒊𝒍𝒆 𝒉𝒆 𝒘𝒂𝒊𝒕𝒔. ✨