[React]3. State

React_03_State

 

1. State: 컴포넌트 내부에서 관리되는 변경이 가능한 데이터

• 변수와의 차이점: 값 변경 시 화면에 바로 렌더링이 됨(화면에 적용)

        - JS 문법에서는 화면에 접근하는 렌더링 코드를 별도로 작성해야 함

    

• State 사용방법

    ①State import: import {userState} from 'react';

    

    ②State 선언: const [변수이름, set 변수이름]=useState(초기값)

    

    ③State 값 변경: set변수이름(변경값)

[실습1]버튼 클릭하면 숫자 증가시키기

 

[실습2]좋아요 실습: 하트 클릭 시 빨간 하트로 변경, 좋아요 개수 증가

 

[실습3]랜덤게임: 버튼 클릭 시 랜덤 수 출력되고 선택한 버튼의 숫자와 비교하여 결과 출력

*실행순서가 State 선언 부분-return문-함수 순으로 실행되므로 if문은 함수에 넣으면 안 됨