728x90
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를 통해 업데이트해 주어야 한다고 한다! (메모메모..!!)
728x90