[TIL] 23Y01M27D
![[TIL] 23Y01M27D](/assets/img/til.png)
Facts(사실, 객관)
회사에서 RN 프로젝트를 진행하면서 상태관리가 필요했다. 이제 퇴사를 예정하고 계시는 프론트분한테서 인계 받으면서 RN 프로젝트의 프론트 부분은 내가 맡아서 하게 되었고 인수자는 LocalStorage를 사용하여 상태관리를 하고 있었다. 그리고 내가 해야하는 작업중 또 다른 하나는 DB에 날짜 데이터를 Unix Time를 사용하고 있어 프론트에서 날짜 형식으로 보여주기 위해서 Unix Time를 바꿔줄 필요가 있었다.
Feelings(느낌, 주관)
아직 상태관리에 대해서 많은 것을 해보지 않아 익숙하지 않았고 Redux는 클론 코딩에서 한번 사용해본 기억이 있었다. Redux같은 상태관리는 꽤 큰 프로젝트에서 사용한다고 커뮤니티에서 얘기를 들었는데 지금 내가 진행하고 있는 프로젝트는 꽤 큰 프로젝트가 아니었기에 효과를 위해 다른 상태관리가 없는지 찾아보게 되었고 찾은 상태관리가 Recoil이다.
Unix Time같은 경우 처음 들어보는 것이었고 모든 것은 시간으로 변환해서 나타내어서 신기하기도 했다. 그렇지만 이 Unix Time을 Date Object로 바꾸기 위해 구글링을 하였다.
Findings(배운 점)
Recoil의 개념에 대해서 깊게 살펴보지는 않았지만 사용을 위해 간략하게 살펴보니 생각보다 사용하기 편했다. 약간 useState를 전역에서 사용하는거 같다는 생각이 들었다. 먼저 사용하기위해 root폴더에 Atoms폴더를 생성하였고 그 안에 내가 사용하려고 하는 상태 값을 작성했다. 이후 그 값을 useRecoilState를 사용해 가지고 와서 useState와 동일한 방법으로 상태 값을 변경하고 사용하니 전역에서 사용이 가능해 신기하고 편했다.
Unix Time같은 경우 DB에서 값을 받아오면 new Date()를 이용해 ms단위인 Unix Time에 1000을 곱해줘야한다.
Example Code
/* Atoms > index.tsx */
import { atom } from 'recoil';
import { UserInfo } from '../types/index';
export const UserInfo = atom<UserInfo>({
key: 'userInfo',
default: {
name: '',
id: '',
password: '',
phone: '',
email: '',
},
/* Main Page */
const [userInfo, setUserInfo] = useRecoilState(UserInfo);
setUserInfo(userInfo) // 유저정보를 Recoil을 사용하여 저장
useEffect(() => {
console.log(useInfo.name) // useInfo에 저장한 값 가져오기. 다른 컴포넌트에서도 전역적으로 사용 가능!
}, [userInfo])
/* Unix Time */
const Unix_timestamp = (t: number) => { // Unix_timestamp 함수를 호출해서 DB에서 가져온 Unix Time을 넣어준다.
const date = new Date(t * 1000);
const year = date.getFullYear();
const month = '0' + (date.getMonth() + 1);
const day = '0' + date.getDate();
const hour = '0' + date.getHours();
const minute = '0' + date.getMinutes();
const second = '0' + date.getSeconds();
return (
year, month, day, hour, minute, second
);
};
Affirmation(자기 선언)
요즘 React에서 가장 많이 사용되는 상태 관리 라이브러리인 Redux에 대해서도 배워야겠다고 생각이 들었다. Recoil같은 경우 비교적 최신에 생겨난 상태 관리 라이브러리이지만 다른 사람들과 협업을 할때 그 사람들이 Redux를 선호하게 되면 나도 Redux를 사용해야하는 상황이 발생할 수 있기 때문에 Redux도 조금씩 공부해야겠다.
그리고 const와 let의 차이점은 어느정도 알지만 구글링을 해보니 hoisting이라는 개념 그리고 useState를 이용해서 값을 변경하는 개념들 아직 배울 것이 많다고 생각이 들어 모르는 내용들은 주말에 조금씩 블로그에 남겨야겠다고 생각했다.
