[React] React로 만든 Counter 소스 뜯어보기 - Counter.js

< React로 만든 Counter 소스 뜯어보기 -Counter.js >

 

 

Counter.js01

 

1. state

 

: 컴포넌트가 가지고 있는 상태값

데이터를 가지고 있는 객체이다.

클래스형 컴포넌트를 작성할 때는 클래스 내부 맨 위에 작성

변경된 데이터를 관리한다.

 

 

(코드설명)

> Counter 클래스를 컴포넌트화 시킨다.

> Counter 클래스의 현재 상태값은 number:0 

 

 

 

Counter.js02

 

 

2. 애로우 함수 (Arrow Function)

 

: function 키워드 대신 "  => " 를 사용하여 함수를 선언

 

 

예시)

 

Arrow Function

 

( 파라미터 ) => { return 내용 }

 

 

 

 

3. this 키워드

 

: 일반적으로 부모를 가리킨다.

 

 

 

4. setState()함수

: state값을 바꿀때 쓴다

state값을 직접 바꾸면 인식하지 못해서 다시 렌더링 하지 않음 (react lifecycle을 보면)

 

> handleIncrease 함수를 선언

> setState로 함수의 상태값을 변화시킨다? (this가 가리키는 게 머지?)

> number 은 상태값 + 1 

 

 

 

Counter.js02

 

 

> handleDecrease 함수를 선언

> setState로 함수의 상태값을 변화시킨다? (this가 가리키는 게 머지?)

> number 은 상태값 - 1 

 

 

 

Counter.js03

 

 

> 렌더링

> 카운터 값을 증가시키고 감소시킬 버튼이 포함된 카운터 만든다.

 

 

(리액트 라이프 사이클 공부 필요)

 

 

- 모르는 부분이 많습니다. 아시는 분 댓글로 알려주세요!