-
리액트
프레임워크(일종의 문법체계를 독립화한 구조)
라이브러리: 제이쿼리
(기존에 있는 프로그래밍 언어를 기반으로 보다 효율적으로 사용할 수 있도록 여러 개발자들이 템플릿을 공유하는 방식) -
리액트 특장점
1) 컴포넌트화 (*각각의 구조를 독립적인 모듈로 인식하고 사용)버그를 찾고 디버깅 효율
프로젝트 사이즈가 크면 클수록 훨씬 장점이 부각되어지는 라이브러리
2) 선언형 프로그래밍 언어
명령형 : 병렬 진행 / 기존 완성된 문법 사용
선언형 : 두괄식 진행 / 커스터마이징 된 문법 사용
3) 가상 DOM 사용
💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨
리액트 > 타입스크립트/노드JS 기반
npm이 아닌 npx(node package execute)
(*npx는 노드 패키지를 가장 최신 버전으로 자동 실행)
npm i
*JS
npx create-react-app react01
npx create-react-app .
: 해당 폴더에 리액트 설치
*TS
npx create-react-app react01_test --template typescript
npx create-react-app . --template typescript
💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨
230614 폴더 만들고 터미널에서
npx create-react-app react_class01
: react01라는 이름의 패키지 생성
cd react_class01
npm start
: 리액트 렌더/렌더링 - 웹브라우저 화면에 출력
*App.js 안의 내용을 바꿔보면 출력 내용이 바뀜
ctrl + c
: 닫기reac
cd..
npx create-react-app react02 --template typescript
: react01라는 이름의 패키지 생성(타입스크립트)
cd react_class02
npm start
💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨
리액트 기본 핵심이론
1) JSX: Javascript and XML
2) State: 상태
- 이벤트 (전/후)
3) Props: 속성 - 리액트: 컴포넌트 기반의 자바스크립트 라이브러리
- A라는 컴포넌트의 속성을 B라는 컴포넌트에 전달하고 싶은 경우
리액트 UI 라이브러리
jsx, tsx: 만약 동일 형제간 태그가 복수인 경우, 무조건 가장 최상단의 부모요소가 존재해야 함
리액트에서 CSS 스타일을 적용하는 방법:
1) 변수를 선언
2) 해당 변수에 스타일을 정의하고자 하는 값을 "객체" 타입으로 할당
3) 해당 값을 자바스크립트에서 객체의 프로퍼티 값을 가져오듯이 사용
리액트에서는 출력문에 연산식을 직접 입력하여 바로 출력해서 사용 가능
리액트는 출력문에서 조건부 렌더링이 가능
리액트에서 외부스타일시트 사용 시, 기존 html과 거의 유사하나 class 속성 이름을 className으로 입력
css파일의 경우 별도의 output 설정 안 해도 됨
컴퍼넌트 부모/자식 관계 존재
Props 매개변수: 컴퍼넌트 사이에 어떤 속성값을 전달하고자 할 때 활용(*부모->자녀만 가능)
넘 빨라서 못적겠삼..
https://reactjs.winterlood.com/8c7c4423-01d2-4abc-9616-e95298522778
5.리액트의 기본 기능 다루기
챕터와 동일!
react_class01
react_class02 - 개념 설명 위주
react_class03 - 예제
