[질문] state가 변경된 후에 이후 작업을 처리하려는데

[익명(39.7)]

useEffect를 써야할거같음
근데 상태가 많으면 코드 가독성이 좋지 못할것으로 예상해서 다른 방법을 찾는중이야
리액트도 처음이고 next도 첨이라 많은 조언 부탁함

[익명(106.102)]

뭘하려는건진 코드를 봐야 알수있겠는데 사이드이펙트 처리할꺼 아니면 useEffect를 쓰는건 좋지않음 정확히 어떤걸 처리할껀지 코드를 보여줘

[익명(39.7)]

엄 회사코드에다 아직 적용은 안된거라 보여줄수는 없고 대충 useState로 만든 변수 a b c가 있다고하면 a가 먼저 저장되고 그 이후에 a의 값을 기반으로 b c를 변경하고 싶음

[익명(106.102)]

이벤트 핸들링 안에서 state 업데이트 함수를 처리하는거면 변수에 state 업데이트 값을 넣고 그 변수를 참조하도록 하면됨

[익명(106.102)]

const newData = 업데이트 내용 setStateA(newData) setStateB(newDate를 이용한 데이터 업데이트값)

[익명(39.7)]

만약 a가 업데이트된 후에 특정 로직을 수행해야하면 그럴땐 어떻게함?

[익명(106.102)]

a 업데이트가 퇸걸 화면에 보여준 후 b c를 처리해야된다는 말임?

[익명(iiilllama)]

b, c는 computed state니까 useMemo 쓰면 됨

[익명(39.7)]

좀 추상적이긴한데 리액트나 넥스트에서 동기적으로 로직을 처리하는 방법을 알고싶음

[익명(106.102)]

아니 state는 큐에 쌓아놨다가 한번에 처리하는거라 같은 스코프 내에서 여러 state를 동기적으로 처리하는건 안됨 가능은 한데 컴포넌트가 그만큼 랜더링되버려서 성능 확떨어짐 변수에 넣고 그걸 참조하는 방법이 제일 좋고 아니면 a가 항상 다른 state와 같이 업데이트 된다면 a를 useRef로 만드는 방법도 있음 이러면 일반 변수처럼 인터프린트 형태로 참조 가능함

[익명(39.7)]

엄..어렵구만 공부가 아직 부족한가봄 둘다 답변 감사

[익명(223.38)]

prevState하면 안되노 ? - dc App

[익명(211.209)]

pages로 따지자면 getServerSideProps나 getInitialProps에서 하던로직을 리액트에서 끌고와서 하고싶다는 이야기지?

[익명(211.209)]

useEffect로 처리하는게 가장 기본적이긴한데.. 많이 복잡해지면 useEffect 비추.

[익명(211.209)]

다른 방법은 너가 구현하고 싶은 그 흐름이 있는 로직의 각 요소들을 컴포넌트로 변환해서 감싸주는 방법이 있음. 예를들어 하고싶은 로직이 1. await a(); 2. b(); 이런 로직이 있다 하면 {Suspense}{A}{B/}{A/}{/Suspense} 이런식으로 코드를 변환해서 짤 수 있음. A 로직 완료하면 B 랜더링하고 B로직 완료하면 그 다음 children 컴포넌트 그리고.. 이런식으로.. 이런 케이스들은 useMemo, useState로 억지로 상태화 만들어서 풀기보단 컴포넌트를 감싸서 푸는게 젤 깔끔하게 떨어짐.

[익명(39.7)]

아 한 컴포넌트안에서 훅으로 처리하는 것보다 컴포넌트로 쪼개는 방법인가

[익명(211.209)]

ㅇㅇ 훅으로 하게되면 문제가 뭐냐면, 훅 자체의 실행을 멈추게 하거나 조건적으로 실행하거나 이런 컨셉이 안먹혀서 힘듬. 그냥 컴포넌트 쪼개는게 낫고, useEffect도 deps 늘어나면 관리 불가야

[ㅇ.ㅇ.ㅇ(118.38)]

vue 하세여. 내가 생각한 그대로 작동합니다. 왜 리액트를 해서 이 고생을 하시죠 - dc App

[CreeJee(000as00060)]

reducer 내에서 로직을 짜거나 진짜 상태가 조따 복잡하면 xstate써

[익명(211.209)]

useReducer나 xstate는 transition이 중요한 케이스에서 쓰는거지 그냥 절차적 로직을 표현하려고 사용하는건 씹오버엔지니어링임

[CreeJee(000as00060)]

그건 맞긴한데 진짜 절차적인지 모르겟음

[CreeJee(000as00060)]

그리고 xstate가 오버엔지니어링일순있는데 리듀서가 오버엔지니어링인지는 모르겟음

[CreeJee(000as00060)]

그와 별계로 저거는 useState 와 useMemo선에서 될것같다는 생각도 드내 다시보니

[익명(211.209)]

내가 말하는 오버엔지니어링이라는건 xstate나 useReducer처럼 절차적흐름을 finite state machine으로 해석해서 바라보는 방식이 오버엔지니어링이라는거임

[익명(211.209)]

useState, useMemo도 방법이긴한데, 문제는 확장성이랑 비동기 로직에 불리함. 만약 그 절차로직에 비동기가 껴있다 그러면 위에서 말한 컴포넌트를 감싸는 방식이 젤 깔끔.

[익명(211.209)]

왜냐면 리액트는 단일 상태에 대해서는 promise로 다루는 방법을 제공해주지 않지만, 컴포넌트 랜더링은 비동기로 랜더링해주는 방법을 제공해주기 때문.

[익명(211.209)]

근데 님말듣고 생각해보니까 걍 useMemo, useState로 풀어도 될 문제긴 하겠네