Single Page Application 이란? 인스타그램, 페이스북 같이
모바일 앱 처럼 새로고침 없이 화면이 바뀔 수 있도록 부르럽게 동작하는 웹 페이지를 말한다.
var arr = [<p>안녕</p>, <p>반갑</p>]
npx create-react-app 프로젝트명
npm start
- class 넣을 땐
className
- 변수 넣을 땐
{중괄호}
- 데이터 바인딩은
{중괄호}
- style 넣을 땐
style= {{스타일 명: '값'}}
- return() 안에는 병렬로 태그 2개 이상 기입금지
- 자료 감깐 저장할 땐 변수 혹은 state 문법을 쓴다.
import {useState}
let [작명1, 작명2] = useState(보관할 자료)
정리 : 자주 변경 될 거 같은 html 부분은 state로 만들어 놓자.
/* eslint-disable*/
onClick = {}
안엔 함수를 넣어야 함.
function 함수(){
실행할코드
}
return (
<div onClick={함수}>
)
return (
<div onClick={ function(){ 실행할코드 } }>
<div onClick={ () => { 실행할코드 } }>
)
❌ 등호로 변경금지
⭕state 변경함수 (새로운 state)
function App(){
let [ 따봉, 따봉변경 ] = useState(0);
return (
<h4> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h4>
)
}
- array/object 다룰 때 원본은 보존하는게 좋음
- state 가 array/object 면 독립적 카피본을 만들어서 수정해야함.
...
👈 스프레드 문법을 사용하면 화살표가 다른 완전 독립적인 array 복사본을 생성해줄 수 있음.
function App(){
let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
return (
<button onClick={ ()=>{
let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy)
} }> 수정버튼 </button>
)
}
기존 state == 신규 state
의 경우 변경 안해줌변수1 == 변수2
비교해도 true
나옴
컴포넌트
를 사용하면 더러운html
을 한 단어로 줄여
코드를 처음 보는 사람도 미래의 나도 이해가 쉽도록 할 수 있다.
function
만들고 (다른 function
밖에 만들어야 한다.)return()
안에 html
을 담는다.<함수명></함수명>
으로 호출해서 사용한다. (<함수 />
둘 다 가능)
return ()
안에html
병렬 기입 하려면 의미 없는<div>
대신<></>
사용 가능하다.
html
을 축약 할 때컴포넌트 만드는 문법 (화살표 함수ver)
const Modal = () => {
return (
<div></div>
)
}
html
css
로 미리 디자인 완성state
로 저장 (형식은 자유)state
에 따라 UI가 어떻게 보일지 작성조건식 ? 참일 때 실행 할 코드 : 거짓일 때 실행 할 코드
modal == true ? <modal/> : null
map()
map
: 많은div
들을 반복문으로 줄이고 싶은 충돌이 들 때 사용한다.
map()
사용법array
자료 갯수 만큼 함수안의 코드를 실행해준다.파라미터
는 array
안에 있던 자료이다.return
에 뭐 적으면 array
로 담아준다.글제목.map(function(a, i) {})
a
: array
안에 있던 데이터i
: 반복문 돌 때 마다 0부터 1씩 증가하는 정수
반복문으로 html
생성하면 key = { html마다 다른 숫자}
추가 해야 경고 문구가 안뜬다.
props
: 자식이 부모의state
를 가져다 쓰고 싶을 때 사용한다.
<자식 컴포넌트 작명 = { state이름 }/>
props
파라미터 등록 후 props.작명
사용<input>
태그<input></input>
혹은 <input/>
형식이여야 한다.text
range
checkbox
등이 있다.<select></select>
: 드롭다운 인풋<textarea></textarea>
: 큰 인풋 박스onChange
/ onInput
<input>
에 뭔가 입력시 코드 실행하고 싶을때 사용한다.
<input>
에 입력한 값 가져오는 법<input onChange = {(e) => {
{e.target.value}
}
- 클릭 이벤트는 상위 html로 퍼진다. => 이벤트 버블링
- 이벤트 버블링을 막는법 :
e.stopPropagation()
<input>
에 입력한 값 저장하려면?
- state 변수를 만들어서 e.target.value를 할당 해주면 된다.
- state 변경함수는 늦게 처리된다. => 비동기 처리
constructor
super
render
채워 넣어야 한다.
class Modal extends React.Component {
constructor() {
super()
}
render() {
return (
<div>안녕</div>
)
}
}
class Modal extends React.Component {
constructor() {
super()
this.state = {
name: 'Kim',
age: 20
}
}
render() {
return (
<div>{this.state.age}</div>
)
}
}
class Modal extends React.Component {
constructor() {
super()
this.setState = {
age: 21
}
}
render() {
return (
<div>{this.state.age}</div>
)
}
}
class Modal extends React.Component {
constructor(props) {
super(props)
props.state = {
name: 'Kim',
age: 21
}
}
render() {
return (
<div>{this.props.age}</div>
)
}
}
pop()
: 배열의 마지막 요소 삭제shift()
: 배열의 첫 번째 요소 삭제splice()
: (제거할 요소의 인덱스, 제거할 요소의 개수)filter()
: 조건에 일치하는 새 배열을 생성delete()
: 배열 요소를 삭제가 아닌 빈 값으로 변경
git commit --amend -m '수정내용'