[react 리액트] useState 초간단 사용법

 

1. state 란?

1) 컴포넌트가 관리하는 상태 값
2) 상태 값이 변하면 component의 UI를 변경
즉, prop 처럼 값이 변하면 component 함수를 다시 실행하여 새로운 return  값 생성
 
 
 

2. prop vs useState

1) prop은 component를 사용하는 외부자를 위한 데이터이고
2) state는 component를 만드는 내부자를 위한 데이터이다.
 
 
 

3. 사용법

1) useState는 배열을 반환하는데 0번째 index는 '값', 1번째 index는 '함수'를 반환
2) '구조분해할당'으로 useState를 선언
* const [mode, setMode] = useState('초기값');
* 여기서 mode가 '값'
* setMode('값')는 함수 // 여기서 값을 바꾸면 함수가 그 값에 맞춰 다시 실행
 * mode, setMode 이름은 아무거나 해도 됨

 

 

 

4. setter 함수의 인자로 함수가 올 수도 있음

setState()의 인자로 '값'을 주는경우

1)state를 변경시키고 리렌더링 되지만 연속해서 동일한 set 함수를 실행시킬 경우 Batch(모아서) 처리로 인해, 가장 마지막에 호출된 set 함수만 overwrite되어 호출 됨

setState()의 인자로 '함수'를 받는 경우

1) 이전 state 객체를 인자로 받고 새로운 state 객체를 반환함
2) 연속으로 set 함수를 호출하여도 함수는 Queue에 저장되어 순서대로 실행되며 state를 업데이트한 후 리턴 시키고 이때 리턴된 state를 Queue에 담겨 있고, 다음으로 실행될 set 함수의 인자로 전달하여 state의 최신 상태를 유지

 
 

📌예제: 게시판처럼 메뉴 클릭하면 하단 글이 바뀌는 화면

1) App.js (컴포넌트)
- menu에 onClick을 넣고 클릭하면 setMode('값') 로 값 바꿔 함수 실행
- App()함수에 useState 선언하고 if()문으로 mode 값에 따라 Contents 컴포넌트에 프로퍼티를 content 변수에 담음

import './App.css';

import React, {useState} from 'react';

import Contents from './Contents';

function App() {

  const [mode, setMode] = useState('Home');

    let content = null;

    if(mode === 'Home'){

      content = <Contents title="Home" body="this is Home"/>

    } else if(mode === 'Store'){

      content = <Contents title="Store" body="this is Store"/>

    } else if(mode === 'Lookbook'){

      content = <Contents title="Lookbook" body="this is Lookbook"/>

    } else if(mode === 'Profile'){

      content = <Contents title="Profile" body="this is Profile"/>

    }

    return <div className='wrap'>

      <ol className='Nav'>

        <li className='menu'><a href='#' onClick={()=>{setMode('Home')}}>Home</a></li>

        <li className='menu'><a href='#' onClick={()=>{setMode('Store')}}>Store</a></li>

        <li className='menu'><a href='#' onClick={()=>{setMode('Lookbook')}}>Lookbook</a></li>

        <li className='menu'><a href='#' onClick={()=>{setMode('Profile')}}>Profile</a></li>

      </ol>

      {content}

    </div>

}

export default App;

 
 
2) Contents.js (컴포넌트)
- App.js에서 Contents의 프로퍼티 받아와서 <h1> <h2> 로 return

import Styles from './Contents.module.css';

function Contents(props){

    return <div className={Styles.Contents}>

        <h1>{props.title}</h1>

        <h3>{props.body}</h3>

    </div>

}

export default Contents

 
 
3) 완성

 

 

 

📌useState 말고 let 으로 선언한 변수로는 상태 관리를 할 수 없을까?

1) 변경사항이 화면에 나타나려면 랜더링이 발생해야 한다! 

2) 랜더링을 일으키는 것은 State의 setter 함수이다.
- 일반 변수는 랜더링을 일으키지 못해 콘솔로 찍으면 변화해도 화면에 나타나지 않음.

3) 값의 변화를 화면에 보여주려면 반드시 State를 사용해야 한다!