yamoo9 / likelion-FEQA

질문/답변 — 프론트엔드 스쿨, 멋사
29 stars 9 forks source link

[LAB-4] Recoil의 값으로 함수를 설정해줄 순 없는 건가요? #295

Closed SeoMiYoung closed 1 year ago

SeoMiYoung commented 1 year ago

질문 작성자

서미영

문제 상황

리코일 안에서 함수를 관리하려고 합니다.

// 확인 버튼
export const alertModalConfirmBtn = atom({
  key: 'alertModalConfirmBtn',
  default: ()=>{console.log("함수입니다.");},
});

이런식으로 default값에 ()=>{...} 함수를 넣어주고, useRecoilValue를 통해 값을 사용하려고 하면, 함수를 인식하지 못하는 것 같습니다.

혹시 코드를 잘못 작성했나, 궁금해서 default값에 함수대신, 문자열을 넣어보았더니, 예상했던대로 잘 작동을 합니다. 오직, 함수를 넣어줄때만 작동이 제대로 되지 않습니다.

팀원들에게 물어봤더니, 저런형태가 왜 안되는지 잘 모르겠다고 합니다. ㅠㅠㅠ 결국 지금까지 해결하지 못했습니다. 혹시 default자체에 함수를 넣어주는게 잘못된 사용인가요?? 정말 궁금합니다!!

코드 검토 리소스

React는 구성된 개발 환경에 따라 문제 상황이 다르고, 상황을 정확히 분석해야 문제를 해결할 수 있습니다. 문제 상황을 온라인 개발 도구 환경에서 구현하여 제시하거나, GitHub 저장소를 이용해 질문주시길 바랍니다.

환경 정보

환경과 관련된 문제가 의심될 경우 작성합니다. (입력 선택 사항)

yamoo9 commented 1 year ago

Recoil 개념(Concepts)

Recoil 공식 문서 주요 개념를 읽어보면 아톰(Atoms)에 대해 다음과 같이 기술합니다.

Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다.

상태(States)

문서가 기술 하듯이 상태란? 업데이트 가능한 데이터입니다. 상태가 업데이트 되면 상태를 구독하는 컴포넌트는 업데이트 된 값에 의해 다시 렌더링 됩니다.

함수(Functions)

그렇다면 함수는 업데이트 가능한 데이터인가요? 정확히 말해 함수 내부의 로직을 업데이트 할 수 있나요? 함수는 선언된 이후 함수 외부에서 전달 받은 인자를 함수 내부에서 매개 변수로 받아 로직에 따라 결과를 반환합니다.

함수를 상태로서 업데이트 하려는 것이 아니라, 함수에 인자를 전달해 결과 값을 사용하려면? 아톰 패밀리(Atom Family)를 사용하세요.

정리(Conclusion)

함수 타입은 함수 모듈 파일에서 내보내고 컴포넌트 파일에서 불러와 사용하세요. Recoil로 관리하는 것은 적절하지 않습니다. 😊

데모 참고

@SeoMiYoung 님께서 질문한 아톰 상태로 함수를 관리하는 경우와 모듈로서 함수를 관리하는 예시를 아래 데모에서 참고하세요.

https://stackblitz.com/edit/vitejs-vite-jybj2i?file=src/App.tsx