나같은 초짜 Typescript React 개발자들 용어 정리글

그땐 몰랐지만 지금은 알것같은(..) React와 관련이 있는 용어들. (React와 관련되지 않은 용어도 있을 수 있습니다.)

내 나름대로 정리해보려고 한다.

 

생각나는대로 추가할 것

[마지막 업데이트 230917]

 

⛔️ 주의사항

• 토막지식이므로 관련한건 따로 서칭할 것.
• 대화할때 해당 용어를 쓰는지는 회바회, 팀바팀

---

Stateful vs Stateless

stateless 한 값은 컴포넌트 외부에 선언해주세요.

네?

 

정의

React 컴포넌트에서 `state` 를 사용하는 경우 Stateful 컴포넌트, state를 Stateful 하다라고 한다.

반대는 그럼 `Stateless` 라 부른다.

 

뭐가 문제였는데?

state는 상태가 바뀔때마다 컴포넌트의 구성요소가 재렌더링 되어야 하므로, 당연히 컴포넌트 내부에 위치하는게 맞지만,

stateless한 값은 재렌더링에 상관없이 불변한 값이다.

만약 렌더링이 잦은 컴포넌트내부에 위치한다면 렌더링이 일어날 때 마다 stateless한 변수는 계속 새로운 메모리에 해제 및 생성이 일어나는 것. 이라고는 하지만 사실 퍼포먼스상 별 차이는 없다고 한다. 하하.

 

가독성이나 함수의 재사용을 위해서라면 외부에 선언하는 것이 좋다고 한다. [참고]

---

Prop Drilling

Prop drilling이 너무 심하네요. 

예? 프롭스..뭐요?

 

정의

React에선 상위 컴포넌트에서 선언한 값들을 자식 컴포넌트의 prop로 넘겨줄 수가 있는데, 이것을 `prop drilling` 이라 한다.

즉, 상위에서 하위로 데이터를 전달하는 과정이라 보면 된다.

 

뭐가 문제였는데?

props를 자식의 자식의 자식의 자식의...그 자식의 컴포넌트로 계속 넘겨준다면 코드파악도 어렵고,

그 props가 statefull 한 값이라면, 변화가 일어날 때 마다 props를 받는 자식컴포넌트들은 props를 받았다는 것 하나만으로 렌더링이 일어난다.

 

즉, props를 depth가 깊게 전달하지 말라는 것.

---

nullish / nullable / optional

nullable한 컬럼들 not null로 변경해주세요

정의

    optional?: string | undefined;
    nullable: string | null;
    nullish?: string | null | undefined;

한분이 찰떡처럼 설명한 스니펫이 있어 가져왔다. [참고]

• optional : 해당 컬럼이 필수값은 아님. 그러므로 해당 타입이 undefined일 수 있다.
• nullable: 해당 컬럼은 필수값이지만, 타입이 Null이 할당될 수 있다.
• nullish: optional + nullable (null or undefined)

보통 값 관점에서 null , undefined한 값을 퉁쳐서 nullish 하다 하고

컬럼관점에서 nullable, optional 을 쓰는 것 같다.

---

null coalesce operator / null coalescing ??

const name = value ? value : 'not name';

null coalescing 으로 대체해주세요.

정의

nullish 한 값일때 우측 값으로 대입하는 연산자 [참고]

const name = value ?? 'not name';

---

Optional Chaining

정의

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// Expected output: undefined

nullish한 객체를 참조해야할 때 쓴다 [참고]

---

Custom hook

custom hook으로 추출할 수 있는지 검토해주세요.

유사한 동작을 가진 로직을 여러 컴포넌트에서 쓰이고 있을 때, 해당 동작을 추상화하여 custom hook으로 만들 수 있다.

즉 추출해서 추상화한 hook을 만들라는 것. [참고]