코드캠프 2일차

드디어 2일차 :)
오늘은 react의 핵심 Component, State에 대해서 배웠다!

React 란

javascript를 기반으로 한 라이브러리이다. 최근에는 사용자가 급속도로 증가하고 그 규모가 커지면서 프레임워크라고 인정되는 추세이다.

react는 컴포넌트를 기반으로 다양한 형식의 데이터를 쉽게 전달할 수 있고, DOM과는 별개를 관리할 수 있다.

그렇다면 컴포넌트란 무엇일까

Component

UI 또는 기능을 부품화하여 재사용 가능하게 하는 것으로 기존에 각 요소를 하나하나 바꿔주어야하는 번거로움에서 벗어나 원본 컴포넌트 하나로 연결된 컴포넌트를 통제할 수 있다.

컴포넌트를 만드는 방법에는 두 가지가 있다.
1. Class형

2. Function형

기존에는 클래서형을 많이 사용하였으나 코드 작성이 길어지고 이에 따라 수정 보완, 코드 리뷰가 어려워짐에 따라 React-Hooks의 등장으로 최근에는 함수형 컴포넌트를 많이 사용하고 있다.
함수형 컴포넌트는 기존 javascript에서처럼 arrow function으로 함수 작성을 할 수 있다.

또한 React-Hooks에서는 State로 변수 선언을 보다 쉽게 할 수 있다.
state의 기본식은 이러하다.

const [state, setState] = useState()

위의 코드를 보면, state는 내가 사용할 변수, useState()는 () 안에 변수에 사용할 기본 값을 작성해주며 setState는 이 변수에 재할당 할 수 있는 함수이다.

다음은 state를 사용한 예이다.

import { useState } from 'react'

export default function Home() {
  // JavaScript
  const [text, setText] = useState("안녕하세요")

  function hello() {
    setText("반갑습니다")
  }

  return ( 
    // JSX
    // Fragment
    <>
      <div >{text}</div>
      <button onClick={hello}>버튼클릭</button>
    </>

  )
}

참고로 state를 사용하기 위해서는 react로 부터 useState를 import해야 사용할 수 있다. 그렇지 않으면 에러가 발생하니 유의하자.

위에서 살펴보면 div 안에 text라는 변수를 작성하고 text의 초기값을 '안녕하세요'로 설정하였다. 버튼을 클릭하면 이 text가 반갑습니다로 변하도록 hello() 함수를 작성해주었고, 그 안에 text의 값을 재할당해주는 setText() 함수를 작성해주었다.