[e4] Recoil의 시작

학습을 시작하며 >>
이번 미니 프로젝트를 진행하며, Redux가 지금 수준의 자신과 동료들에게 끼치는 영향에 대해 생각해 보았습니다. Redux는 정말 강력한 상태관리 라이브러리지만, 그 기능을 전부 학습하기에는 교환비가 낮은 편이고, 상태와 데이터 통신의 전역화. 단지 이 명제를 충실히 이행하며, 러닝커브가 낮은 스택을 도입하기 위해 고민하였고, 최종 프로젝트를 앞두고 새로 학습을 시작하였습니다.

Recoil의 장점 >>

• 러닝 커브가 낮고, React의 문법을 대부분 계승하고 있어, 초기 개발자의 협업에 매우 유리합니다.
• 필수 요소가 되는 코드의 양이 적고, Redux보다 나은 성능 최적화를 보여줍니다.
• 최근 한국의 개발 업계에서 많이 사용되고 있는 것으로 보여, 현업에서 바로 적응하기에 유리합니다.

간단한 Submit 예제를 바탕으로 개념화한 Recoil의 소스코드 >>

1. Submit.tsx

import React from "react";
import { postUser } from "../api/SubmitApi";
import { useRecoilState } from "recoil";
import { usernameState, passwordState } from "../global/SubmitState";

const Submit: React.FC = () => {
  const [username, setUsername] = useRecoilState(usernameState);
  const [password, setPassword] = useRecoilState(passwordState);

  const onSubHandler = () => {
    postUser(username, password);
  };
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column" }}>
        <h3>SUBMIT PAGE</h3>
        <input
          type="text"
          name="username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          style={{
            borderRadius: "7px",
            height: "25px",
            width: "200px",
            marginBottom: "11px",
          }}
        />
        <input
          type="password"
          name="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          style={{
            borderRadius: "7px",
            height: "25px",
            width: "200px",
            marginBottom: "11px",
          }}
        />
      </div>
      <button
        onClick={onSubHandler}
        style={{ backgroundColor: "yellowgreen" }}
      >
        submit
      </button>
    </>
  );
};

export default Submit;

2. SubmitState.ts

import { atom } from "recoil";

export const usernameState = atom<string>({
  key: "usernameState",
  default: "",
});

export const passwordState = atom<string>({
  key: "passwordState",
  default: "",
});

3. SubmitApi.ts

import axios from "axios";
import { SubmitType } from "../model/types";
const api = {
  users: "http://localhost:4000/users",
};

export const postUser = async (username: string, password: string) => {
  try {
    const requestData: SubmitType = {
      username,
      password,
    };
    const res = await axios.post(api.users, {
      data: requestData,
    });
    console.log(res);
  } catch (error) {
    console.error(error);
  }
};

4. types.ts

export type SubmitType = {
  username: string;
  password: string;
};

마치며 >>
기본 코드의 양이 현저하게 적습니다. Redux Toolkit과 비교해도 그 편의성을 비교할 수 없습니다. TypeScript와 함께 사용해도, 그 복잡성이 높지 않아, 개발 일정 관리에 효과적일 것으로 예상 됩니다. Recoil 문법으로는 atom과 useRecoilState() 만을 사용했지만, 손쉽게 상태들을 관리할 수 있었고, 리액트 컴포넌트 최적화 작업에도 가독성이 좋아, 간편하게 작성할 수 있었습니다.