본문 바로가기
개발 부산물/React & Javascript

React 클래스 변수와 State변수의 역할 및 차이

by 개탱 2023. 3. 14.
728x90

React에서 클래스 변수와 state 변수의 차이점

  1. 선언 방법:
  2. 클래스 변수는 constructor() 안에서 this.변수명 = 초기값 형태로 선언하며, state 변수는 class 내부에서 state = { 변수명: 초기값 } 형태로 선언합니다.
  3. 업데이트 방법:
  4. 클래스 변수는 직접 값을 변경할 수 있지만, React에서는 setState() 함수를 통해 state 변수를 업데이트해야 합니다.
  5. 컴포넌트 렌더링 영향:
  6. 클래스 변수의 값이 변경되어도 컴포넌트가 다시 렌더링되지 않습니다. 반면에 state 변수의 값이 변경되면 컴포넌트가 다시 렌더링됩니다.
  7. 변경 가능성:
  8. 클래스 변수는 언제든지 값을 변경할 수 있지만, state 변수는 setState() 함수를 통해서만 값을 변경할 수 있습니다.

따라서, React에서는 state 변수를 사용하여 컴포넌트의 상태를 관리하고, 클래스 변수는 주로 컴포넌트 내부에서 사용되는 일반적인 변수로 사용됩니다.

 

클래스 변수와 state 변수의 역할

  1. 클래스 변수:
    클래스 변수는 컴포넌트 내부에서 사용되는 일반적인 변수로서, 주로 다음과 같은 역할을 합니다.
    1. (예시사진이 깨져버렸습니다.. 이후에 글로서 수정하겠습니다.)
  2. state 변수:
    state 변수는 컴포넌트의 상태를 관리하는 변수로서, 다음과 같은 역할을 합니다.
    1. (예시사진이 깨져버렸습니다.. 이후에 글로서 수정하겠습니다.)

따라서, 클래스 변수는 컴포넌트 내부에서 다양한 용도로 사용되는 반면에, state 변수는 컴포넌트의 상태를 저장하고 렌더링을 관리하는 역할을 담당합니다.

댓글