사용할 모듈 react router dom
axios
styled-components

뉴스 Api 불러와보기

import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
const [data, setDate] = useState(null);
const onClick = async () => {
  try {
    const News = await axios.get(
      'https://newsapi.org/v2/top-headlines?country=kr&apiKey=4a458cc55f384f26a831d33ddcbd318b',
    );
    setDate(News.data);
  } catch (e) {
    console.log(e);
  }
};
return (
  <div>
    <div>
      <button onClick={onClick}>불러오기</button>
    </div>
    {data && (
      <textarea row={7} value={JSON.stringify(data, null, 3)}></textarea>
    )}
  </div>
);
};

export default App;

코드해석 : 버튼을 눌렀을때 axios로 데이트 신청을 하고 setDate로 변경
newAPi 제공하는 뉴스에따라 달라진다

{data && (
        <textarea row={7} value={JSON.stringify(data, null, 3)}></textarea> 

row7은 css적 요소 텍스트에어리어의 로우 크기
JSON.stringify(data, null, 3) 텍스트에어리아에 나타내기위해 스트링기파이 형식으로 변환 받아온 data표시

뉴스 뷰어 UI만들어보기

컴포넌트 디렉토리를 만들어

NewsItem.js : 뉴스 정보를 보여줌  와 
NewsList.js : Api요청과 뉴스데이터 배열을 컴포넌트 배열로 변환해 렌더링하는 컴포넌트 생성

위 스크린샷을 봤을때 뉴스데이터를 지니고있는 "JSON"형태의 객체

>  .title : 제목
	 .description : 내용
      .url : 링크
      .urlTolmage : 뉴스이미즈를 나타내겠다
      뉴스
NewsItem 컴포넌트는 article이라는 객체를 props로 받아서 사용

_self는 연결한 웹 페이지를 현재의 탭에서 엽니다.//기본설정

target="_blank"가 사용된 링크를 사용자가 클릭하면 새 탭에서 링크된 페이지가 열립니다.
퍼포먼스가 떨어질수가 있습니다

_parent
현재 프레임의 부모 프레임에서 새웹페이지가 열립니다.
만약 어떤 창 A에서 창 B를 새로 열었습니다. 그런데 창 B에서 _parent로 창을 열면 창 A에서 열리게 되는 것이죠.

_top
최상위 프레임에서 열립니다. _parent와 비슷한데요. _parent는 바로 이전창(부모창)에서 열리는 반면
_top은 최상위( 가장 최고 부모)창에서 열립니다.

퍼포먼스 떨어짐 해결방법
**1. noopener** 지정
noopener(노오프너)를 지정하면, 링크된 페이지에서 window.opener을 사용해서 링크를 건 페이지를 참조(reference)할 수 없게 됩니다. 더불어 링크된 페이지와 링크를 건 페이지는 별개의 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어지는 일도 없게 됩니다.

신뢰할 수 없는 페이지로 이동하는 링크를 부득이하게 만들어야 할 때 사용하면 유용하겠죠?


**2. noreferrer** 지정
noreferrer(노리퍼러)를 지정하면 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 등의 정보를 브라우저가 Referer: HTTP 헤더로 리퍼러(referer 또는 referrer)로서 송신하지 않습니다.

//출처 https://joshua-dev-story.blogspot.com/2020/12/html-rel-noopener-noreferrer.html

데이터연동

  const [articles, setArticles] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(()=>{
    const fetchData = async() =>{
      setLoading(true)
      try{
        const res = await axios.get(
          'https://newsapi.org/v2/everything?q=tesla&from=2021-07-20&sortBy=publishedAt&apiKey=4a458cc55f384f26a831d33ddcbd318b'
        )
        setArticles(res.data.articles)
      }catch(e){
        console.log(e)
      }
      setLoading(false)
    }
    fetchData()
  },[])

 const res = await axios.get(
          'https://newsapi.org/v2/everything?q=tesla&from=2021-07-20&sortBy=publishedAt&apiKey=4a458cc55f384f26a831d33ddcbd318b'
        ) api를 이용해 get요청함

불러올동안  setLoading(true) 로딩표현
        setArticles 에 받아온데이타 연동
        끝난후 로딩 끝남
             fetchData() 안에 다 들어있음 유즈이펙터로 한번만 불러들임 
  if (loading) {
    return <NewsListBlock>loading...</NewsListBlock>;
  }
  if (!articles) {
    return null; ---> 이걸 하지않는다면 null에는 맵함수가 없어서 조회가 되지 않는다
  }

카테고리 기능 구현

6개의 카테고리를 만들어보자
{비지니스 ,엔터테이너,헬스,과학,스포츠 , 기술}

따로 더미 폴더를 만들어서 Categories.js에 임포트를 시켯다

Categories.js

import React from "react";
import { dummyCategories } from "../dummydata/dummyCate";
import styled from "styled-components";

const CategoriesBlock = styled.div`
  display: flex;
`;
const Category = styled.div`
  font-size: 1.125rem;
  cursor: pointer;
  white-space: pre;
  text-decoration: none;
`;

const Categories = () => {
  return (
    <CategoriesBlock>
      {dummyCategories.map((c) => {
        console.log(dummyCategories);
        return <Category key={c.name}>{c.text}</Category>;
      })}
    </CategoriesBlock>
  );
};

export default Categories;

useStates 로 상태관리

onSelect === 텍스트를 클릭했을때 jsx 실행

컴포넌트들을 여러개 거치면서 전달 인자들을 props로 넘겨주며 다시 전달인자가 부모쪽으로 올라가는형태

상태 끌어올리기 라고 한다 컴포넌트가 얼마 많이 없다면 상관없지만 많아진다면 랙이 걸릴것이다.

또한 복잡하게 얽힌구조를 일일 찾다 실수를 할수가있다 이것은 useReducer,Redux,useCallback,useMemo 등을 활용해서 최적화를 시키면된다 하지만 이것을 연습하는 이유는 구조를 파악할수있고 프롭스연습이나 상태관리등을 어쩌면 아날로그적으로 이해할수있고 최적화시 변화과정을 이해할수있어라고 생각한다

API 를 호출할때 카테고리 지정

현재 카테고리를 선택하지않고 전체적으로 불러오고있는 상태이며 카테고리를 통해 여러분야의 뉴스들을 나눠서 불러오는 체제로 만들어보자

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const query = category === "all" ? "" : `&category=${category}`;

        const res = await axios.get(
          `https://newsapi.org/v2/top-headlines?country=kr${query}&apiKey=4a458cc55f384f26a831d33ddcbd318b`
        );
        setArticles(res.data.articles);
      } catch (e) {
        console.log(e);
      }
      setLoading(false);
    };
    fetchData();
  }, [category]);

query 지정으로 카테고리가 변경될때마다(useEffect) 전체불러오기일떄는 공백으로와 클릭했을때 카테고리별로 쿼리변수에 조건을 저장했다

이제 탭을 누를때마다 변경이 된다