2. 다음과 같은 모듈 설치하고 받아오기
   import React, { useState } from 'react';
   import axios from 'axios';

3. props에 들어갈 함수 작성하기
   1) 함수 작성
   2) async~ await 사용
   3) try ~ catch 사용
   4) await 뒤에는 axios.get(api주소) 사용
   4) setData(받아온 내용의 data) 설정하기

4. 컴포넌트에 함수 적용하기
   1) 같은 파일에 컴포넌트가 있는가, 없는가.
   a. (같은 파일에서 return할 경우) 함수 적용하기
   b. (없다. 다른 파일에서 받아오는 경우) 상위 컴포넌트에서 a를 진행하고, 이를 props로 받아온 다음 함수 적용하기
   2) JSON.stringify(useState로 관리되는 데이터, null, 2) 를 value로 설정하기

• 두 번째 인자는 replacer로 undefined나 속성이 다른 값을 null로 대체한다는 의미
• 세 번째 인자는 space 로, 2칸 들여쓴다는 의미

import React, { useState } from 'react';
import axios from 'axios';
 
const App = () => {
  const [data, setData] = useState(null);
  const onClick = async () => {
    try {
      const response = await axios.get(
        'https://jsonplaceholder.typicode.com/todos/1',
      );
      setData(response.data);
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <div>
      <div>
        <button onClick={onClick}>불러오기</button>
      </div>
      {data && <textarea rows={7} value={JSON.stringify(data, null, 2)} readOnly={true} />}
    </div>
  );
};
 
export default App;
     

useEffect 와 loading 함수

• 상황: loading이 필요할 때

• 뒷정리 함수이므로 async/await는 사용하면 안 된다.

• 단, 내부에서 async/await 함수를 만들어 사용하는 것은 가능하다.

• 설계
  1) 모듈 설치 & 하위 컴포넌트 가져오기
  2) useEffect 함수 작성
  3) loading과 articles 상태 다르게 나타내기
  4)articles 정보 컴포넌트에 props로 받아와 나타내기

1.모듈 설치 & 관리할 블록 가져오기
1) 모듈설치
import axios from 'axios';
2) (필요하다면) 하위 컴포넌트 가져오기
import NewsItem from './NewsItem';

2. useEffect 함수 작성
   1)async ~await 함수 작성
   2) async~ await 함수 불러오기
   3) 두 번째 인자에는 어떤 값이 업데이트될 때마다 전체를 리렌더링할지 배열로 가져오기
   (없다면 첫 렌더링 때만 함수가 생성된다)

(components/NewList.js)

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import NewsItem from './NewsItem';
import axios from 'axios';
 
const NewsListBlock = styled.div`
  box-sizing: border-box;
  padding-bottom: 3rem;
  width: 768px;
  margin: 0 auto;
  margin-top: 2rem;
  @media screen and (max-width: 768px) {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
`;
 
const NewsList = () => {
  const [articles, setArticles] = useState(null);
  const [loading, setLoading] = useState(false);
 
  useEffect(() => {
    // async를 사용하는 함수 따로 선언
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await axios.get(
          'https://newsapi.org/v2/top-headlines?country=kr&apiKey=0a8c4202385d4ec1bb93b7e277b3c51f',
        );
        setArticles(response.data.articles);
      } catch (e) {
        console.log(e);
              }
      setLoading(false);
    };
    fetchData();
  }, []);
 
  // 대기 중일 때
  if (loading) {
    return <NewsListBlock>대기 중...</NewsListBlock>;
  }
  // 아직 articles 값이 설정되지 않았을 때
  if (!articles) {
    return null;
  }
 
  // articles 값이 유효할 때
  return (
    <NewsListBlock>
      {articles.map(article => (
        <NewsItem key={article.url} article={article} />
      ))}
    </NewsListBlock>
  );
};
 
export default NewsList;
  

( 보충하기- pc 기준 325 페이지 )

category 기능 구현하기

• 상황: 카테고리가 필요하며 select효과를 주고 싶을 때

• 설계
  1) 카테고리 컴포넌트 디자인과 함께 만들기
  ( components/Categories.js)
  2)

import React from 'react';
import styled from 'styled-components';
 
const categories = [
  {
    name: 'all',
    text: '전체보기'
  },
  {
    name: 'business',
    text: '비즈니스'
  },
  {
    name: 'entertainment',
    text: '엔터테인먼트'
  },
  {
    name: 'health',
    text: '건강'
  },
  {
    name: 'science',
        text: '과학'
  },
  {
    name: 'sports',
    text: '스포츠'
  },
  {
    name: 'technology',
    text: '기술'
  }
];
 
const CategoriesBlock = styled.div`
  display: flex;
  padding: 1rem;
  width: 768px;
  margin: 0 auto;
  @media screen and (max-width: 768px) {
    width: 100%;
    overflow-x: auto;
  }
`;
 
