[React] 리액트 세팅, JSX, 이벤트핸들링, 문법(삼항 연산자, map, if, &&, switch, 배열)

세팅

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});

🚨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() : 맨 뒤의 원소 제거