IT 엘도라도 로고
IT 엘도라도
황금

React 공식 문서 요약 - State Hook 사용하기

2020-09-11 15:17

React 공식 문서 요약 - State Hook 사용하기

💡
React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다.
 

1. 클래스형 컴포넌트와의 비교

다음은 버튼을 클릭할 때마다 화면에 표시되는 숫자가 1씩 증가하는 카운터를 렌더링 하는 예시이다. 첫 번째 코드는 클래스형 컴포넌트로 구현한 것, 두 번째 코드는 함수형 컴포넌트와 Hook으로 구현한 것이다. 이 둘을 비교하면서 이 포스팅의 설명을 이해해보도록 하자.
▼ 클래스형 컴포넌트
▼ 함수형 컴포넌트 + Hook
 

2. Hook과 함수형 컴포넌트

  • Hook은 특별한 종류의 함수를 의미한다. 대표적인 Hook이 바로 useState(), useEffect() 함수이다.
  • Hook은 함수형 컴포넌트 안에서만 동작하며, 클래스형 컴포넌트 안에서는 동작하지 않는다.
  • Hook은 함수형 컴포넌트로 클래스형 컴포넌트의 기능을 구현하고자 할 때 사용할 수 있다.
  • Hook을 사용하기 위해서는 몇 가지 규칙을 준수해야 한다. 이에 대해서는 'Hook 규칙' 포스팅을 참조하자.
 

3. useState() 함수 사용하기

  • 클래스형 컴포넌트에서는 생성자 안에서 this.state에 객체를 할당함으로써 지역 상태를 선언 및 초기화한다. 해당 상태 값은 this.state를 통해 참조가 가능하며, 이를 바꾸기 위해서는 this.setState() 메소드를 호출한다.
  • 함수형 컴포넌트에서는 useState() 함수를 호출함으로써 지역 상태를 가질 수 있다.
  • useState() 함수의 인자: 사용할 상태 변수의 초깃값에 해당한다. 클래스형 컴포넌트와 달리 반드시 객체일 필요는 없다.
  • useState() 함수의 반환 값: 상태 값과 해당 상태를 설정하기 위한 함수로 이뤄진 배열이다.
    • 상태 값을 받을 상태 변수의 이름은 마음대로 지을 수 있다. 일반적으로 지역 변수는 함수가 리턴할 때 메모리에서 사라지지만, useState() 함수에 의해 반환되는 상태 값은 React에 의해 렌더링 간에도 사라지지 않고 유지된다. 만약 여러 개의 상태 변수를 선언하고 싶다면 useState() 함수를 여러 번 호출해야 한다. 단, 그 호출 순서는 매 렌더링마다 같아야 한다.
    • 상태를 설정하기 위한 함수를 이용하여 상태 값을 변경하면, React는 새로운 상태 값을 해당 컴포넌트에 넘기며 다시 렌더링을 시도한다. 참고로 이 함수는 클래스형 컴포넌트의 this.setState() 메소드와 달리 '병합'이 아닌 '대체'이다. 따라서 웬만하면 상태 변수도 각각 독립적으로 선언하는 편이 좋을 것이다.
  • createState가 아니라 useState로 이름을 지은 이유는 두 가지이다. 첫째, 오직 최초 렌더링 시에만 상태 변수가 선언되고 그 이후의 렌더링부터는 이전의 값을 가져와 읽기 때문이다. 둘째, Hook의 이름을 짓는 방식에 관한 관습 때문이다.
말풍선
댓글 0
좋아요 0
    아직 작성된 댓글이 없어요.
사용자