10장 React 기초

채팅

설문조사

코딩창

 

React란?

리액트는 페이스북에서 개발한 프론트엔드 라이브러리입니다
또한 리액트는 컴포넌트 기반으로 html태그들을 묶어 사용할 수 있으며 개발자가 설계한대로 UI가 사용자에게 보여집니다

• 리액트를 왜 사용하는가?
  html과 css등으로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합하지 않습니다.

• 리액트의 특징

  1. 컴포넌트
     리액트는 컴포넌트 기반의 라이브러리입니다..
     한 페이지에서 전체 페이지를 하나의 큰 덩어리로 보고 컴포넌트는 그 큰 덩어리를 이루는 요소들의 집합이라고 생각하면 됩니다
     리액트는 작은 컴포넌트들로 구성되어 유지보수와 재사용성이 매우 뛰어납니다 그렇기때문에
     똑같은 코드를 입력하여 똑같은 ui를 구성할 필요가 없어집니다.
     컴포넌트의 종류는 클래스형(stateful)과 함수형(stateless)가 있습니다.

hooks

hooks는 함수형 컴포넌트에서 사용이 가능한 상태관리 도구 입니다. 함수의 특징은 실행이 완료되면 함수의 스코프 안에 있는 모든 메모리는 해제되기 때문에 객체처럼 상태정보를 가지고 있을 수 없습니다. 그렇기 때문에 useState  hook을 이용하면 함수가 실행 종료되고 메모리에서 사라져도 상태를 저장할 수 있습니다.

 

1. useState()

현재 상태를 저장할 수 있는 useState 입니다.

useState를 불러와 줍시다

import React, { useState } from "react";

useState 는 state와  setter 함수로 이루어져 있습니다. state는 현재 상태정보를 가지고 있고 setter함수로 state를 변경 할 수 있습니다.

useState 안에 초기값을 줄수 있고 아래의 예시에서는 name과 nickname을 빈값으로 초기화 했습니다.

 const [state, setState] = useState({
    name: '',
    nickname:''
  })
  const [input, setInput] = useState({
    name: '',
    nickname:''
  })

state 사용하기

state.name
state.input

setter 함수 사용하기

setter 함수 안에 객체나 배열일 경우 불변성을 보장해야 하므로 spread 연산자를 통해복사해온 후 값을 변경하는 과정입니다

숫자나 단순 문자열일 경우 setInput 처럼 사용하면 됩니다

  const [state, setState] = useState({
    name: '',
    nickname:''
  })
  
  setState({
  	...input,
    ['name']: '홍길동'
  })
  
  console.log(state.name)
  
 const [input, setInput] = useState(0)
 setInput(1);
 
  const [input, setInput] = useState("")
 setInput("hello");
 

React로 간단한 페이지 만들기

import React, { useState } from "react";
import "./style.css";

export default function App() {
  const [state, setState] = useState({
    name: '',
    nickname:''
  })
    const [input, setInput] = useState({
    name: '',
    nickname:''
  })
  const onChange = e => {
    setState({
      ...state, [e.target.name]: e.target.value
    })
  }
  const onClick = e => {
    setInput({
      ...input, 
      ['name']: state.name,
      ['nickname']: state.nickname
    })
  }
  const deleteAll = e => {
    setInput({
      ...input, 
      ['name']: "",
      ['nickname']: ""
    })
    setState({
      ...state, 
      ['name']: "",
      ['nickname']: ""
    })
  }
  return (
    <div>
      <h1>my Home</h1>
      <p>Start editing to see some magic happen :)</p>
      <p>{input.name}</p>
      <p>{input.nickname}</p>
      <input name ='name' onChange = {onChange} value={state.name}/>
      <br />
      <input name = 'nickname' onChange = {onChange} value={state.nickname}/>
      <br />
      <button onClick = {onClick}>click</button>
       <button onClick = {deleteAll}>delete</button>
    </div>
  );

}