[React] 6주차 스터디 - 프로젝트 진행에 도움이 되는 기능들

1. styled-components (링크)

React에서 스타일링을 하는 방법은 여러 가지가 있습니다. 그 중에서도 styled-components는 일명 CSS in JS 기술의 일종으로, JavaScript 안에 CSS를 작성하는 것을 의미합니다. styled-components 는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리입니다. 그래서 이번 스터디에서 한번 사용해보기로 결정하였습니다!

일반 CSS와의 차이

리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 컴포넌트에 import해서 사용하는 것입니다. 우리가 HTML 문서를 작성하고 .css 파일을 작성하는 것과 똑같습니다.

또는 CSS 클래스 중첩 방지를 위해 .module.css 확장자를 사용하기도 합니다.

사용법

1. 설치하기

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

2. import

import styled from "styled-components";

3. 사용하기

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
...
return (
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

 

2. Google 소셜 로그인 (링크)

짧은 시간 안에 개발해야 하는 상황에서 직접 회원가입 및 로그인 기능을 구현하기엔 어려움이 있습니다. 그리고 사용자들도 귀찮은 건 싫기 때문에 회원가입을 꺼려하곤 합니다.

이럴 때 소셜 로그인 기능을 사용하면 손쉽게 로그인을 구현하고 사용자 정보를 받아올 수 있습니다.

사용법

1. 설치하기

# with npm
npm install react-google-login

# with yarn
yarn add react-google-login

2. 사용하기

// GoogleBtn.js

import { useState } from 'react';
import GoogleLogin, { GoogleLogout } from 'react-google-login';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUserCircle } from "@fortawesome/free-solid-svg-icons";

function GoogleBtn() {
    const [islogin, setLogin] = useState(false); // 로그인 여부
    const clientId = "클라이언트 아이디";
    
    	// 성공 함수
		const onSuccess = async(response) => {
        	const params = new URLSearchParams();
    		params.append("idToken", res.tokenObj.id_token);

			// 서버에 전송 (예시)
			axios.post("요청 주소", params)
                .then(response => {
					localStorage.setItem("accessToken", response.data.token.access);
					setLogin(true);
				}).catch(error => {
					alert("로그인에 실패하였습니다.");
					console.log(error.response.data);
				});
    }

	// 실패 함수
    const onFailure = (error) => {
        console.log(error);
    }

	// 로그아웃
    const logout = () => {
        alert("로그아웃 되었습니다.");
        setLogin(false);
        window.location.href = "/";

        // 브라우저에서 정보 삭제
        window.localStorage.removeItem("accessToken");
    }

    return(
        <div>
            {islogin ? (
			  <div>
                <GoogleLogout
                  clientId={clientId}
                  buttonText='Logout'
                  onLogoutSuccess={logout}
                  className={styles.logout}
                />
                <Link to="/mypage"><FontAwesomeIcon icon={faUserCircle} size="2x" /></Link>
              </div>
            ) : (
              <GoogleLogin
                clientId={clientId}
                buttonText='Login'
                responseType={"id_token"}
                onSuccess={onSuccess}
                onFailure={onFailure}
                isSignedIn={true}
              />
            )}
        </div>
    )
}

export default GoogleBtn;

 

(참고) Google Cloud Platform에서 OAuth 설정하는 방법

https://alpoxdev.tistory.com/15

[React.js] 리액트js 구글 로그인 구현하기

 

3. FormData

자바스크립트에서 HTML 폼 태그의 데이터를 동적으로 제어할 수 있는 기능입니다. <form> 태그가 있는데 굳이 FormData를 사용하는 이유가 궁금하실 거예요. 아래의 경우 FormData를 사용하면 좋습니다.

• 이미지, 파일 등 멀티미디어 데이터를 전송하고 싶을 때
• 페이지 전환 없이 폼 데이터를 비동기로 제출하고 싶을 때
  • 보통, form을 제출하면 action 속성에 의해 지정한 페이지로 이동하면서 데이터를 전송합니다. 반면에 FormData는 제출 버튼을 누르면 기본 폼 동작은 e.preventDefault()로 멈추고, 페이지 전환 없이 데이터를 전송합니다.

사용법

uploadData = async() => {
    // 폼 데이터 생성
    let body = new FormData();
    let photo = {
        uri: picture.uri ,
        type: 'multipart/form-data',
        name: 'filename.jpg'
    }
    body.append('image', photo);
    
	// 서버에게 전송
    axios.post("요청 주소", body, {
        headers: {'content-type': 'multipart/form-data'}
    })
}

 

참고 자료

• https://inpa.tistory.com/entry/JS-📚-FormData-정리-fetch-api
• Node.js 교과서 개정2판
• 벨로퍼트와 함께하는 모던 리액트 2장
• https://alpoxdev.tistory.com/15