React) Hook -useState

useState를 배우고 쓰고있지만.. 아직까지 너무 혼란..(?) 스러워 이렇게 정리를 해본다..😂😂👊

 

Hook이란?

: 클래스 컴포넌트에서만 사용할 수 있었던 상태관리와 라이프사이클 관리 기능을 

함수 컴포넌트에서도 사용할 수 있도록 연동해 주는 함수이다. 

 

Hook을 사용할때 규칙 2가지

1. Hook은 함수 컴포넌트 혹은 custom hook안에서만 호출할 수 있고,

2. 함수 컴포넌트 내의 최상위에서만 호출해야한다

 

 

 

 

 

React 에서 State란?

- 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로 UI에 보여줄 정보를 결정할 때 사용할 수 있다. 

- 컴포넌트 내부에 있어서 내에서 정의및 사용을 하고 얼마든지 변경할 수 있다.

 

 

 

어떻게 사용할까?

//Main.js

import React from 'react';

const Main = () => {

  return (
    <>
    <h1>메인페이지</h1> //여기에 배경색을 css가 아닌 state를 이용해서 넣어볼 것이다.
    </>
  );
};

export default Main;

 

 

형태 : const [state,setState]= useState();

 

- state : 동적으로 관리해야 할 상태값으로,  state 상태의 초기값은 useState()를 호출할때  ()에 넣은 인자로 입력한 값이다.
- setState : state를 업데이트 하는 함수로, state를 초기값에서 다른 값으로 변경하고 싶으면 setState() 인자 안에 입력해준다. 

 

import React,{useState} from 'react';
//react의 내장 hook 이기 때문에 저렇게 씀

const Main = () => {

  const [color,setColor]=useState('blue')

//형태 : const [state,setState]= useState();
//state와 setState는 변수이기 때문에 마음대로 이름을 지정할 수는 있지만,
//해당 변수가 어떤 역할을 하는지 명확하게 드러내야 한다. (위에는 state를 color로 지정했다)

  return (
    <>

    <h1 style={{backgroundColor:'red'}}>메인페이지</h1>
    //이렇게 문자열을 넣어줘도 되지만, 

    <h1 style={{backgroundColor:color}}>메인페이지</h1>
    //이렇게 state로 하면 state 값을 변경할때마다 자동으로 바뀌는 것을 볼 수 있다. 
    
    </>
  );
};

export default Main;

 

 

state는 동적으로 변하는 값을 관리하기위해 사용하는 것이라,

<button>을 만들고,  눌렀을 때 h1태그의 배경색이 변하도록 구현해 보겠다.

 

// 위 에서 연결

<h1 style={{ backgroundColor: color }}>메인페이지</h1>
      <button onClick={() => setColor("pink")}>배경색 변경</button>
      
      //버튼을 눌렀을때 이벤트가 발생하고, 그 이벤트에 의해 함수(setColor)를 실행시키는데,
      //이 setColor가 color값을 변경하는 동작을 하게 된다.

클릭 전

클릭 후

 

이때, color가 변수라서 setColor를 사용하지 않고, 직접 할당해도 되지 않을까? 하는 의문이 생길 수 있는데,
직접 할당을 하게 되면 바뀐값을 기준으로 화면이 변하지 않지만, 
setState를 활용해서 state를 변경해 준다면 업데이트와 함께 다시 화면을 그려주는 리렌더링을 하기 때문에 화면에 변화가 생긴다. 

 

 

**그래서 state를 활용하여 화면에 변화를 주고 싶으면  꼭 setState를 통해 업데이트해 주어야 한다고 한다! (메모메모..!!)