05.12 TIL

React hook flow

리스트와 key

리액트를 조금 써봤다고 생각했는데 딥하게 들어가니 애매모호한 부분들이 많았다.

코드를 작성하며 알고는 있던 것들이지만, 직접 글로 설명하려니 쉽지 않다.

조금씩 완벽한 내 것으로 만들어야겠다.

ref와 DOM selector

리액트에서 왜 DOM selector 대신 ref를 쓸까?

실제 DOM 요소가 리액트의 virtual DOM을 기반으로 만들어진 것인지 확신이 불가능하다.

이럴 때 DOM selector를 통해 리액트 컴포넌트 내부에서 엘리먼트를 사용한다면 React에 종속되지 않은 요소가 내부에 들어오게 되는 것이다.

또한 virtual DOM으로 만들어진 요소라고 해도 리액트가 렌더링 하기 전에 참조될 위험도 있다.

자투리

• CRA에서 localhost:3000 => 내 리액트 html을 다운로드 받을 수 있는 서버

• 컴포넌트가 리렌더링 될 때는 컴포넌트 함수가 다시 불린다.

• 안티 패턴이란 습관적으로 많이 사용하는 패턴이지만 성능, 디버깅, 유지보수, 가독성 측면에서 부정적인 영향을 줄 수 있어 지양하는 패턴이다.

• inline 요소는 width, height 안 먹힘

• 모듈을 import 하면 그 모듈이 한번 평가되고 실행된다!!