Today 요약

1. 자바스크립트 클린코드 강의
2. React.memo

1. What I did?

1.1 자바스크립트 클린코드 강의

값식문

• jsx에는 값으로 평가되는 표현식인 문은 할당할 수 있다. 물론 값이나 식도 가능
• 즉시실행함수로 switch case 문을 jsx내부에서 사용할 수 있다. 이 또한 값으로 평가되기 때문

삼항 연산자 다루기

• 아무렇지 않게 사용하는 If else 문을 지양하고 삼항 연산자를 사용하자.
• 조건이 많을 때는 삼항 연산자도 주의 깊게 생각해서 switch case 문을 고려해보라.
  • 근데 사실 switch case문도 조건이 많아지면 가독성이 떨어지는 거 아닌가?

1.2 React.memo

React.memo

React.memo는 총 4가지의 경우가 있다.

• React.memo를 사용하지 않을때,
  • 불필요한 렌더링이 일어남
• React.memo를 사용하고 두 번째 인자로 아무것도 전달하지 않을 때
  • React.memo로 감싼 컴포넌트의 변경사항이 발생했을때만 리렌더링이 일어남
• React.memo를 사용하고 두 번째 인자로 항상 false를 리턴하는 함수(() ⇒ false)를 전달할 때
  • React.memo로 감싼 컴포넌트의 변경사항이 발생했을때 리렌더링이 일어나고 컴포넌트 내에 다른 useState로 관리되고 있는 변수가 변경될 때도 리렌더링이 일어남
• React.memo를 사용하고 두 번째 인자로 항상 true를 리턴하는 함수(() ⇒ true)를 전달할 때
  • React.memo로 감싼 컴포넌트의 변경사항이 발생해도 리렌더링이 일어나지 않는다. (첫 마운트시에만 렌더링)

주의!! - React.memo로 감싼 컴포넌트여도 컴포넌트의 props자체가 변경되면 해당 컴포넌트 전체가 다시 리렌더링 된다.