[React] 공식 문서 / Hook / 3. State Hook 사용하기

https://ko.reactjs.org/docs/hooks-state.html

 

 

 

 

Hook과 함수 컴포넌트

함수 컴포넌트 - 둘 다 가능

const Example = (props) => {
  // 여기서 Hook을 사용할 수 있습니다!
  return <div />;
}

function Example(props) {
  // 여기서 Hook을 사용할 수 있습니다!
  return <div />;
}

• state가 없는 컴포넌트
• hook은 state를 함수 안에서 사용가능하게 해줌
• hook은 클래스 안에서 동작 X
• 하지만 클래스를 작성하지 않고 사용 가능

 

 

 

Hook이란?

특별한 함수.

예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줌

 

 

언제 Hook 사용?

함수 컴포넌트 안에 state를 추가하고 싶을 때

 

 

 

 

state 변수 선언

함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를 할당하거나 읽을 수 없음.

대신 useState Hook을 직접 컴포넌트에 호출!

 

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

 

 

 useState 

useState를 호출하는 것은 무엇을 하나?

-> state 변수 선언

• 위 코드에서 count (아무 이름으로 지어도 됨)
• useState는 클래스 컴포넌트의 this.state 기능과 같음
• 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않음

 

useState의 인자로 무엇을 넘겨주어야 하나?

-> state의 초기값

• 함수 컴포넌트의 state는 클래스와 달리 객체일 필요x, 숫자 타입과 문자 타입을 가진다.
• 2개의 다른 변수를 저장하고 싶으면 useState() 두 번 호출

 

useState는 무엇을 반환?

-> state 변수, 해당 변수를 갱신할 수 있는 함수 (쌍으로 반환)

• ex) const [count, setCount] = useState()

 

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);
  

• count라는 state변수를 0으로 초기화
• count변수의 값을 갱신하려면 setCount 호출

 

 

 

state 가져오기

• 클래스 컴포넌트
  • {this.state.count}
• 함수 컴포넌트
  • {count}

 

 

 

state 갱신하기

• 클래스 컴포넌트
  • this.setState()
• 함수 컴포넌트
  • setCount()
  • setCount와 count변수를 가지고 있으므로 this 호출하지 않아도 됨

 

 

 

요약

import React, { useState } from 'react';
//useState 훅을 React에서 가져옴

function MyComponent() {
    const [count, setCount] = useState(0);
	// state변수 count와, state를 갱신할 수 있는 setCount 함수 생성
    // useState의 인자값으로 0을 넘겨주면 count = 0으로 초기화
    
    return (
        <div>
            <p>You click {count} times </p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
		// 사용자가 버튼 클릭 하면 setCount함수를 호출하여 state변수(count) 갱신
		// React는 새로운 count변수를 MyComponent에 넘기며 해당 컴포넌트를 리렌더링
    );
}

export default MyComponent;

 

 

 

 

 

끝