React (뉴스 가져오기, Styled Components)

 

 

News.js 파일 생성 

import { useState } from "react";
import axios from "axios";

const News = () => {
    const [data, setData] = useState('');
    const onClick = () => {
        axios.get("https://newsapi.org/v2/top-headlines?country=kr&apiKey=ffbbc82f694941a7b0e2d4f4515abcc7")    
        .then(response => {
            setData(response.data);
        });
    };

    return (
        <div>
            <div>
                <button onClick={onClick}>서버 정보 불러오기</button>
            </div>
            {data && <textarea row={7} value={JSON.stringify(data, null, 2)} />}
        </div>
    );
};

export default News;

 

 

App.js 파일에 News 추가

import './App.css';
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Setting from './pages/Setting';
import News from './pages/News';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/About" element={<About />} />
        <Route path="/Setting" element={<Setting />} /> 
        <Route path="/News" element={<News />} /> 
      </Routes>
    </Router> 
  );
};

export default App;

 

 

VsCode 터미널에서 'yarn add axios' 입력

 

 

 

 

Styled Components로 React 스타일 하기

CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법

기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 best practice로 여겨졌다.

하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 웹개발의 패러다임이 바뀌고 있다.

최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있다.

따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 모두 넣는 패턴이 많이 사용되고 있다.

React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS-in-JS 라이브러리만 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있다.

 

VsCode 터미널에서 'yarn add styled-components' 입력

 

vscode-styled-components 설치

 

 

 styled-components패키지에서 styled함수를 import 한다. 

import styled from "styled-components";

styled.button`
  font-size: 1rem;
`;