0. 기본 개념
- DOM(Document Object Model) : 프로그래밍 언어가 웹사이트의 콘텐츠, 구조 및 스타일을 조작할 수 있도록 하는 인터페이스
- DOM과 HTML 소스코드의 차이
(1) DOM은 클라이언트 측 JS에 의해 수정됨. (ex. 콘솔에서 배경색 수정 시, 바로 반영)
(2) 브라우저는 소스코드의 오류를 자동으로 수정
1. React란?
- 자바스크립트 라이브러리 (프레임워크 X)
* 라이브러리 vs 프레임워크
- 프레임워크: 애플리케이션 코드는 프레임워크가 짜놓은 틀 안에서 수동적으로 동작 > 제어의 흐름: "프레임워크"
- 라이브러리: 개발자가 직접 제어. 라이브러리를 "가져다"쓰게 됨.
- 모델, 뷰, 컨트롤러 중 "뷰" 층에 해당 !
- 컴포넌트 생성 가능 (효율적이고 빠른 UI 생성, HTML 요소 재사용, 커스텀 등을 위해)
2. 설정 및 설치
(1) 정적 HTML 파일
- <head>에 React, React Dom, Babel 관련 CDN 넣기
- React : React 최상위 API
- React DOM : DOM 전용 메서드 추가
- Babel : 오래된 브라우저에서 ES6+를 사용할 수 있게 해주는 JS 컴파일러
- first code block 만들기 > render 추가 > ReactDOM.render를 사용해 App class 렌더링!
(2) React App 생성
- npx create-react-app 파일 이름
- cd 파일이름 && npm start
- React, React DOM, Css file 을 import (index.js 파일에)
* React Developer Tools : 컴포넌트 검사 가능!
3. JSX: JavaScript + XML
- HTML의 class와 같은 의미를 가지는 className 사용
- JSX의 속성과 메서드는 camelCase로
- 태그를 닫을 때는 / 사용
4. 컴포넌트
- 많고 세분화된 컴포넌트들이 메인 App 컴포넌트에 로드됨
5. Props
- <Table characterData = {characters} /> 를 통해 table 데이터가 연결
- const {characterData} = this.props 선언함으로써 App.js에 있는 characterData.js를 Table에서도 사용 가능
6. State
- DB에 필수적으로 추가될 필요 없이 저장/수정되어야한다.
ex. 쇼핑몰 장바구니 (구매 결정은 안했지만 구매에 관심있는 목록을 저장)
- this.state.속성 => state 접근
- this.setState => state 값 변경
- filter된 배열은 새 배열로 생성. (기존값 변경 x)
7. 양식 데이터 제출
- 새로운 데이터를 추가할 때 사용
- 기존의 데이터를 유지하고 추가! (업데이트)
- Form 세팅 -> 기본 속성: name, job
- state를 Form 안에 있는 initialState로 설정 => state = this.initialState
- 입력을 할 때, event 변수를 통해 name과 value에 값 전달 > state 변경됨 (키와 값 ~ 이름: 값)
- handleChange 메소드를 이용해서 name, job에 각각 input이 발생할 때, 각각의 state가 변화.
- 마지막 단계: 데이터를 실제로 제출 & 부모 state를 업데이트
- handleSubtmit(): 기존의 this.state.characters를 수정, 새로운 character 매개변수 추가
- submitForm(): 함수 호출 & Form state를 character 매개변수에 넘김. > initial state를 reset
8. Pulling in API Data
- React의 가장 보편적인 사용: API로부터 데이터 가져오기
- componentDidMount() ~ React lifecycle method
~ 데이터를 가져오기 전에 DOM에 컴포넌트를 렌더링
~ 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출
- LifeCycle: 리액트에서 메서드가 불리는 순서
9. React 앱 빌드/배포
- 목적: 모든 react 코드를 컴파일하고 디렉토리의 루트 어딘가에 배치(정적 파일 로드)
- 앱 빌드: npm run build ~ 내가 만든 앱을 포함하는 build 폴더가 생성
- Git을 통해 배포 가능!
- package.json에 "homepage" : "url" 코드 삽입
- package.json > scripts 속성에 아래 코드 삽입
"predeploy" : "npm run bulid", "deploy" : "gh=pages -d build"
- npm install --save-dev gh-pages (devDependencies에 gh-pages 추가)
* devDependencies: 어플을 개발할 때, 보조해주는 라이브러리 저장 ex. webpack, js-compression, 번들 분석기
- npm run build > npm run deploy => 끝!
'React' 카테고리의 다른 글
| [Project] 페이지 이동 시, 화면을 맨 위로 자동 스크롤 (0) | 2023.07.12 |
|---|---|
| [Project] 리액트 프로젝트 기획 (0) | 2023.06.19 |
| [FrontEnd6] naver-movie-api를 이용하여 네이버 영화 검색 페이지 만들기 (router, naver-api, pagination, axios, query-string) (0) | 2022.09.20 |
| [FrontEnd6] yts-movie-api를 사용하여 영화 리스트 만들기 (yts-api, axios, pagination) (0) | 2022.09.16 |
| [React] component 요소를 이용한 게시판 구조 짜기 (페이지 넘기기, 원하는 포스팅 갯수 만큼 보이도록 하기 etc..) (0) | 2022.08.24 |
댓글