시계 1초지날때마다 모든 컴포넌트가 리렌더링되는게 좀 아닌거같아서 memo 써서 Clock이랑 다른 컴포넌트랑 분리함
const NewExceptClock = React.memo(ExceptClock);
근데 현업에서도 이런식으로함? 더 세련되게 분리하는 법 없나
ExceptClock에는 Clock제외한 모든 컴포넌트를 다 때려박았음.
밑에 주소 들어가서 console확인해보면 로그도 나오는데
더 나은 해결책 아는사람있으면 댓글 좀
학식쩝쩝충임
https://supercooltodolist.netlify.app/
To Do ListTo Do Listsupercooltodolist.netlify.appps. 자바스크립트 변수 주소 추출하는법 없음?
배열이나 변수 재할당시 주소가 바뀌는지
얕은 복사인지 깊은 복사인지
콜바레인지 콜바벨인지 알고싶은데 데이터타입마다 정리해준 사이트 없나
공식문서에도 정리본은 없는 것 같던데
일일히 콘솔로 확인하긴 귀찮음
민석씨 질문 할거면 소스 코드를 다 긁어서 올리세요
사이트밑에 링크들어가면소스있어요
사이트 디자인 멋잇네영
App 컴포넌트에 선언된 useState 중 times와 username는 App 컴포넌트에 있을 필요가 없을 것 같넹영
리팩터링하면서 놓친듯 고마워요
자세히 안봤지만 memo안써도 Clock을 제외한 다른 컴포넌트는 재조정 안될거같은데
그리고 useEffect 사용 관련해서 좀 공부하면 좋을거 같음
https://overreacted.io/a-complete-guide-to-useeffect/
memo안쓰면 1초마다 다 리렌더링되더라고요 부모컴포넌트인 App이 리렌더링돼서 memo로 막아줬음
전부 리렌더링 되는 이유는 App.tsx에 있는 state를 자식이 값을 바꾸니까 리렌더링 되는거고 App.tsx에 state를 주지 말고 그 아래 컴포넌트에서 줘서 전부 리렌더링을 막는 식으로 컴포넌트를 쪼갤듯.
LoginForm, AfterLogin, Clock 이 셋을 묶는 부모 컴포넌트를 만들고 그 부모 컴포넌트에서 state를 선언하는 식으로 만들면 리렌더링이 App 전체에서 안일어나게 만들수 있을거 같음
Clock에 dayTime state를 놓으면 ExceptClock컴포넌트에서 그걸 불러올 방법이 있나요? ExceptClock 내부의 dayTime관련 코드를 전부 Clock 컴포넌트로 옮겨야한다는 의미? 그럼 첨부터 다시시작해야될거같ㅇ느데
아 이해했음 댓글쓰고 새댓글봄. 애초에 컴포넌트간 state를 공유하는게 나쁜 습관인가보네 부모-자식간에만 공유하고 같은 depth level일땐 분리하는게 좋다이거죠?
일단 리렌더링이 전부 일어나는 이유는 App에 있는 state를 자식 컴포넌트가 바꾸고 있으니까.. memo 안쓰고 리팩토링 하려면 App에서 상태관리를 안하도록 구조를 변경하는 수밖에 없지. 보통 그래서 App에는 어지간하면 상태 관련된 로직 잘 안두기도 하고.. 사실 이런거 ㅈ같은게 상태관리 라이브러리 쓰는 이유중 하나긴 함 ㅋㅋㅋ
나쁜 습관이라기보단 자식의 어떤 동작으로 부모를 리렌더링 시키고 싶을때만 선택해서 쓰는게 좋음. 그게 아니라면 버그 일으킬 확률이 높아서
useEffect 공부는 clock()부분 말하시는건가요?
ㅇㅇ 그렇긴한데 이건 댓글로 설명하려면 너무 길어서.. (useEffect가 개같이 만든 훅으로 존나 유명함) 링크 단 글 번역도 되있고 글쓴사람이 리액트 코어 개발팀에서 제일 유명한 사람이니까 시간날때 정독해보면 나중에 확실히 도움될거임. 대신 존나 김.
말씀하신대로 LoginForm, AfterLogin, Clock세개를 묶어봤는데 매초마다 LoginForm, AfterLogin 두 개가 같이 리렌더링되어서 원하는 결과값은 나오지 않는것 같아요. 어차피 memo써야하면 그냥 원래대로 해야할듯
그냥 === 이라 원시값 아니면 바뀐다고 생각하면되
깊게 비교하고싶으면 2번째인자로 comparator 넣어주거나