세팅
npx create-react-app {프로젝트명}
작동방식
index.js
-> <App />, document.getElementById('root')
-> App.js
-> function App(){} export default App;
JSX
js에서 html을 작성할 숫 있게 해주는 React 내장 JSX문법
return 안에는 크게 하나의 태그가 감싸고 있어야 함.
데이터 바인딩
서버에서 받아온 데이터를 화면에 보여줌
기존 JS 방식 : document.getElementId().innerText('') 보다 간편하게 구현가능
중괄호 {변수명, 함수 등}
- img태그 src속성 <img src="~~~.jpg"> 보다 간편하게
import img1 from './img.png';
<img src="{img1}"> - stle 속성
style={ obj형 스타일 속성 : "값", }
->괄호 안의 값을 변수로 지정해두고 호출하는 것이 더 간결
useState
state : 리액트의 데이터 저장공간
import React, {useState} from 'react';
let [변수명, 변경함수] = useState("초기값");
새로고침 없이 변경된 내용을 반영할 수 있다 !!
단, state를 완전히 대체함.
Event
onClick={실행할함수} or onClick={ () =>{ 실행할내용}}
문법
삼항 연산자
조건 ? 참일때 실행할 코드 : 거짓일때 실행할 코드
map
배열.map(실행할 함수)
const arr= [1,2,3]
const arr2 = arr.map(( each )=> {return each*2});JSX return()안에서
...
return(
<>
{arr2.map((each,index)=>(
<div>{each}</div>
)
}
</>🚨Warning: Each child in a list should have a unique "key" prop.
반복을 사용한 HTML요소에는 꼭 key 파라미터를 주어야한다. key={}
default 파라미터
함수 선언시 파라미터가 입력되지 않을 경우에 가질 파라미터를 부여하는 문법.
=(등호)를 통해 지정할 수 있다.
function 함수명(파라미터명 = 지정할초기값)
조건문
if
- *JSX 안에서는 if문 불가능!!!
- function 안에서 return을 만나면 그 이하 코드 실행 X
삼항연산자
JSX안에서 조건문 용도로 사용
{ 조건 ? 참 이면 보여줄 HTML : 거짓 이면 보여줄 HTML}
<div>
{ 1 ===1 ? <p> 참</p> : <p>거짓</p>}
</div>&&연산자
1 === 1 && <p>참이면 보여줄 HTML </p>switch / case
switch(검사할 변수명) { }
if - else if - else if - else 길게 이어지는 것 보다 가독성 좋아짐
switch (액션.type){
case '수량증가':
return 수량증가된state;
case '수량감소':
return 수량감소된state;
default :
return state;
}배열에 원소 추가/삭제/변경
수정할 원 배열 state를 깊은 복사 하고, 그 복사한 state에 대해서 수정할 내용을 반영시키고, 원 배열을 수정한 배열로 변경한다(setState)
- 배열.unshift(추가할 원소) : 맨 앞에 원소 추가
- 배열.push(추가할 원소) : 맨 뒤에 원소 추가
- 배열.shift() : 맨 앞의 원소 제거
- 배열.pop() : 맨 뒤의 원소 제거
