[React] 리액트 훅스(1) - useState

🚗 useState

state란 컴포넌트의 상태를 의미한다.

 

useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트 시켜주도록 사용한다.

 

기본적인 형태는 아래와 같다.

 

const[state, setState] = useState(초기값);

 

 

초기값을 인자로 넣으면 state와 setState라는 두 가지 요소를 배열 형태로 리턴해준다.

 

우리의 현재 상태값이 state라는 변수에 들어가게 되는데 이를 변경하고 싶다면 setState를 이용해서 변경할 수 있다.

 

내부의 변수 이름은 우리가 원하는 대로 변경할 수 있다.

 

 

 

🚓 useState 사용해보기

우리는 개발을 진행하면서 메뉴에 선택한 화면을 보여주도록 하는 state 를 설정하도록 해보자.

const [selected, setSelected] = useState('메인');

 

 

위와 같이 배열을 선언하도록 한다.

 

이제 하드코딩이 아니라 selected라는 state안에 들어있는 초기값 '메인'이 들어가도록 사용할 수 있다.

 

이제 클릭을 했을 때 값이 변경되도록 하기 위해 onClick 함수를 사용할 것이다.

 

버튼과 Span을 이용해서 간단하게 state를 변경해보도록 하자.

 

버튼을 누를때 잘 변경되는 것을 알 수 있다.

 

메인

 

 

결제

전체 코드는 아래와 같다.

 

import { LOGO } from 'assets/images';
import { Image } from 'components/img';
import styled from 'styled-components';
import { useEffect, useState } from 'react';


const HeaderDiv = styled.div`
	width: 100%;
	box-sizing: border-box;
	padding: 20px 80px 0;
`;

const Header = () => {
	const [selected, setSelected] = useState('메인');

	return (
		<HeaderDiv>
			<Image src={LOGO} alt="LOLPAGO" />
			<button onClick={() => setSelected('메인')}>메인</button>
			<button onClick={() => setSelected('결제')}>결제</button>
			<span>{selected}</span>
		</HeaderDiv>
	);
};

export default Header;

 

리액트 정리는 롤파고와 함께 진행되기 때문에 순서대로 보면 도움이 된다.

 

https://2t-hong.tistory.com/173

[LOLPAGO] React 설치 및 Header 구성(3)

 

위를 참고하면 좋겠다.

 

useState를 이용하여 상태를 쉽게 변경하는 방법을 알아보았다.

 

해당 내용은 별코딩님의 ReactHooks에 취한다를 참고했습니다.

 

 

https://www.youtube.com/playlist?list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO

React Hooks에 취한다 - 리액트 훅스 쉽게 마스터하기