-
리액트 기본 개념 정리react 2022. 1. 25. 21:59
1. jsx : javascript + xml
-> javascript에 html을 끼얹은 문법 (html 태그 안에서는 중괄호를 사용하여 js를 사용할 수 있었음)
const title = <h1>{count}번째 고양이</h1>
파란색이 바로 리액트 엘리먼트!
2. babel : jsx를 javascript로 통역해줌 (통역 내용은 header에 존재함)
최신 문법을 브라우저가 이해할 수 있는 javascript로 통역
브라우저는 jsx를 이해하지 못함
3. 리액트 코드를 html에 적용하기
html 코드에는 빈공간만 만들어 주고 리액트 코드를 html에 끼워넣는다.
4. 컴포넌트 : 여기저기 재사용 가능한 UI 코드 조각
-> 동일한 ui지만 컨텐츠는 다르게 그릴 수 있음
5. 이벤트 => 외우는 것이 아닌 자바스크립트 액션과 동일하다.
6. 상태 : 컴포넌트 안에서 자유롭게 변경할 값이 필요할 때
-> useState는 배열로 온다.
const [상태명(ex>time). 상태변경함수명(ex>setTime)] = React.useState(초기값)
7. 리스트 : 배열로 반복되는 ui 그리기
8. form : 사용자 입력값 다루기
9. 로컬스토리지 : 간단한 데이터 저장 (7일까지 저장가능)
'react' 카테고리의 다른 글
프로젝트 구조 (0) 2022.01.30 실무 개발 환경으로 만들기 (0) 2022.01.27 리액트 외부 api 사용 (0) 2022.01.26 useState (0) 2022.01.24 리액트 (0) 2022.01.19