1강
Node.js를 설치한 이유
: create-react-app라이브러리 사용하기 위해(npm으로 설치가능)
npm
: 라이브러리를 쉽게 설치하게 도와주는 툴
메인페이지는 App.js
public -> index.html에 app.js를 박아넣는데 index.js에 박아넣는 명령을 함
node_modules
: 설치된 모든 라이브러리들이 모아놓아져 있는 곳
Src
: 소스코드 보관함
package.json
: 설치된 모든 라이브러리명 + 버전 적혀있음
2강
HTML처럼 생긴 JSX
index.js의 .getElementById('root')를 통해서 app.js가 렌더링되는 것을 알 수 있음
class-> className
리액트를 쓰는이유: 데이터바인딩이 쉬움
데이터바인딩이란?
{ 변수명,함수() }
이미지를 넣고 싶을땐, import 변수 from 주소 하고 img태그 src에 { 변수 }를 넣으면 이미지를 로드할 수 있음
style속성 넣고 싶을땐 style={object 자료형으로 만든 스타일}
css속성명 사용할때 -(대쉬)가 붙는것들은 camel표기법으로 바꿔서 적어야함
3강
state
데이터는
1. 변수에 보관
2. state에 보관
[사용방법]
상단에 {useState} import하기
ES6 destructuring문법
var [a,b] = [10, 100] => a=10 b=100
state는 변수대신 사용하는 공간
let [state데이터,state데이터변경함수] = useState('남자코트추천');
웹이 앱처럼 동작하게 만들고 싶어서 useState사용
새로고침 없이도 자동 재렌더링 된다는 장점
자주바뀌는 중요한 데이터는 state로 저장해서 사용하기
4강
터미널에 뜨는 warning(노란색)
eslint가 잡아주는 문법 체크사항 : 상단에 /eslint-disable/ 해놓으면 안뜸
이벤트 리스너 onClick
onClick = { 함수() } / { () => { 실행할 내용} }
state변경방법: state데이터 변경함수를 사용하자!
실행할 내용에 state데이터변경함수(변경할내용) 을 작성하면 됌
5강
원본 state수정할 수 없음
var newArray = 를 통해 기존 array를 일단 복사
var newArray = array 하면 복사가 아닌 값 공유 형식임 (reference data type검색하면 자세하게 알 수 있음)
deep copy 하는 법
var newArray = [...array] (ES6 신문법)
state변경 방법
일단 기존 state카피본 만듦
카피본에 수정사항 반영
변경함수()에 집어넣기
6강
react는 페이지 전환을 위해 라우터 사용
component란?
HTML을 한단어로 줄여서 쓸 수 있는 방법
HOW?
새로운 function을 만들어서 function Modal(){ return() }
축약을 원하는 HTMl덩어리를 집어넣으면 됌
원하는 곳에서 <함수명/>
component유의사항
이름은 대괄호! 첫문자는 대문자!
return()안에 있는건 태그하나로 묶어야 함
div연달아 못쓰는데 쓰려는 방법은
1. 큰 div안에 여러 div를 넣기
div와 div사이에 </> 넣기
component장점
관리하기가 편함
어떤걸 component로 만들면 좋을까?
반복 출현하는 HTML덩어리들
자주 변경되는 HTML덩어리들
다른 페이지 만들때도 컴포넌트로 만듦
단점은, state쓸 때 복잡해짐
