오늘 아주 코드를 작살을 냈다
이게 오늘 사담이 길어진 이유....아진짜....
처음에 나랑 같은 데이터 가공을 하게 된 팀원분과 공통 코드 만들고 거기서부터 시작을 했다
근데 엉엉 내가 어제 새벽까지 다 완성해놨는데
오늘 코드가 바뀌었다 큰 부분도 아니었다
date값을 recoil로 관리하게 된 거 그뿐...
처음에 공통 코드 짤때도 recoil 넣을거라 가정하고 비워두고 만들었었는데
실제 코드가 들어오니까 구조를 완전 다시 짜야했다...
react recoil cannot be called at the top level
💥recoil은 컴포넌트 함수 안에서만 쓸 수 있었기 때문이다...🕺
😎hook도 컴포넌트 함수 안에서만....💕
https://github.com/facebookexperimental/Recoil/issues/289
나와 같은 질문을 한 사람이 있다...당연함
There is a way to update states on recoilJS outside of component?
자 이제 문제는 내 지식으로는 답변을 이해할 수 없다는 것이다....
다들 안된다고만 한다 난 오늘까지 이걸 고쳐놔야하는데....
그래서 팀원분들께 help 때렸다
하하 코드 보여주면서도 민망했다 나도 짜면서 이거 이렇게 해도 되나...? 진짜 아닌거같은데 하면서도
일단 보이는 방향대로, 되는 방향대로 가다보니 탄생한 코드들이기 때문이다
처음에 reduce쓰다가 그냥 통일하려고 forEach 를 아주 노가다로 돌린 코드들.....
기존 방식
외부 > 계산하는 파일.ts에서 컴포넌트 생성 안없이 쌩으로 연산함. 연산 끝나면 걔는 그냥 거기에 결과값 그대로 있음routes > 출력하는 파일.tsx에서 거기 그냥 있던 결과값을 import 해서 출력함
어떻게 수정해주셨나면
routes > 출력하는 파일.tsx에서 함수를 소환하고 거기에 파라미터로 recoil로 관리하는 date를 넘겨줌
const date = useRecoilValue(dateState)
const data = getMediaData(date)외부 > 계산하는 파일.ts에서 함수 생성하고 props로 받은 date를 연산하고, record type 객체를 반환함
export const getMediaData = (date: IProps) => {
...
return filterDataClone
}routes > 출력하는 파일.tsx에서 넘겨받은 객체를 map으로 돌림
(+)
- hooks are still in alpha stage, the API may be changed in future, so use it in production on your own risk.
- You can not use hooks outside a component function, it is simply how they work. But, you can make a composition of hooks.
- React relies on an amount and order of how hooks appear in the component function. So don’t even think of wrapping those calls with conditional logic of some sort. Instead, you may put your if-s inside a hook body.
쏘바보같지만 ts랑 tsx랑 그래서 뭐가 달라? 알파벳 하나 더 붙은거 말고
Use .ts for pure TypeScript files. 👉 이번처럼 도와주는 함수들이 있다면 ts
Use .tsx for files which contain JSX. 👉 리액트 컴포넌트를 포함한다면 tsx
그래서 JSX elements가 뭔대?
https://ko.reactjs.org/docs/introducing-jsx.html
-
React에서는 본질적으로 ✌️렌더링 로직이 UI 로직✌️(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.
-
JSX는 객체를 표현합니다.
Babel은 JSX를 React.createElement() 호출로 컴파일합니다.
결론
외부 > 계산하는 파일.ts이건 데이터 가공만 하니까 ts라고 적어야한다.routes > 출력하는 파일.tsx는 출력까지 담당하니까 tsx라고 적어야한다
Consider adding an error boundary to your tree to customize error handling behavior.
어쩌라는거지
프론트엔드는 엄청 큰 포도밭 농장을 나 혼자서 운영하는 느낌적인 느낌
그리고 난 확실히 남 코드 염탐하면서 배우는게 많은 거같다...그래서 스터디를 하는건가보다
근데 멘토님처럼 나랑 너무 먼 분 코드 말고...ㅎ 내가 기어서 제주도에서 서울까지 간다면 자전거타고 제주도에서 서울가는 사람들 코드 염탐해보면 오 oh 하는거같다
내가 아직 쪼랩이라고 말하기에도 민망한 그냥 지나가는 사람수준이라서....하하 멘토님 코드는 fully 이해가 안됨 나중에 뇌가 가득찬다면 이해가 잘되겠지 일단 시키는대로 하는중🕺
