[질문] setState사용시 하위level 컴포넌트 버벅임현상

[익명(121.135)]

초록색글씨만 보면 댐

Clock 컴포넌트는 시간나타내주는 컴포넌트고

밑에 loggedin state를 검사해서 로그인 이전, 이후 나타내는 컴포넌트를 다르게 하고 싶은데

상위 level에 속한 Clock컴포넌트가 1초마다 refresh 되니까

하위 컴포넌트인 LoginForm의 input의 선택이 자꾸 해제됨.

이 현상을 세련되게 해결하고 싶은데 방법이 뭐가 없을까?

아래는 주소임

https://supercooltodolist.netlify.app/

React App

[익명(14.32)]

시간 상태관리는 어떻게 하고 있음?

[익명(121.135)]

useState로 new Date.local어쩌구 써서 1초마다 setState로 바꿔줌

[익명(117.111)]

아 눈썩는다

[따봉고양이(gaq4zzfjr77j)]

useRef 써보셈

[익명(220.93)]

디프레쉬 컴포넌트보다 상위 컴포넌트에 컨텍스트 만들고 포커스되는 인풋 아이디나 고유값 저장해놓고 리프레쉬해서 하위컴포넌트 리렌더링되어 포커스 풀릴때마다 이펙트안에서 컨텍스트 값 체크해서 포커스 다시 줘

[야딩조무사(cir6174)]

코드를 다 올려야지 이것만 봐서 어케앎

[야딩조무사(cir6174)]

그냥 들어가서 소스맵 보고있는데 App의 setInterval이 effect에 없는것부터 일단 고쳐놓고

[야딩조무사(cir6174)]

컴포넌트를 왜 컴포넌트 안에 선언한것부터 좀 어케 해보셈 렌더링이 그냥 최상단 컴포넌트부터 죄다 걸려서 아래 전부 갈리고있는데

[야딩조무사(cir6174)]

LoginForm이라는 컴포넌트가 정상적인 스코프에 있지 않고 렌더링 함수 안에 들어있어서 렌더링이 일어날 때 마다 컴포넌트 정의가 달라지는 상황 아님?

[야딩조무사(cir6174)]

클로저로 값 넘길 생각 말고 그냥 정의 따로한다음 Props로 내려야함

[익명(39.7)]

너가말한대로 다 갈아엎었는데 여기서 체크박스 체크하면 li에 가로선 효과 넣고싶은데 좋은 방법이 머있음???

[야딩조무사(cir6174)]

state를 list로 관리하면서 내림