react를 공부한 첫 날
잠깐이라도 써봤던 기억이 있어서
그래도 그나마 조금 괜찮았던 것 같다
그래도 어려워
비동기는 일단 넘어가는걸로..
쓰다보면 익숙해지고 어느순간 이해가 간다는 강사님의 조언..
오늘 헷갈리는 개념들 정리
- 하나만 떨렁 반환 불가, 무조건 감싸야함
JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다. 함수에서 두 개의 객체를 배열로 래핑하지 않고는 반환할 수 없습니다. 이것이 바로 두 개의 JSX 태그를 다른 태그나 조각으로 래핑하지 않고는 반환할 수 없는 이유를 설명합니다.
- 무조건 닫아야함
JSX는 명시적으로 닫힌 태그를 필요로 합니다.
- 카멜케이스로 작성하기
자바스크립트에는 변수 이름에 제한이 있습니다.
예를 들어, 변수 이름에는 대시를 포함할 수 없으며 클래스(class)와 같은 예약어를 사용할 수 없습니다.
그렇기 때문에 React에서는 많은 HTML과 SVG 어트리뷰트가 대/소문자를 구분하지 않고 대/소문자 구분 없이 camelCase로 작성됩니다. 예를 들어 stroke-width 대신 strokeWidth를 사용합니다. class는 예약어이므로 React에서는 해당 DOM 프로퍼티의 이름을 딴 className을 대신 작성합니다
인라인 스타일 프로퍼티는 카멜케이스로 작성됩니다.
- 클래스 이름은
class = X
className = O
- 엘리먼트는 대문자로 시작하기
리액트 엘리먼트는 "대문자"로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 됩니다.
- 배열도 담을 수 있음
배열의 각 요소는 각각 변수에 담길 수 있는 하나의 JSX 표현식이기 때문에
중괄호{}를 사용하여 JavaScript를 내부에 표현해 주었기 때문에 올바르게 작동합니다. 주의할 점은 화살표함수에서 중괄호{}를 쓰게 되면 꼭 return 이 존재해야 합니다. return 이 없다면 undefined 를 반환하게 됩니다.
D. 화살표함수에서 () 를 사용하면 () 안의 값이 return 값이 됩니다.