const Category = styled.div`
  font-size: 1.125rem;
  cursor: pointer;
  white-space: pre;
  text-decoration: none;
  color: inherit;
  padding-bottom: 0.25rem;
 
  &:hover {
    color: #495057;
  }
 
  & + & {
    margin-left: 1rem;
  }
`;
const Categories = () => {
  return (
    <CategoriesBlock>
      {categories.map(c => (
        <Category key={c.name}>{c.text}</Category>
      ))}
    </CategoriesBlock>
  );
};
 
export default Categories;

2. 상위 컴포넌트( 이 경우 App.js) 작성하기
   1) 하위 컴포넌트 2개 받아오기
   2) 모듈 설치하기
   import React, { useState, useCallback } from 'react';
   3) category 값을 useState로 관리하기
   4) onSelect함수 작성하기
   5) categories 컴포넌트에 상태관리중인 category와 onSelect props 넣기
   6) NewList 컴포넌트에서 상태관리중인 category를 props로 넣기

(App.js)

import React, { useState, useCallback } from 'react';
import NewsList from './components/NewsList';
import Categories from './components/Categories';
 
const App = () => {
  const [category, setCategory] = useState('all');
  const onSelect = useCallback(category => setCategory(category), []);
 
  return (
    <>
      <Categories category={category} onSelect={onSelect} />
      <NewsList category={category} />
    </>
  );
};
 
export default App;

3. 하위 컴포넌트(1과 동일) 작성
   1) 에서 onSelect와 category를 props로 받아오기
   2)이를 하위의 하위 컴포넌트( < Category >) 의 key, active, onClick의 props로 세팅하기

• key={c.name}
  key는 카테코리의 이름이다.
• active={category === c.name}
  active는 카테고리와 c.name이 일치하느냐에 따라 다르다.
  (일치하는 이유는 onClick으로 해당 카테고리 이름이 category 상태관리에 업데이트되었기 때문이다. )
• onClick={() => onSelect(c.name)
  ( onClick으로 해당 카테고리 이름이 category 상태관리에 업데이트된다. )
  (팁: const onSelect = useCallback(category => setCategory(category), []); 으로 상위 컴포넌트에서 정의함)

const Categories = ({ onSelect, category }) => {
  return (
    <CategoriesBlock>
      {categories.map(c => (
        <Category
          key={c.name}
          active={category === c.name}
          onClick={() => onSelect(c.name)}
        >
          {c.text}
        </Category>
      ))}
    </CategoriesBlock>
  );
};

( components/Categories.js)

import React from 'react';
import styled, { css } from 'styled-components';
 
const categories = [
  (...)
];
 
const CategoriesBlock = styled.div`
  (...)
`;
 
const Category = styled.div`
  font-size: 1.125rem;
  cursor: pointer;
  white-space: pre;
  text-decoration: none;
  color: inherit;
  padding-bottom: 0.25rem;
 
  &:hover {
    color: #495057;
  }
 
  ${props =>
    props.active && css`
      font-weight: 600;
      border-bottom: 2px solid #22b8cf;
color: #22b8cf;
      &:hover {
        color: #3bc9db;
      }
  `}
 
  & + & {
    margin-left: 1rem;
  }
`;
const Categories = ({ onSelect, category }) => {
  return (
    <CategoriesBlock>
      {categories.map(c => (
        <Category
          key={c.name}
          active={category === c.name}
          onClick={() => onSelect(c.name)}
        >
          {c.text}
        </Category>
      ))}
    </CategoriesBlock>
  );
};
 
export default Categories;

4. 카테고리에 따라 다른 내용 api에서 가져오기
   1) 이전 포스팅에서 공부한 api 작업이 선행되어 있어야 함.
   2) category를
   3)category 값에 따라 api가 바뀌므로 useEffect의 두 번째 인자를 [category]로 넣어주기
   (components/NewsList.js)

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import NewsItem from './NewsItem';
import axios from 'axios';
 
const NewsListBlock = styled.div`
  (...)
`;
const NewsList = ({ category }) => {
  const [articles, setArticles] = useState(null);
  const [loading, setLoading] = useState(false);
 
  useEffect(() => {
    // async를 사용하는 함수 따로 선언
    const fetchData = async () => {
      setLoading(true);
      try {
      //category가 all이면 '', 아니면 &category=${category}`
        const query = category === 'all' ? '' : `&category=${category}`;
        const response = await axios.get(
          `https://newsapi.org/v2/top-headlines?country=kr${query}&apiKey=0a8c4202385d4ec1bb93b7e277b3c51f`,
        );
        setArticles(response.data.articles);
      } catch (e) {
        console.log(e);
      }
      setLoading(false);
    };
    fetchData();
  }, [category]);
 
  (...)
};
 
export default NewsList;