[React] React 기초 다지기

작성일 | In

Class-based component의 constructor에서 super()를 호출하는 이유

Javascript는 언어적 제약사항으로서 생성자에서 super를 호출하기 전에는 this를 사용할 수 없다.\

props를 접근하기 위해 this.props를 사용하게 되는데, 이 this.props는 사용자가 정의한 component가 상속받고 있는 React.Component에 정의되어있다. super()는 자신의 부모의 생성자를 호출하는 것인데, React.Component의 생성자가 super(props)로 넘겨준 props를 자신의 this.prop에 초기화하는 것이고, 이 이후부터 사용자가 정의한 component에서도 this.props를 통해 부모인 React.Component의 this.props를 접근할 수 있게 되는 것이다.\

하지만 React에서는 super(props)를 통해 props를 전달하지 않고, super()만 호출하더라도 this.props를 통해 접근할 수 있는데, 이는 React가 컴포넌트의 생성자 호출 이후 해당 객체에 props속성을 세팅해주기 때문이다.

1
2
const instance = new YourComponent(props);
instance.props = props;

내부적으로 위와같이 처리가 되기 때문에 사용자가 실수로 props를 누락하더라도 정상적으로 작동한다.

Reference:
https://min9nim.github.io/2018/12/super-props/

리스트의 Key에 index를 사용하면 안되는 이유

key는 React가 DOM element들을 식별하기 위해 사용한다. 따라서 만약 리스트의 중간에 element를 추가하거나 삭제했지만 key가 이전과 같이 유지되는 경우 React는 DOM이 변화하지 않은 것으로 인식하고 그대로 보여준다.

예시:

1
2
3
key: 0 item: a
key: 1 item: b
key: 2 item: c

index 1의 값이 b에서 z로 바뀌어도 index를 key로 사용하기 때문에 key는 그대로이다.

1
2
3
key: 0 item: a
key: 1 item: z
key: 2 item: c

React는 DOM element가 바뀌지 않은것으로 판단한다.

1
2
3
key: 0 item: c
key: 1 item: a
key: 2 item: b

또 순서가 바뀌더라도 key는 똑같기때문에 반영되지 않는다.

아래의 3가지 조건이 모두 만족될 경우는 index를 key로 사용해도 안전하다고 한다:

  1. the list and items are static - they are not computed and do not change
  2. the items in the list have no ids
  3. the list is never reordered or filtered

Reference:
https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

언제 useCallback()과 useMemo()를 사용하여야 하는가?

Reference:
https://kentcdodds.com/blog/usememo-and-usecallback