Campanula

const[state(값을 담을 변수), setState(변수값을 바꿔주는 함수)] = useState(초기값);

test1파일

movies: 값을 담을 변수

setMovies: 변수값을 바꿔주는 함수

: 초기값 배열

const{name, nickname}=state;은

const name = state.name;

const nickname= state.nickname이랑 같음

object에 있는 값을 바로 변수 할당

state안에 이미 name이랑 nickname이라는 변수가 있어서 변수선언

state를 console.log(state)해보면 {name:"홍길동",nickname:"홍아무개"}로 출력

객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.

name이 key값

스프레드 연산자(...): 기존 배열 객체의 값을 그대로 복사해와서 사용할 수 있는 연산자

const subject1=["국어", "영어", "수학"]

const subject2=["사회","과학"]

const subject=[...subject1, ...subject2]

console.log(subject)

["국어", "영어", "수학","사회","과학"]

some() 메서드는 배열한의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트

배열 변경X

값이 배열 내 존재하는지 확인

const fruits = ["apple", "banana", "mango", "guava"];

function checkAvailability(arr, val) {
  return arr.some((arrVal) => val === arrVal);
}

checkAvailability(fruits, "kela"); // false
checkAvailability(fruits, "banana"); // true

https://developer.mozilla.org/ko/

장점

1. 보기 쉽고 익숙하다.

2. 더욱 높은 활용도

컴포넌트

프로젝트 생성

npm init react-app book-react

라우팅: 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어로, '경로를 지정하는 과정' 의미, 페이지 라우팅은 요청에 따라 적절한 페이지를 반환하는 일련의 과정

리액트 라우터 설치(프로젝트 설정 후0

npm i react-router-dom

실행 방법

npm start

프로젝트에 라우터 적용하기

리액트 라우터가 제공하는 BrowserRouter컴포넌트로 App을 감싼다.

book-react1

경로 설정, route, link to

이벤트를 사용할 때 주의 사항

이벤트 이름은 카멜 표기법으로 작성

이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달

DOM요소에만 이벤트를 설정

keycode===13은 엔터

//반드시 하나의 요소들만 반환하여야한다. div로 감싼다.
function App(){
  return(
    <div>
        <h1>리액트 안녕~!!</h1>
        <h2>프로그래밍 시작합니다.</h2>
    </div>
  )
}

Node.js 설치

index.js는 진입

App.js는 기본

import 구문을 특정 파일을 불러오는 것을 의미.

Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.

이러한 기능을 브라우저에서도 사용하기 위해 번들러사용

번들러: 웹팩, Parcel, browserify라는 도구 등

리액트 프로젝트에서는 웹팩 사용

번들러를 사용하면 import 또는 require로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일 생성. 최적화 과정에서 여러 개의 파일로 분리

babel - loader는 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환(구버전 웹브라우저와 호환하기 위해서)

JSX: 자바 스크립트 확장 문법. 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

시작과 끝이 엄격함.

div로 감싸야한다.

import { Fragment } from "react";

//Fragment 사용
function App(){
  return(
    <Fragment>
      <h1>리액트 안녕</h1>
      <h2>잘 실행되는지 확인해 봅시다.</h2>
    </Fragment>
  );
}