React

Component

Component의 return 전에는 불필요한 코드를 배치하지 않는다.
👉 순수 함수

• Strict Mode는 각 Component의 기능을 2번 호출하여, 순수 함수의 규칙을 위반하는 Component를 찾는 데 도움을 준다.
  👉 Root Component에 <StrictMode>로 감싸서 사용한다.
  👉 Strict Mode는 배포에 영향을 미치지 않는다.

---

List Rendering

• .map() 등을 사용하여 배열을 렌더링하는 경우 key 설정이 필요하다.
  👉 cypto.randomUUID()를 이용하여 random key를 생성할 수 있다.
  👉 key 값은 고유해야 하나, 다른 배열의 key와는 동일해도 된다.
  👉 render할 때마다 key가 변경되면 render할 때마다 새로 생성하기 때문에, 성능 저하가 있다.

---

Side Effect

Side Effect는 일반적으로 Event Handler 연결에 속한다.

• Event Handler는 rendering되는 동안 실행되지 않기 때문에 순수할 필요가 없다.
• Event Handler가 없을 경우, useEffect Hook을 호출해 JSX에 연결하여 Side Effect를 처리할 수 있다.

---

Event Handling

Component의 props에 함수를 넘겨주고, JSX 요소의 속성으로 Event와 함수를 연결해준다.

function GotoButton({함수이름}) {
return <button onClick={함수이름}>버튼</button>
}

상위 Component에 연결된 경우에는 상위 Component의 속성에서 정의한다.

수많은 Event를 일일이 전달하기에는 번거롭기 때문에, 상위 Component에서 Event Function을 정의하고, 하위 Component에서는 Spread Syntax를 (...)를 이용하여 Event를 적용한다.

---

CSS

Module CSS

module.css는 class 코드를 module 객체로 받아서 사용한다.
👉 지정한 class 이름에 랜덤 값이 추가되기 다른 class와 겹치지 않는다는 장점이 있기 때문에 사용한다.