TIL - 220510

LEE JI YOUNG·2022년 5월 10일
0

TIL

목록 보기
8/9

  • 참고 - Recoil의 기본, Atom
    • atom 은 기존의 redux에서 쓰이는 store 와 유사한 개념으로, 상태의 단위.
      : atom이 업데이트 되면, 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더 됨. unique 한 id인 key로 구분되는 각 atom은, 여러 컴포넌트에서 atom을 구독하고 있다면 그 컴포넌트들도 똑같은 상태를 공유함(상태가 바뀌면 바뀐 값으로 해당 컴포넌트들이 re-render 됩니다)
    • atom 작성 : usage 또한 hook과 거의 유사한 형태
      • key로 고유한 atom을 구분
      • default에 기본으로 atom에 저장되는 값을 지정
      • 구조 분해 할당으로 state와 state를 set 하는 함수를 각각 cookies와 setCookies에 받고, 이를 통해 atom의 state에 어떤 컴포넌트에서든 전역으로 받아올 수 있고, setCookies로 state를 변경 가능.
      • 어떤 컴포넌트에서 state를 변경하더라도 이를 구독하고 있던(사용하고 있는) 컴포넌트들은 모두 그 값이 갱신되어 리렌더된다.
      • atom 만을 사용해서는 비동기 처리를 할 수 없다.
// state.js
export const cookieState = atom({
  key: 'cookieState',
  default: []
});

//Cookie.js
import React from 'react'
import { cookieState } from '../../state';
import { useRecoilState } from 'recoil';
const Cookie = () => {
	const [cookies, setCookies] = useRecoilState(cookieState);
    return(
      <div>
        {cookie.map(cookie => (
         <Card
            cookies={cookie}
            key={cookie.id}
            idx={cookie.id}
          />))}
      </div>
    );
}
export default Cookie;

  • 리드미 : 프로젝트를 어떻게 설계할 것인지, 리드미는 폴더구조를 설계할 수 있도록 쓴다.
  • any 금지
  • 올릴때 console.log 삭제
profile
프론트엔드 개발자

0개의 댓글