useState - 값이 변경되면 바로 화면에 나오도록

사용 전

function Users(){
   const name = "초기값";

    return(
        <>
            <div>{name}님 환영합니다.</div>
        </>
    )
}
export default Users

 

결과페이지

 

어떤 경우 사용하지?

 

동적으로 값을 변경해야 할 때

예를들어, 사용자가 이름을 입력을 하자마자 name 변수가 변경되고 => 새로고침 없이 화면에 출력하고 싶다. 

 

 

사용법

const [name, setName] = useState('초기값'); //name은 값을 저장하는 변수, setName은 값을 변경하는 함수

 

setName 으로 값을 변경할 경우 
=> 실시간으로 변경된 데이터가 화면에 바로 보여진다.

왜? 함수형 컴포넌트가 재렌더링 되니까!! 

즉, state의 값이 변경되면 Component 는 다시 렌더링 된다.

 

주의) 아래와 같이 코드를 작성하면 무한루프에 빠진다.

왜? 컴포넌트 렌더링 => setName으로 State 값 변경 => 컴포넌트 재렌더링 =>  setName으로 State 값 변경  => 컴포넌트 재렌더링......

import { useState } from "react";

function Users(){
    const [name, setName] = useState('초기값');
    setName("홍길동");
   
    return(
        <>
            <div>{name}님 환영합니다.</div>
        </>
    )
}
export default Users

 

사용 예제

import { useState } from "react";

function Users(){
    const [name, setName] = useState('초기값');
    const [text,setText] = useState('');
    
    const changeHandler = (e)=>{
        setText(e.target.value);
    }

    const clickHandler = ()=>{
        setName(text);
    }

    return(
        <>
            <input onChange={changeHandler}  value={text} type="text" placeholder="이름"/>
            <button onClick={clickHandler}>확인</button>
            <div>{name}님 환영합니다.</div>
        </>
    )
}
export default Users

결과페이지

input 에 값을 입력하면 onChange 함수 호출 => text값 변경

확인 버튼을 누르면 onClick 함수 호출 => name값 변경