component
React를 사용하면마크업, CSS 및 JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 지정 "component" 로 결합할 수 있다.
컴포넌트 가져오기 및 내보내기
- export default: export default의 경우 한 파일에서 한번만 가능하다.
- export: export의 경우 원하는 만큼 내보낼 수 있다. 그러나 가져오기를 할 경우 {}를 이용해 가져온다
JSX로 마크업 작성하기
JSX는 JavaScript 파일 내에서 HTML과 유사한 마크업을 작성할 수 있는 JavaScript용 구문 확장이다. 기존의 경우 콘텐츠를 HTML로 디자인을 CSS로 로직을 JavaScript로 별도의 파일에 보관하였다. 그러나 웹이 점점 더 상호작용하게 되면서 논리가 점점 더 콘텐츠를 결정했다. 그렇기에 React에서는 렌더링 논리와 마크업이 같은 위치, 즉 component에 함께 존재하게 구현한다.
JSX 규칙
- 단일 루트 요소 반환
component에서 여러 요소를 반환하려면 단일 상위 태그로 요소를 래핑한다.
=> JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환된다. 배열로 래핑하지 않고는 함수에서 두 객체를 반환할 수 없다. 이는 두 개의 JSX 태그를 다른 태그나 Fragment로 래핑하지 않고 반환할 수 없는 이유를 설명한다. - 모든 태그 닫기
JSX에서는 태그가 명시적으로 닫혀야 한다. - 카멜케이스가 대부분이다
JSX로 작성된 속성은 JavaScript 객체의 키가 된다. 자신의 component에서 이러한 속성을 변수로 읽어들이고 싶을때가 많다. 그러나 JavaScript에는 변수 이름에 대한 제한이 있다. 이름에 대시를 포함하거나 class와 같은 예약어를 사용할 수 없다
React에 키가 필요한 이유
형제 간에 항목을 고유하게 식별할 수 있게한다. 잘 선택된 키는 array내의 위치보다 더 많은 정보를 제공한다. 재정렬로 인해 위치가 변경되더라고 key React는 전체 수명 동안 항목을 식별할 수 있다.
Component를 순수하게 유지
순수함수란?
- 호출되기 전에 존재했던 객체나 변수는 변경하지 않는다
- 동일한 입력이 주어지면 동일한 결과를 반환한다.
React는 작성하는 모든 component가 순수 함수라고 가정한다. 즉 작성한 React component는 동일한 입력이 주어지면 항상 동일한 JSX를 반환해야 한다.
의도하지 않은 결과가 발생하는 경우
let guest = 0;
function Cup() {
// Bad: changing a preexisting variable!
guest = guest + 1;
return
Tea cup for guest #{guest}
;}
export default function TeaSet() {
return (
<>
</>
);
}
이 component를 여러번 호출하면 다른 jsx가 생성된다.,
### StrictMode로 불순한 계산 감지
React는 렌더링하는 동안 세가지 유형의 입력(props, state, context)를 읽을 수 있다. StrictMode는 component를 두 번 호출함으로써 각 component가 순수한지 확인한다.
### React가 순수함을 중요하게 생각하는 이유
- component는 다른 환경에서 실행될 수 있다. 동일한 입력에 대해 동일한 결과를 반환하므로 하나의 구성 요소가 많은 사용자 요청을 처리할 수 있다
- 입력이 변경되지 않은 렌더링 component를 건너 뛰어 성능을 향상시킬 수 있다. 순수 함수는 항상 동일한 결과를 반환하므로 캐시하기에 안전하다
- 깊은 component tree를 렌더링하는 도중 일부 데이터가 변경되면 React는 오래된 렌더링을 완료하는 데 시간을 낭비하지 않고 렌더링을 다시 시작할 수 있다. 
개발 공부중입니다