React Intro

Yeong·2023년 1월 20일

목록 보기

14/16

📖React

리액트느 ui에 집중한 자바스크립트 라이브러리이다
라이브러리이므로 추가적으로 필요한 모듈 설치해야한다.

jSX(JavaScript XML)은 자바스크립트를 확장한 문법으로 jSX를 사용하여 React 엘리먼트를 만들 수 있다.

jSX가 자바스크립트를 확장한 문법이라고해도 브라우저는 jSX를 해석하지 못한다. 그러므로 'Babel'이 jSX를 자바스크립트로 변환해준다.

하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야한다.
React에서 CSS class 속성을 지정하려면 "className"으로 표기해야 한다.
JavaScript를 쓰고자 한다면, 꼭 중괄호{}를 이용한다.
JSX로 React 엘리먼트 작성 시에는 대문자로 시작해야 한다.
조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야한다.
- 삼한연산자는 표현식(값으로 환산 가능)으므로 변수를 담을 수 있기 때문이다.
여러 개의 HTML 엘리먼트를 표시할 때는 map()함수를 사용하며, map()함수를 사용할 때는 반드시 key JSX 속성을 넣어야 한다.(filter 사용 후에 map 쓰는 등 활용 가능)
- 키는 고유한 값을 사용해야하는데 만약 인덱스 사용하면 중간에 데이터 변경 후 다시 가져오게되면 인덱스가 변경될 수 있으므로 인덱스 사용은 하지 않는 것이 좋다.
  (UUID, NanoID 라이브러리을 이용해 키 값을 줄수 있음)