공식문서

[ 요약 ] React를 사용하면 재사용 가능한 UI 요소인 컴포넌트 생성 가능 React에서 모든 UI는 컴포넌트 React 컴포넌트는 일반적인 JavaScript 함수 + 특징 존재 컴포넌트의 이름은 항상 대문자 로 시작 JSX 마크업 반환

Root 컴포넌트 : 최상위 컴포넌트로, 하위 컴포넌트와 부모 관계을 가지며 트리 구조 형성 default import(export) : 한 파일에 한 개만 존재 named import(export) : 한 파일에 여러 개 존재 가능

>**[ 요약 ]** `로직이 내용을 결정하는 경우` 많아짐 → 컴포넌트에서 렌더링 로직과 마크업이 같은 위치에 함께 있게 된 이유 JSX는 HTML과 비슷하지만 몇 가지 차이점 존재 → 하나의 루트 엘리먼트로 반환 → 모든 태그는 닫기 → 대부분 camelCase 사

[ 요약 ] 따옴표 안의 JSX 어트리뷰트는 문자열 로 전달 JSX 어트리뷰트를 중괄호 를 이용해 동적으로 지정 중괄호를 사용하여 모든 JavaScript 표현식 사용 중괄호는 JSX 태그 내부 또는 어트리뷰트의 = 뒤 에서 작동 이중 중괄호 {{ }} 는 JSX 중

[ 요약 ] props는 JSX 태그에 전달하는 정보 로, 사용자 정의 컴포넌트에는 모든 Javascript 값 전달 가능 React 컴포넌트는 props 객체 를 유일한 인자로 받으며, 구조 분해 할당하여 사용 모든 props를 자식 컴포넌트에 넘길 경우 JSX s

[ 요약 ] 조건에 따라 다른 JSX 트리를 반환 할 수 있음 삼항 연산자(? :)를 사용하여 중복된 코드 제거 가능 (복잡한 조건식 지양) 조건부 렌더링에 의해 컴포넌트가 지저분해질 경우 자식 컴포넌트 추출 조건에 따라 JSX를 렌더링하거나 아무것도 렌더링하지 않을

[ 요약 ] array.map() : 동일한 컴포넌트 구조에 서로 다른 데이터 렌더링 array.filter() : 원하는 조건에 해당하는 항목만 필터링 key 를 사용해서 리스트 항목을 순서대로 유지 위치가 변경되더라도 생명주기 내내 해당 항목을 key로 식별 가능

[ 요약 ] 컴포넌트는 순수해야함 렌더링전에 존재했던 객체나 변수를 변경 ❌ 같은 입력 → 같은 결과 이벤트 핸들러가 컴포넌트 내부에 정의되었다 하더라도 렌더링 중에는 실행 ❌ (이벤트 핸들러는 순수할 필요 ❌) 변화 (화면 업데이트, 데이터 변경)를 side eff

사실 TS 첫 책으로 이 책을 선택한 건 약간 후회가 되기도 한다. 내용 자체가 첫 공부를 시작할 때 받아들이기에는 난해하다고 느꼈기 때문이다. 어떻게 해야 타입스크립트를 잘 쓰고 있다고 말할 수 있을까 라는 고민이 들 때 이 책을 다시 읽기 시작했다.

외부 시스템과 컴포넌트를 동기화하는 React HookEffect의 로직이 포함된 함수정리 함수를 반환할 수 있음 (optional)컴포넌트가 DOM에 추가된 이후 에 setup 함수 실행의존성의 변화에 따라 리렌더링 되었을 경우, 정리함수를 반환할 경우 이전 렌더링에