50강_230711_React(styled-components, redux-thunk, weather API로 페이지 생성)

 

 

목차

050

1. Styled-components 2. redux-thunk 3. weather API를 이용한 간단한 사이트 제작

 

 

 

---

Styled-components

• 대표적인 CSS-in-JS 라이브러리이다.
• 클래스 명을 겹치지 않도록한다.
• 스타일에 관련되어서 props로 값을 전달해서 스타일 값을 적용시킬 수 있다.

💡 CSS-in-JS

• 스타일 정의를 CSS 파일이 아닌, JS로 작성된 컴포넌트에 바로 삽입되는 스타일 기법이다.
• 기존에 웹 사이트를 개발했을 때는  HTML, JS, CSS를 각자 별도의 파일에서 작업하는 것을 권장하였지만, react, Vue 등의 모던 자바스크립트 라이브러리가 인기를 끌면서 패러다임의 변화가 찾아왔다.

 

설치

npm i styled-components

 

기본문법

import styled from "styled-components";

export const TestBtn = styled.button`
  border: 2px solid red;
  width: 200px;
  height: 50px;
`;

// Test 컴포넌트에 div태그를 지정하고 해당 태그의 style을 설정한다.
export const Test = styled.div`
  /* vscode 확장 프로그램 설치 : vscode-styled-components */
  border: 1px solid;
  background-color: blue;
  /* 컴포넌트로 전해진 props 값이 있으면 해당 값으로 지정. 아니면 width: 500px; */
  width: ${(props) => props.width || "500px"};
  height: 500px;
  // & : 스타일이 적용되고 있는 대상
  // 대상의 자식으로 login-title의 클래스를 가지고 있는 대상의 스타일을 적용한다.
  & .login-title {
    color: white;
    font-size: 15px;
    text-align: center;
  }

  // 선언이 되고 나서 사용이 되어야 하기 때문에 TestBtn 함수가 위에 있어야 한다.
  // 해당 컴포넌트는 js코드이므로 템플릿 리터럴로 감싸줘야 한다.
  & ${TestBtn} {
    background-color: rgb(200, 190, 190);
  }
`;

 

 

 

 

---

redux-thunk

• 비동기 작업을 처리할 때 많이 사용하는 미들웨어다.
• 객체가 아닌 함수형태의 액션을 디스패치할 수 있게 해준다.
• dispatch를 딜레이 시켜주는 역할이다.

store 적용 시 applyMiddleware로 thunk를 미들웨어로 적용시켜 준다.

• applyMiddleware : 반환되는 객체로 함수 미들웨어 추가

import { createStore, applyMiddleware } from "redux";
import reducer from "./reducer";
// 사용할 미들웨어는 thunk
import thunk from "redux-thunk";


export const store = createStore(reducer, applyMiddleware(thunk));

 

 

 

 

---

weather API를 이용한 간단한 사이트 제작

1. index.js_store를 사용할 수 있도록 Provider를 설정한다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
// 리덕스의 스토어를 사용할 수 있도록
import { Provider } from "react-redux";
import { store } from "./redux/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();

 

2. loginAction.js_action으로 기능이 동작할 함수를 선언한다.

function login(id, pw) {
  // 매개변수로 dispatch를 받고 함수로 반환한다.
  return (dispatch) => {
    dispatch({ type: "LOGIN", payload: { id, pw } });
  };
}

function logout() {
  return function (dispatch) {
    dispatch({ type: "LOGOUT" });
  };
}


export const logins = { login, logout };

 

3. index.js_로그인을 실행해줄 영역을 설정한다.

• 컴포넌트에서 style을 고정값으로 지정해줄 수 있다.

import React from "react";
import { LoginBoxWrap, LoginBoxInput } from "./Login.styled";

const LoginBox = () => {
  return (
    // width={"1000px"} - props 값으로 width 키로 넘어가는데 "1000px"라는 값이 넘어가는데
    //  그럼 스타일 작업할 때 동적으로 스타일을 주고 싶으면 어떻게 하지?
    <div>
      <LoginBoxWrap width={"500px"}>
        <p className="login-title">로그인 박스</p>
        <LoginBoxInput>버튼</LoginBoxInput>
      </LoginBoxWrap>
    </div>
  );
};

export default LoginBox;

 

4. weatherAction.js_API를 불러와 입력하는 지역에 맞는 날씨 정보를 받아온다.

// 요청 응답을 처리할 때
// axios
// 요청 응답 처리를 해줄 겁니디.
// axios 설치
// npm i axios

import axios from "axios";

function getWeather(name) {
  return async (dispatch) => {
    // api 작업. 데이터 요청
    const data = await axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${name}&appid=개인 API Key`
    );
    // 요청의 처리가 끝나면
    dispatch({ type: "GET_WEATHER", payload: data });
  };
}

export const weather = { getWeather };

5. build 작업을 수행하여 코드 실행을 최적화한다.

npm run buil

 

 

 

 

 

 

• styled-components
  • https://www.daleseo.com/react-styled-components/
• react-thunk
  • https://react.vlpt.us/redux-middleware/04-redux-thunk.html