본문 바로가기
Web/React

[React] Hook, State

by juein 2020. 6. 11.

클래스 컴포넌트와 함수 컴포넌트

  • 리액트 컴포넌트 에서 props 데이터만 다룬다면 함수형 컴포넌트를 사용 할 수 있다.
  • Hook 도입 이전(react v16.8미만) 에는 컴포넌트에서 state, 생명주기(life cycle)를 다루려면 반드시 클래스 문법을 사용 해야했다.

 

함수 컴포넌트(function component)

 

function Test() {
  return (
      <div>test</div>
  );
}

//또는
const Test = () => {
  return (
      <div>test</div>
  );
}

 

클래스 컴포넌트(class component)

 

class Test extends Component {
  render() {
    return (
       <div>test</div>
    );
  }
}

 

개념적으로 React 컴포넌트는 함수형에 더 가깝다고 한다.

친절한 리액트 개발진은 클래스 문법을 잘 모르는 사람을 위해 Hook을 도입해줬다.

Hook은 Class없이 React의 기능들을 사용하는 방법 이다.

 

Hook

  • Hook 소개 : https://ko.reactjs.org/docs/hooks-intro.html
  • 컴포넌트의 state 를 사용할 수 있는 useState 함수가, 생명주기를 다루기 위한 useEffect 함수가 추가되었다. 그 외 커스텀 Hook도 생성 가능. (보통 네이밍이 use~ 로 시작된다.)
  • Hook은 필수 사용이 아니다. 기존 컴포넌트와의 호환성도 100% 이며, Hook의 도입을 위해 기존 코드를 다시 작성할 필요가 없다.
  • Hook는 클래스 안에서 동작하지 않는다.
  • Hook 사용시 여기의 두가지 규칙을 준수해야 한다.

State

  • props는 부모 컴포너트가 값을 설정된 값을 컴포넌트 자신이 읽기 전용으로만 사용 할 수 있었는데, state는 컴포넌트 자체적으로 지닌 값으로 내부에서 값을 읽고, 변경할 수 있다.
  • state의 값은 직접 변경이 불가능하고, setState() 메소드를 사용해서만 변경할 수 있다.

 

클래스 컴포넌트에서 state 선언과 렌더

 

// 리액트의 컴포넌트 클래스를 상속
class TestState extends React.Component {
    // 초기 state는 constructor 메서드에서 정의해야 한다.
    constructor(props) {
        super(props);
        // state 값 설정
        this.state = {
            test: 1
        };
    }
    render() {
        return (
            <>
            //state.test 값 읽기
            <div>origin test state = {this.state.test}</div>

            <button type="button" onClick={() => 
                    // setState로 state값을 변경
                    this.setState({  
                        test : this.state.test + 1 
                    })
                }>
                plus
            </button>

             <button type="button" onClick={() => 
                    // setState로 state값을 변경
                    this.setState({  
                        test : this.state.test - 1 
                    })
                }>
                minus
            </button>
            </>
        )

    }
}

 

Hook 을 사용한 state 선언과 렌더

 

// useState Hook을 컴포넌트에 호출
import React, {useState} from 'react';

function TestState() {
    //함수 컴포넌트는 this를 가질 수 없기때문에 this.state 대신 useState 를 사용한다.
    // state 변수와, 해당 변수를 갱신할 수 있는 함수 두개를 선언한다.
    const [test, setTest] = useState(1);
    return (
        <>
        // state 값 읽기
        <div>origin test state = {test}</div>

        // 선언된 setTest 로 state 값 변경
        <button type="button" onClick = {() => setTest(test + 1)}>
            plus
        </button>

        <button type="button" onClick = {() => setTest(test - 1)}>
            minus
        </button>
        </>
    );
}

 

See the Pen Reack State by juein (@juein) on CodePen.

댓글