[React] Hooks : useState() 함수

2022.07.25

React Hooks - useState()

React 컴포넌트에서 동적인 값을 State라고 부른다.

사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요하다.

오늘 배운 useState() 함수는 함수형 컴포넌트에서도 상태를 관리할 수 있게 해준다.

import {useState} from 'react';

function App(){
  let post = 'React Blog';
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집','파이썬 독학'])
  
  return(
    <div className="App">
      <div className="black-nav">
        <h4 style=>{post}</h4>
      </div>
      
      <button onClick={()=>{
          let array = [...글제목].sort();
          글제목변경(array)
        }}>가나다 정렬</button>
  		<div className='list'>
    	<h4>{ 글제목[0] }</h4>
      </div>
    </div>
  );
}

import {useState} from 'react';

: React 패키지에서 useState 함수를 불러오는 식을 먼저 선언한다.

function App(){
  let [글제목,글제목변경] = useState(['0','0','0'])
}

: useState() 함수를 호출하면 배열을 반환하는데 [글제목]은 현재 상태값 변수이고, [글제목변경]은 상태값을 갱신해줄 수 있는 Setter 함수이다. useState 괄호 안의 값은 상태초기의 값이다.

 return(
    <div className="App">
      <div className="black-nav">
        <h4 style=>{post}</h4>
      </div>
     
     불가능
     <div></div>
     <div></div>
     
     가능 	
     <div>
     <div></div>
     </div>

: html은 return 함수 안에서 작성해야 하며 return() 안에는 병렬로 태그 2개이상 기입이 금지된다.

유튜브 코딩애플을 통해 공부