React hooks 리액트 훅 useState란?

1. React hooks이란?

 

 아주 쉽게 React는 클래스형, Hooks는 함수형이라고 생각하시면 됩니다.

리액트와 리액트 훅은 다른 라이브러리가 아닙니다.

같은 라이브러리이며 단지 클래스형으로 코드를 작성하느냐,

함수형으로 작성하느냐의 차이입니다.

그렇다면 왜 함수형을 사용하는 게 더 좋고, 모던하며, 효과적인지 알아보겠습니다.

 

• 클래스형?
• 함수형?

 

- 클래스형

 

처음 리액트는 클래스형으로 등장하였습니다.

하지만 로직이 비교적 복잡하여 컴포넌트 재사용에 용이하지 않았고,

코드가 불필요하게 길어지기도 했습니다.

그러하여 Facebook은 조금 더 실용적이고 코드도 줄일 수 있는

함수형의 리액트 훅을 발표하였습니다.

 

- 함수형

 

함수형의 리액트 훅은 컴포넌트를 재사용하기 정말 쉽습니다.

또한 제공되는 함수들을 사용하여 훨씬 더 쉽고 짧게 코드를 작성 가능합니다.

코드가 짧다는 것은 가독성면에서 뛰어나다는 뜻이기도 합니다.

 

하지만 모든 프로젝트를 함수형으로 작성할 필요는 없습니다.

얼마든지 클래스형으로 작성하고 싶다면 작성하실 수 있습니다.

하지만 가능한 모던하고 쉬우며 코드가 짧고

가독성까지 좋은 훅을 사용하시길 권장드립니다.

 

그렇다면 짧은 코드 예제로 훅이 어떻게 사용되는지 알아보겠습니다.

새로 생성하신 자바스크립트 파일에 코드를 작성하시면 됩니다.

저는 Another로 파일을 만들었지만 다른 이름을 사용하셨다면

변수 이름도 파일 이름에 맞게 설정해주세요.

(꼭 그렇게 해야 하는 것은 아니지만 이해하고 파악하기 쉽습니다.)

ex 1 )

import React from 'react'; // import 리액트

const Another = () => { // 변수의 이름은 항상 대문자로 시작합니다. 되도록 파일 이름과 동일하게.
	return(
    	    <div>hello</div> // HTML이 아닙니다.
        );                   
}

export default Another; // 기본 값을 Another로 하여 export합니다.

 

위의 코드가 기본 리액트 훅의 형태입니다.

전에 언급한 ES6의 arrow function을 이용한 것입니다.

return 안에 있는 코드들은 JSX라고 불리며,

HTML과 비슷하게 생겼지만 엄연한 자바스크립트 코드입니다.

리액트는 return안에 있는 컴포넌트들을 렌더링 하여

사용자의 브라우저에 보여주게 됩니다.

 

Another안에 또 다른 변수나 함수를 정의하지 않는다면,

코드를 더욱 짧게 쓸 수 있습니다.

ex 2 )

import React from 'react';

const Another = () => <div>hello</div>;

export default Another;

 

어떤가요? 아주 간단해지지 않나요?

arrow function에서 즉각 리턴을 요한다면

중괄호와 return 키워드는 생략 가능합니다.

그러면 이제 본격적으로

useState에 관해 알아보도록 하겠습니다.

 

 

2. useState란? 어디에 어떻게 사용하는가?

 

  useState는 기본적으로 getter와 setter사용 됩니다. 

getter는 변수의 값을 가져오는데 이용하고,

setter는 변수의 값을 변경하는데 이용합니다.

이는 홈페이지에서 유저의 상호작용이나,

함수에 의해 변경될 수 있는 값들을 지정하고 

변경하는 데 사용합니다.

이로써 해커나 다른 사람들이 지정되어있는 값을

쉽게 접근하지 못하게 하기도 합니다.

 

사용 예시 코드를 보겠습니다.

import React, {useState} from 'react'; // import 리액트와 useState

const Another = () => { // 변수의 이름은 항상 대문자로 시작합니다.
	const [name, setName] = useState();

	return(
    	    <div>hello</div> // HTML이 아닙니다.
        );                   
}

export default Another; // 기본 값을 Practice로 하여 export합니다.

 

이것이 바로 useState의 사용법입니다.

const [name, setName] = useState();

*useState를 import 해주어야 한다는 사실을 잊지 마세요!!

const 다음 대괄호를 이용, 두 개의 변수를 지정합니다.

하지만 name, setName과 같이 2번째 변수의 이름 앞에 set을 붙여

setter임을 알려주시는 게 좋습니다.

 

useState를 사용하는 또 다른 방법에 관해 알아보겠습니다.

const [name, setName] = useState();
// 아무런 값 없이 초기화.
// or

const [name, setName] = useState(10);
// 숫자 int 계열의 초기화 당연히 float과 같은 소수도 가능합니다.
// or

const [name, setName] = useState('');
// string 문자계열의 초기화.

 

상황에 따라 다르지만 처음 값이 불분명하다면,

아무것도 없는 괄호만 두시는 것이 편합니다.

후에 Typescript 사용 시 타입을 설정하면 되기 때문입니다.

하지만 지금은 Javascript로만 말씀드리겠습니다.

 

값을 이용하고 싶을 때는 아래 코드와 같이

첫 번째 변수를 사용합니다.

console.log(name);

변수의 값을 바꾸거나 새로 할당할 때는

아래 코드와 같이 2번째 변수를 이용하며,

함수처럼 괄호 안에 값을 지정해줍니다.

setName("Mike");

 

이렇게 쉽게 개발자는 값을 변경할 수 있습니다.