728x90
React에서 클래스 변수와 state 변수의 차이점
- 선언 방법:
- 클래스 변수는 constructor() 안에서 this.변수명 = 초기값 형태로 선언하며, state 변수는 class 내부에서 state = { 변수명: 초기값 } 형태로 선언합니다.
- 업데이트 방법:
- 클래스 변수는 직접 값을 변경할 수 있지만, React에서는 setState() 함수를 통해 state 변수를 업데이트해야 합니다.
- 컴포넌트 렌더링 영향:
- 클래스 변수의 값이 변경되어도 컴포넌트가 다시 렌더링되지 않습니다. 반면에 state 변수의 값이 변경되면 컴포넌트가 다시 렌더링됩니다.
- 변경 가능성:
- 클래스 변수는 언제든지 값을 변경할 수 있지만, state 변수는 setState() 함수를 통해서만 값을 변경할 수 있습니다.
따라서, React에서는 state 변수를 사용하여 컴포넌트의 상태를 관리하고, 클래스 변수는 주로 컴포넌트 내부에서 사용되는 일반적인 변수로 사용됩니다.
클래스 변수와 state 변수의 역할
- 클래스 변수:
클래스 변수는 컴포넌트 내부에서 사용되는 일반적인 변수로서, 주로 다음과 같은 역할을 합니다.- (예시사진이 깨져버렸습니다.. 이후에 글로서 수정하겠습니다.)
- state 변수:
state 변수는 컴포넌트의 상태를 관리하는 변수로서, 다음과 같은 역할을 합니다.- (예시사진이 깨져버렸습니다.. 이후에 글로서 수정하겠습니다.)
따라서, 클래스 변수는 컴포넌트 내부에서 다양한 용도로 사용되는 반면에, state 변수는 컴포넌트의 상태를 저장하고 렌더링을 관리하는 역할을 담당합니다.
728x90
728x90
'Dev > [Javascript] React...' 카테고리의 다른 글
Chrome Javascript MediaDevices.getUserMedia() http Permission error (0) | 2023.09.22 |
---|---|
fakepath local image File path 로컬 이미지 미리보기 / createObjectURL - javascript (0) | 2023.02.20 |
[JavaScript] rest & delete 연산자 / 불변성을 유지하며 Object에서 내부 key 삭제하기 (0) | 2023.02.08 |
클로저를 활용한 static 변수 만들기 - [javascript] (0) | 2023.01.27 |
React js | UI Component wrapper / container 방식 children Array 중 일부만 노출 이슈 (0) | 2023.01.18 |