Recoil 익숙해질 겸 예제 만들어보기

Recoil이 아직 물론 Redux 보다 아직 사용량도 적고 인식도 적겠지만 개인적으로 난 처음 접했을 때 너무 편했고 기존 리액트 훅과 비슷한 면도 있어서 아마 트렌드가 빠르게 바뀌는 프론엔드에서는 곧 Recoil이 Redux를 따라잡지 않을까 하는 생각도 해본다. 그런 의미에서 가볍게 예제를 한 번 더 만들어보자. 

 

 

 

 

 

 

Atom.js

import {atom} from 'recoil';

export const usernameState = atom({
  key:'username',
  default:''
});

export const arrayState = atom({
  key:'samplearray',
  default: [
    1,2,3,4,5,6,7,8,9,10
  ]
});

 

Profile.js

 

import React from 'react';
import {useRecoilState} from 'recoil'
import { usernameState } from './atom';

const Profile = () => {

  const [useranme, setUsername] = useRecoilState(usernameState); // useState랑 판박이
  

  return(
  <>
      <h2>Profile</h2>    
      <div>{useranme}</div>
      <input type="text" value={useranme} onChange={(e) => setUsername(e.target.value)} />
  </>
  )
}

export default Profile;

 

 

CountingChar.js

import React from 'react';
import {selector, useRecoilValue, useRecoilState} from 'recoil'
import { arrayState, usernameState } from './atom';


const CountingChar = () => {

  const countState = selector({
    key:'count',
    get: ({get}) => {
        const username = get(usernameState);
        return username.length;
    }
  });

  const array = useRecoilValue(arrayState);
  const array2 = useRecoilState(arrayState);
  console.log(array2);
  const count = useRecoilValue(countState);



  return(
    <> 
    <br></br>
      {count}
      {array}
      {array2}
    </>
  )
}

export default CountingChar

 

App.js

import './App.css';
import React from 'react'
import { useRecoilState,useRecoilValue} from 'recoil'
import Profile  from './Profile';
import CountingChar from './CountingChar';
import { usernameState } from './atom';


const App =() => {

    const user = useRecoilValue(usernameState);

    const [user2, setUser2] = useRecoilState(usernameState); // recoilvalue 말고 state로도 상태값 나타내기 가능

    return (<>
        <Profile />            
        <CountingChar />
        {user}
        <br />
        {user2}
    </>
    )
}

export default App;

 

 

** selector는 순수함수로서 상태값을 이용해서 어떤 값을 가공해서 나타내고 싶을 때 사용하는 함수다. 

 

** 단순히 읽기전용으로 컴포넌트에서 값을 나타내고 싶을 때는 useRecoilValue()를 사용한다. 

 

** Atom.js 파일을 따로 만들어서 전역값들에 대한 정리를 해주는 것이 편하다.