코딩애플강의로 리액트 정리+실습 하기!
https://youtube.com/playlist?list=PLfLgtT94nNq0qTRunX9OEmUzQv4lI4pnP&si=W3atfcsM7zIeyHYr
2022 리액트 1강
기존에 하던대로 리액트를 설치하고
명령어를 통해 리액트 앱을 만들고
리액트 개발 환경을 세팅한다.
App.js는 우리가 사용할 메인페이지
node_modules 폴더는 라이브러리 코드 보관함
public 폴더는 static 파일 모아 놓는 곳이다. (html,css,img,js 등등..)
src 폴더는 우리가 코드를 짜는 곳이다.
js파일에 html코드를 짜도 실행이 가능하다?!?!
app.js 에 있던 html을 index.html에 넣고 있는 것이다.
=> 그것을 가능하게 해주는 것 : index.js
package.json : 리엑트를 구동하기 위한 프로젝트 정보, 라이브러리 정보들이 세팅되어있다
2022 리액트 2강
본격적으로 해보자~
보통시작할대 App.js 에서 div 하나만 남기고 시작한다!
jsx 문법 1.
class 넣을 땐 className
jsx 문법 2.
변수넣을 땐 {중괄호} => 데이터바인딩
ex) 서버에서 데이터가져와서 html사이에 넣어주세요~
jsx 문법 3.
style 넣을 땐 style={}
=> style={{스타일명 : '값'}}
jsx 문법 4.
camelCase로 작성해야 함!
2022 리액트 3강
1.import {useState}
2.useState(보관할 자료)
3.let[작명,작명]
잠깐 데이터를 보관하기 위해서 변수가 아닌 state를 써야하는 이유는 무엇인가?
일반변수는 갑자기 변경되면 html에 자동으로 반영되지 않는다.
하지만 useState를 사용하게 되면 자동으로 반영된다.
=>state쓰던 html은 자동 재렌더링 된다는 말이다.
그래서 state는 언제 써야함?
-> 변동시 자동으로 html에 반영되게 만드록 싶으면
state를 사용해라!
빡대가리식 정리 :
자주변경될거같은 html부분은 state로 만 들어 놓기.
2022 리액트 4강
/eslint-disable/
Lint 끄는 기능임 (warning message 끄는 것)
state 변경하는 법 (등호로 변경금지)
let [a,b] 에서 b는 state변경용 함수이고 이걸 써야 html재렌더링도 잘된다.
배운거.
1. onClick 쓰는 법
onClick={} 안엔 함수넣어야함
- state 변경하는 법
항상 state 변경 함수 쓰세요
2022 리액트 5강
let copy = [...글제목] => [... ~ ] 문법은 함수의 괄호를 벗겨달라는 의미
=>이렇게 하면 배열의 포인터도 달라진다. 만약 이렇게 하지 않으면
배열을 복사하더라도 똑같은 포인터다 가리킨다.
빡대가리식 정리
- state가 array/object이면 독립적 카피본을 만들어서 수정해야 함.
let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목 변경 (copy);2022 리액트 6강
html의 많은 태그를 한 곳으로 모으게 해주는 것이 컴포넌트다
컴포넌트 만드는 법
1. function 만들고
2. return()안에 html담기
3. <함수명></함수명>쓰기
만든 컴포넌트를 자유롭게 html 태그형식으로 사용하면 된다
(참고1)
한 태그로만 감싸는 규칙 때문에 그 태그 위에
태그를 덧 붙이기 위해서는
의미없는 div대신 <></> 사용가능하다.
(참고2)
컴포넌트 열어서 써도 되고 닫아서 써도 된다.
<함수명></함수명>, <함수명/> 둘다 가능
어떤걸 컴포넌트로 만들면 좋은가?
1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주변경되는 것들
컴포넌트의 단점 : state 가져다쓸 때 문제생김
