210701 TIL

1. React .js ? .jsx?

슬랙에 파일 확장자명에 관한 질문이 있길래 궁금해서 찾아봤다.

예전에는 확장자명을 .jsx로 사용해야 했지만 요즘은 권장사항이 사라져서 .js로 쓰고있는 추세.
🚧 하지만 Javascript라면 .js, TypeScript라면 .ts는 꼭 지켜주기!

2. React key

key의 값으론 리스트 항목들에 고유하게 식별할 수 있는 고유한 문자열을 사용하는게 가장 좋은 방법이다. 대부분의 경우 id를 key로 사용한다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

id 항목이 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있다.

const todoItems = todos.map((todo, index)=>
  <li key={index}>
    {todo.text}
  </li>
);

index로 key값을 주면 위험한 이유

index로 준 값은 리스트가 추가됨에 따라 값이 이동됨.

3. React Props vs State

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있는데 방식에서의 차이가 있다.

props는 컴포넌트에 전달되는 반면, state는 컴포넌트 내부`에서 관리된다!

Changing props and state

• 상위요소에 의해 바뀔 수 있나? props=YES / state = NO
• 컴포넌트 내부에서 바뀔 수 있나? props = NO / state = YES
• 하위 컴포넌트에 의해 바뀔 수 있나? props = YES / state = NO

4. React CSS styling with props or state

CSS를 이용해 스타일링을 하는 방식은 className prop에 문자열을 넘겨서 사용한다.
컴포넌트의 props나state에 CSS 클래스각 의존하는 방식은 자주 사용됨!

let className = "menu"
if (isActive) {
  className += ` menu-active`;
}
return <span className={className}>MENU</span>

inline 스타일보단 CSS클래스가 더 나은 성능을 보인다.