05. 공통 컴포넌트 (이후 수정할 예정)

혼자 프로젝트를 제작하다가 책에 좋은 부분이 있지 않을까 싶어 참고했는데
내가 미쳐 알지 못했던 부분이 있어 책 보고 만들게 되었다.
따라만 치면 안되니까 코드해석을 진행해보자.
아직 프로젝트가 끝난 것은 아니지만 중간중간에 다시 한 번 되새기기 위해 작성하고 있다.

주로 쓰는 HEX 코드

UseColor.js

const UseColor = {
    Blue:[
        '#e7f5ff', // blue 0
        '#d0ebff', // blue 1
        '#a5d8ff', // blue 2
        '#74c0fc', // blue 3
        '#4dabf7', // blue 4
        '#339af0', // blue 5
        '#228be6', // blue 6
        '#1c7ed6', // blue 7
        '#1971c2', // blue 8
        '#1864ab'// blue 9
    ], //
    Cyan: [
        '#e3fafc', // Cyan 0
        '#c5f6fa', // Cyan 1
        '#99e9f2', // Cyan 2
        '#66d9e8', // Cyan 3
        '#3bc9db', // Cyan 4
        '#22b8cf', // Cyan 5
        '#15aabf', // Cyan 6
        '#1098ad', // Cyan 7
        '#0c8599', // Cyan 8
        '#0b7285' // Cyan 9
      ], //
      Indigo:[
        '#edf2ff', // indigo 0
        '#dbe4ff', // indigo 1
        '#bac8ff', // indigo 2
        '#91a7ff', // indigo 3
        '#748ffc', // indigo 4
        '#5c7cfa', // indigo 5
        '#4c6ef5', // indigo 6
        '#4263eb', // indigo 7
        '#3b5bdb', // indigo 8
        '#364fc7'// indigo 9
      ]
      
}

export default UseColor;

기존에 작성했던 프로젝트에서 색상을 정할 때는 HEX 코드를 하나하나 입력했다.
책에서 본 것 처럼 생각해보니까 자주 쓸 것 같은 것들은 위 코드처럼 미리 작성해놓으면 뽑아 쓰기 편할 것 같다.
그래서 내가 쓰려는 색상 위주로 HEX 코드를 작성했다.

Button 컴포넌트

이전까지는 버튼을 만들 때 하나하나 작성해서 만들었었다.
그런데 책에서 보고 느낀 점이 버튼 컴포넌트를 만들고 재사용하면 되지 않나 !? 였다.
리액트의 장점인 재사용성을 여기서 쓰면 되는데 바보처럼 행동하고 있었다.

Button.js

import styled from "styled-components";
import UseColor from "../../lib/styles/UseColor";

const StyledButton = styled.button`
border: none;
border-radius: 5px;
font-size: 15px;
font-weight: bold;
padding: 0.25rem 1rem;
color: white;
outline: none;
cursor: pointer;

background: ${UseColor.Indigo[4]};
&:hover{
    background: ${UseColor.Indigo[6]};
}
`;

const Button = props => <StyledButton {...props} />;

export default Button;

StyledButton을 렌더링 할 필요는 없지만 해당 컴포넌트를 사용할 때 자동으로 import 되게 하기 위해 작성했다.
(제대로 작동하지 않을 수도 있으니까!)

Button이 받아오는 props를 모두 StyledButton에 전달하기 위해 {...props}를 설정해주었다.

import Button from '.../Button';
 
  const 파일명 = () => {
    return (
      <Button>
        버튼
      </Button>
    );
  };
  
  export default 파일명;

으로 렌더링을 해보니 버튼이 나오는 것을 볼 수 있었다.

리덕스 적용

비동기 작업을 관리하는 과정에서 redux-saga를 쓸 텐데,
아직은 지식이 많지 않아 프로젝트에 리덕스를 적용하는 과정만 다룰려고 한다.

(참 신기한게 하면 할수록 공부를 더 해서 빨리 내가 한 번 쓰고 싶다. 라는 생각만 든다.)

우선 리덕스에 필요한 라이브러리를 설치하자!

yarn add redux react-redux redux-actions immer redux-devtools-extension

(해당 명령어를 왜 쓰는지 게시글로 따로 작성할 계획이다.)
redux - JS 상태관리 라이브러리 (본질은 Node.js 모듈이다.

react-redux - Redux의 공식 React UI 바인딩 레이어
(React 구성 요소가 Redux 저장소에서 데이터를 읽고 저장소에 작업을 전달하여 상태를 업데이트 할 수 있다.)

redux-actions - 리덕스의 액션들을 관리하기 위해 유용한 createAction과 handleActions가 있다 !

createAction -
handleActions -


immer - 불변성을 유지하는 코드를 작성하기 쉽게 해주는 코드

redux-devtools-extension - 중복 렌더링 방지, 효율적인 State값 관리, 보기 좋은 Redux 코드 작성 가능!

UI 준비 !

import styled from `styled-components';

회원가입 또는 로그인 폼

const AuthFormBlock = styled.div``;

const AuthForm = () => {
	return (
		<AuthFormBlock>
			AuthForm
		</AuthFormBlock>
	);
};
 
export default AuthForm;

04.01에 이후 수정할 예정