[React.js Hook] useState 에 대해 알아보기

안녕하세요 까치입니다.
오늘은 react hook인 useState에 대해 배워보도록 하겠습니다.
hook 은 동적인 웹페이지를 만들기 위해 존재하는 함수 인데요.
동적으로 웹페이지를 잘 만들기 위해서는 hook의 대해 잘 익히고 
사용할 줄 알아야할 것 같습니다.

그럼 useState에 대해 알아 보도록 하겠습니다.
tutorial이라는 앱 안에 화면을 먼저 만들어 주도록 하겠습니다.
저는 tutorial 앱안에 praticePage라는 폴더를 만들고 UsestaePrac.js라는 
파일을 만들어 아래와 같이 화면을 구성 하겠습니다.

practicePage라는 폴더를 생성했고 그 안에  useStatePrac이라는 파일을 만든 후 

아래와 같이 코딩을 해 놓았습니다. 여기서 주의 할 점은 UseStatePrac 이라는 컴포넌트를 만들때는 

무조건 앞의 문자를 대문자로 해주어야 컴포넌트로 인식한다는 점 참고 부탁드립니다.

 

 

 

 

input 태그 와 h1태그로 화면을 만들면 위와 같은 모양이 나옵니다.

 

 

먼저 위와 같이 풀로 코드를 보여 드리고 리뷰해 보면서 해설을 해보겠습니다.

먼저 useState 를 사용하기 위해서는 import 를 해주어야 합니다 .

react 안에 있는 것을 js파일에 넣어 주어야 인식을 하기 때문에 먼저 

import 안에 {useState}를 넣어 주시면 됩니다.

 

useState는 기본적으로 
react에 들어있는 함수 useState를 가져오며 

 

const [name, setName] = useState('') 비구조화 할당을 통해 초깃값을 설정해 줍니그 후 setName('값'); 이라는 함수를 통해 name의 변수의 값을 설정을 해 주면 끝입니다.

 

이것을 코드로 보면 

const [name, setName] = useState('');
setName('홍길동');
<div>{name}</div>

 

이런식으로 setName()라는 함수를 통해 값을 할당을 한 뒤 자신이 원하는 값으로 값을 변경하고 setName()이라는 함수를 통해 값을 넣어주시면 그 값은 name이라는 변수안에 들어가게 됩니다.그값을 화면에서 보여지는 식으로 구조를 잡으시면 되겠습니다.

 

자 그럼 소스로 돌아가서 확인 해보면 

import React, { useState } from 'react';

const UseStatePrac = () => {
    const [ name, setName ] = useState('');
    const [ age, setAge] = useState('');

    const onSetName = (e) => {
        setName(e.target.value);
        console.log(e.target.value);
    }

    const onSetAge = (e) => {
        setAge(e.target.value);
        console.log(e.target.value);
    }



    return(
        <div>
            <input value={name} placeholder="이름" onChange={onSetName}></input>
            <input value={age} placeholder="나이" onChange={onSetAge}></input>
            <hr></hr>
            <h1>{name}</h1>
            <h1>{age}</h1>
        </div>
    );
}

export default UseStatePrac;

import './App.css';
import UseStatePrac from './practicePage/UseStatePrac';

function App() {
  return (
      <UseStatePrac/>
  );
}

export default App;

먼저 useState 를 이용하여 name과 age라는 변수를 만들어 놨고 

그값이 input 에서 onchange값이 변경이 될 때 그 값이 변경이 되는것이 인지가 될 때

onSetName, onSetAge라는 함수를 호출 시켜 내용이 name,age라는 함수가 업데이트 되어 

 h1태그안에변로 호출 되어 화면에 렌더링 되게 됩니다.

위와 같은 내용을 확인 해 보면 

다음과 같이 변화하는걸 확인 할 수 있습니다.

위와같이 환경을 구축해 놓고 확인 보았나요?

javascript내용은 어떻게 코딩하느냐에 따라 내용이 너무나 달라지기 때문에 

많이 연습해 보면서 활용하는 법을 생각해 보아야 할 것같습니다.