[TIL] 8월 31일 State!!

기록하며 공부하자·2021년 8월 31일

CodeCamp State 리액트 코드캠프

부트캠프 첫날이 마치고 본격적으로 두번째날 시작

오늘의 배운것을 정리하면 아래와 같다.

Javascript 기초 알고리즘
리액트 기초(State)

Javascript 알고리즘 시간에서는 배열 사용법에 대해서 다시한번 실습하였다.

배열

데이터 추가

1.push
2.unshift

push는 배열의 맨뒤에 데이터를 추가하는 것이다.
말그대로 배열에 밀어 넣는다고 생각하면 편할듯 하다.

사용법
Arr.push("추가할 데이터")

unshift는 배열 맨 앞에 데이터를 추가하는 것이다.

사용법
Arr.unshift("추가할 데이터")

데이터 조회

1.indexOf
2.includes

indexOf는 지정된 요소를 찾을 수 있는 첫번째 인덱스를 반환하고 존재하지 않으면 -1을 반환

사용법
Arr.indexOf("찾을 인덱스값")

리액트

왜 리액트 인가?

본격적으로 수업에 들어가기전 코드캠프의 주요 기술스택인 리액트에 대해서 설명해 주셨다.

자바스크립트가 발전하면서 많은 라이브러리,프레임워크들이 나왔고

현재는 리액트, 앵귤러, 뷰 3가지가 가장 많이 쓰이는데 그중에서도 리액트가 가장 많이 쓰인다고 한다.

리액트를 쉽게 설명하면 필요한 부품(component)을 만들어 놓고 그때그때 필요한 부품을 불러와 사용하는 것이다.

오늘은 Component 에서 사용하는 함수중 하나인 state에 대해서 공부하였다.

state의 사용식


import {useState} from 'react'


const [state,setState] = useState("")

//const [state이름, state저장도구] = useState("초기값")

먼저 import로 react를 불러온 다음 사용한다.
state는 변수명처럼 쓰이고 setState에 저장도구이다.

useState() 괄호안에는 초기값을 설정할수 있다.

state를 사용해 변수를 정하고 함수를 만들면 태그에 각각 id 또는 클래스를 지정하지 않고 정말 간단하게 기능을 부여할수 있다.

기존 자바스크립트 방식

export default function CounterLetPage(){


    function aaa(){
        let count = Number(document.getElementById("number").innerText) + 1
        document.getElementById("number").innerText = count
    }

    return (
        <>
            <div id="number">0</div>
            <button onClick={aaa}>카운트 증가</button>
        </>

    )

state 방식

import {useState} from "react"

export default function CounterStatePage(){

    
    const [ count, Setcount ] = useState(0)

    function aaa(){
        Setcount(count + 1)

    }


    return(
        <>
            <div>{count}</div>
            <div>{count}</div>
            <div>{count}</div>
            <div>{count}</div>
            <div>{count}</div>
            <div>{count}</div>
            <div>{count}</div>
            <button onClick={aaa}>카운트증가</button>
        </>
    )



}