node js를 설치한다. 이후 npm npx 이용 가능.
이후 터미널 통해 npx create-react-app ~ react 설치
npm start로 만든 페이지 미리보기 가능.
app. js는 메인 폴더. public폴더 안에 있는 index.html을 index.js가 렌더링 해주게 된다.
프로젝트가 끝나면 빌드나 컴파일 과정을 거치는데 public 폴더 안에는 정적 파일 들을 모아 놓아 정리해준다.
package.json에는 그동안 설치한 모듈들이 모여 있다.
app.js안에는 그냥 자바스크립트 파일이지만 html작성 가능
다만 class 대신 className 사용, 자스에는 이미 class예약어가 있기 떄문임.
리액트를 사용하는 이유 ?
데이터 바인딩을 쉽게할 수 있다.
데이터 바인딩이란 데이터를 html에 꽂아 넣는 것.
리액트에서는 바꾸고 싶은 걸 찾아서 {} 변수명, 함수등을 그대로 치면 됨.
로고등 넣을떄는 import logo, 하고 <img src = {logo}> 클래스에도 사용가능. 모든 속성에 중괄호 사용 가능.
style 넣을때는 민감한 예약어들이 많아서 무조건 중괄호 {color:'blue'} 이런 식으로 걍 사용 그리고 - 대신 카멜케이스 사용.
데이터를 저장할떄는 변수 말고 state에 보관 할 수도 있다.
import { useState} from 'react';
useState('남자 코트 추천'); 사용시
어레이 두개가 남는다.
첫번째는 진짜 데이터, 두번쨰에는 수정하기 위한 함수.
let [글제목,글제목변경] = useState('남자 코트 추천','강남 우동맛집'); 디스트럭쳐링
각각 글제목 글제목 변경으로 어레이가 하나씩 생성됨.
state만의 장점?
리액트를 웹앱처럼 만들고 싶으면 다 state에 저장. 왜냐하면 변경될때 state로 만들어논 데이터가 바뀌면 데이터를 담고 있는 html이 재 렌더링 된다.
eslint?
문법적으로 잘못된 거를 바로잡아주는 라이브러리
/* eslint-disable */ 치면 됨.
온클릭 이벤트
onClick= {} 이런식으로 사용하면 됨.
괄호안엔 함수를 넣는데 애로 평션 사용 가능, 직접 함수를 만들어줄 수도 잇음 ()=>{}
값을 변경할때는 state선언할때 생겼던 함수를 이용한다.
근데 만약 let[글제목,글제목변경] = useState(['남자코트 추천'.'강남 우동 맛집', '파이썬 독학']); 을 치면 글제목이 배열로 잇음.
특정 인덱스만 바꾸고 싶으면 어떻게할까 ? 인덱스만 참조해서 리스트를 바꿔줄 수는 없음.
복사를 해야하는데 var newarray = 글제목 하면 reference 데이터 타입이기 때문에 복사가 아니라 값 공유임.
deep copy 한다. [...글제목] 이런식의 복사를 해야함
콤포넌트
함수처럼 html을 한단어로 줄여 쓸수 있다.
콤포넌트에 규칙이 있는데 시작이 대문자로 돼야함. 그리고 리턴안은 태그 하나로 묶여야 한다!
다만 단점이 있는데 tsate슬떄 복잡해짐. 앱 함수 밖에 만들어 사용하기 떄문에 앱 안의 스테이트를 처리하는데 어려움이 있다. 프롭을 써야하는데 어려움.
댓글