근자감
실력에서 자신감의 근거를 찾으면 언젠가 실력이 더 뛰어난 사람들을 만났을 때 자신감을 잃게 된다는 것입니다. 근거 없는 자신감으로 ‘나도 해 볼 수 있다’고 생각하는 마음이 중요하다는 말에 공감이 갔습니다.
- 근거 없는 자신감이 주는 장점
- 근거 없이 자신있게 행동할 수 있다
- 위축될 것이 없기 때문에 온전히 자신이 갖고 있는 것을 풀어낼 수 있다
- 꼭 근거가 있어야만 한다면
- 환경에 휩쓸리지 않고 내가 직접 컨트롤 할 수 있는 그러한 것에서 자신감을 얻자
[번역] 당신의 DOM은 얼마나 깊은가요
- DOM 이 깊어질수록 트리 탐색 시간도 길어지고
- 부모부터 시작한 레이아웃이 자식에게까지 전달되어야하기에 병목이 되기 쉽다
- 끌어올려서 같은 위계에 둔다면 탐색 시간은 덤이고
- 레이아웃, 페인트 시간이 줄어드는 것이 가장 큰 장점
(번역) 리액트 API와 코드 재사용의 진화
-
무엇이 어떻게 작동하는지, 또는 어떻게 작동해야만 하는지, 그리고 실제 작동하는 방식 간의 차이에서 버그와 성능 이슈가 발생합니다. 이를 극복할 수 있는 핵심은 기술에 대한 명확하고 정확한 멘탈 모델을 탑재하는 것입니다.
-
react forget
이는 모든 것을 명시적으로 남겨두는 것과 내부적으로 처리하려는 시도 간의 트레이드오프를 강조합니다.
- 개발자가 직접 의존성 조절해가며 리렌더 조절하고 메모이제이션 작업하는 것을 리액트가 해주겠다는 빅피쳐
- 하지만 모든 자동화가 갖고 있는 고민거리
- 직접 할 것인가 자동화 시킬 것인가
- 직접 확인하면서 커스텀 할 수 있는 것을 자동으로 처리되었기 때문에 오히려 그것을 피하기 위한 트릭이 추가될 가능성은 없을까?
-
정확한 멘탈 모델을 갖게 되면 효율적으로 개발하고 버그와 성능 병목 현상을 빠르게 찾아낼 수 있습니다.
-
멘탈 모델을 구축하는 좋은 방법은 특정 접근 방식이나 패턴을 독단적으로 고수하지 않고, 주어진 작업에 적합한 접근 방식을 선택하는 데 필요한 각 방법의 트레이드오프와 이점을 파악하는 것입니다.
[번역] 리액트 컴파일러와 리액트 19 - 이제 메모이제이션을 신경쓰지 않아도 되나요?
- 이후의 리액트에서 가장 기대 받고 있는 것 중 하나인
react forget
- 알아서 메모이제이션 해준다는데?!
- 나의 할일이 하나 더 자동화 되는걸까?
- 우선 리액트 19는 컴파일러가 아니다
리액트 팀은 코드를 변경하지 않고도 새로운 컴파일러를 적용할 수 있음을 약속
- 마이그레이션은 간단하게 해결되려나 싶지만
- 클래스 컴포넌트를 함수형 컴포넌트로 바꾸는 정도는 아닐 것이다
- 개인적으로 걱정하는 것은 메모이제이션 하고 있지만
- 의도적으로 디펜던시를 수정하는 경우가 있다
- 이런 경우는 직접 useCallback 같은 것을 사용하여 재구성하면 컴파일러가 인정해주는 것일까?
- 이러한 합성 구조가 리액트를 잘 이해했기 때문에 나올 수 있었다고 생각하는데
- 컴파일러는 자동으로 해준다면 그냥 하나의 파일에 수많은 상태가 변경됨에 따라 리렌더라고 불렀었던 무언가가 진행되도록 방치하면 된다
- 비교와 재조정 방식 자체가 변경되어야만한다
- 컴파일러만 믿고 아무런 메모이제이션이 들어가지 않을 것이기 때문에…
- 강의: 글
- 강의: 유튜브
오늘 리액트 컴파일러를 사용해 봤는데, 어땠을 것 같나요? 😉
- 위의 내용과 이어지는 리액트 컴파일러 이야기
- 오픈소스가 공개 되었고 컴파일러를 사용한 후기
리액트의 리렌더링은 계단식입니다. 리액트 컴포넌트에서 상태를 변경할 때마다 컴포넌트 트리의 끝에 도달할 때까지 해당 컴포넌트, 그 안의 모든 컴포넌트 그리고 그 안의 컴포넌트의 리렌더링이 발생합니다.
“그냥 작동”하나요? 기술적으로는 그렇습니다. 전원을 켜기만 하면 아무 문제도 없는 것 같습니다. 하지만 리액트 개발자 도구에서 메모이제이션 것으로 표시되기는 하지만 모든 것을 올바르게 메모이제이션 하지는 않습니다.
오히려 지금보다 더 잘 알고 있어야 하며 컴파일러에 최적화된 컴포넌트를 작성하기 위한 육감적인 감각을 키워야 합니다.
- 필요한 곳에서는 직접 메모이제이션 해야한다가 아직까지의 결론이다
children 을 잘못 사용하고 있었다
- The mystery of React Element, children, parents and re-renders
- children에 Element[] 처럼 배열로 들어가는 경우에만 메모이제이션해서 다시 넘겨주고 있었는데
- Element 하나만 들어가는 경우에도 메모가 필요하다는 무서운 괴담