리액트 사용 이유
인스타그램 등 요즘 웹들을 보면 모바일 App 처럼 부드럽게 동작하는 웹들이 많다.
메이저 SNS들도 새로고침 없이 웹 탐색이 가능하다.
이런 사이트들은 모바일 앱과 비슷한 사용감을 가져서 Web -App이라고 부른다.
이런 Web-App을 쉽게 만들 수 있는 것이 React이다.
장점
- 모바일 앱으로 발행이 쉽다.
- 앱처럼 뛰어난 UX
- 그냥 웹사이트보다 비즈니스적 강점이 있다.
리액트 설치와 셋팅법
- Node.js 검색 후 최신버전 설치하기
- Visual Studio Code 설치하기
- 작업 폴더 생성 -> 에디터에서 Open Folder 눌러서 작업 폴더 오픈
- 리액트 프로젝트 생성 : 터미널에서 "npx create-react-app 이름" 입력
npx : 라이브러리 설치를 도와주는 명령어(node.js 가 설치 되어있어야 이용 가능)
Create-react-app : 리액트 셋팅 다된 boilerplate를 만들기 쉽게 도와주는 라이브러리 - Open Filder해서 프로젝트 하위 폴더 open
- App.js 페이지에 들어가서 코드를 수정하고
- 다시 터미널에서 "npm start" 입력 -> 미리보기 생성 완료!
왜 index.js 놔두고 App.js가 메인 페이지일까?
index.js의 역할 : "App.js 파일 안에 있는 html을 public에 있는 index.html에 넣어주세요~ " 라고 명령하는 역할
폴더 설명
Node_modules : 라이브러리 모은 폴더
Public : static파일 보관함
src : 소스코드 보관함
Package.json : 설치한 라이브러리 목록
//App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Return 안에 html 작성
-> html처럼 생겼지만, JSX라는 놈이다. 따라서 html에서는 class를 사용하지만, 여기서는 className을 사용한다.
React장점
데이터 바인딩이 쉽다. => 직관적이다.
데이터 바인딩 ? 데이터를 HTML에 꽂아주는 것.
블로그 글이 있는데 맨날 목록이 바뀐다. -> let posts='강남 고기 맛집' 이런식으로 서버에서 가져온 데이터를 보여줘야함.
react : {변수명, 함수 등}
-> src, id, href 등의 속성에서도 가능 {} 핵심!!
이미지 삽입
import logo from './logo.svg';
<img src= { logo } /> : { } 필수
JSX에서 style 속성 집어넣을 때 : 오브젝트 형식으로 넣어야함
style = {object 자료형으로 만든 스타일}
ex) style = { {color : 'blue', fontSize : '30px'} } ('-' 사용 X)
리액트의 데이터 저장공간 state 만드는 법 (useState)
1. {useState 상단에 첨부} import React, { useState} from 'react';
- useState(데이터)
useState('남자 코트 추천'); -> [a,b]두개의 데이터가 들어가는 array가 남음,
a : 남자코트 추천(진짜 데이터) b : 남자코트추천 state 정정해주는 함수(데이터를 수정하기 위한 함수)
정리
1. state 는 변수 대신 쓰는 데이터 저장공간
- useState()를 이용해 만들어야 함.
state 사용 이유
: 웹이 App처럼 동작하게 만들고싶어서
state는 변경되면 HTML이 자동으로 재렌더링 됨. (새로고침 필요 X) => HTML이 새로고침 없이도 스무스하게 변경됨.
-> 자주 바뀌는, 중요한 데이터를 state로 저장해서 사용하기!
그냥 변수 : 재렌더링 X.
cf) 터미널에 뜨는 warning : eslint가 잡아주는 문법 체크사항! 보기 싫으면? 맨 위에 /* eslint-disable */ 치면 해결!
이벤트 만드는 법
- 좋아요 버튼 만들기
onClick = {클릭될 때 실행할 JS(함수()) (=) onClick={()=>{실행 내용}}}state 변경 방법 : 따봉변경() 사용
- 버튼 누르면 Spring 개발공부로 바꾸기
function 제목바꾸기() {
var newArray = 글제목;
newArray[0] = 'Spring 개발공부'
글제목변경(newArray);
}=> X (이유 : 얕은 복사여서)
function 제목바꾸기() {
var newArray = [...글제목];
newArray[0] = 'Spring 개발공부'
글제목변경(newArray);
}=> state를 deep copy 해서 사용
<button onClick = { 제목바꾸기 }>button</button> //구현 부분<Array, Object 데이터 수정 방법>
: 일단 변경 함수 사용
변경함수(대체할 데이터)
state는 직접 건드리지 X, deep copy 해서 건드리기!
Q. 버튼을 누르면 제목들을 글자순 정렬?
- 기존 state 카피본 생성
- 카피본에 수정사항 반영하고
- 변경함수 ()에 집어넣기
전체코드
import React, { useState} from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
let [글제목, 글제목변경] = useState(['React 개발공부', '개발공부', '개발바닥']);
let [따봉, 따봉변경] = useState(0);
let posts = '강남 고기 맛집';
// 버튼 누르면 Spring 개발공부로 바꾸기
function 제목바꾸기() {
var newArray = [...글제목];
newArray[0] = 'Spring 개발공부'
글제목변경(newArray);
}
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<button onClick = { 제목바꾸기 }>button</button>
<div className='list'>
<h3> { 글제목[0] } <span onClick={() => { 따봉변경( 따봉 + 1 )}}>👍</span> {따봉} </h3>
<p>2월 17일 발행</p>
<hr/>
</div>
<div className='list'>
<h3> { 글제목[1] } </h3>
<p>2월 18일 발행</p>
<hr/>
</div>
<div className='list'>
<h3> { 글제목[2] } </h3>
<p>2월 19일 발행</p>
<hr/>
</div>
</div>
);
}
export default App;
reference
https://www.youtube.com/playlist?list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy
