React 실습 -5

자자자자자ㅏ자자ㅏㅏ자자

이제 그동안 했던 food 예제들을 버려야 햌ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

겁나 아까운데 아까워하면 안돼 ..

 

이제 state에 대해 배워야 하는데 food 예제는 state를 위해 동작하지 않기 때문이야..

 

왜냐면 이 데이터들은 내가 작성했어

 

state는 보통 동적 데이터와 함께 작업할 때 만들어져!

변하는 데이터, 존재하지 않는 데이터!

그리고 생겨나고 사라지고 또는 변경되고, 하나인 데이터가 두개가 되고 0이 되는 종류의 것들

이게 바로 dynamic data야!

 

그리고 이런 props는 우리를 돕지 않아!!

우리가 필요한건 state야 !!!

아아ㅏㅏㄲ!!!!!!!!!!!!!!!!!!!!!!!

 

자 슬프지만 다 지우자 ....

 

그리고 우리는 function component를 class component로 변경할거야

'function app'은 함수를 수행하지? 그래서 이러한 것들을 function component라고 불러

 

이름을 바꾸고 이걸 class component라고 부르자

 

class component는 어떻게 생겼으려나..

 

짠!

다 지우고 class component를 새로 추가한 모습

매번 component를 만들 때마다 모든것을 다 구현한다?

NOOOPE !!

이것이 우리가 extend from한 이유!

 

예를 들자면, 내가 비디오 게임 개발을 한다면,

나는 핸드폰을 프로그래밍하지.

삼성을 프로그래밍하지 않고 아이폰을 프로그래밍 하지 않아.

핸드폰을 이미 많은 특성들을 갖고 있지, 스크린이라던지 카메라라던지 충전기라던지?

그러니 나는 카메라, 스크린, 충전기를 cell phone class에 넣은 다음

cell phone class에서 확장한 삼성 class를 갖게 돼

 

결론은, 삼성 class는 cell phone class로부터 모든것을 가져오게 된다는 말!!

 

기본적으로 react class component에서 가져오고, 우리는 확장하고 있어.

그리고 이제 우리의 App component는 react component야!

매우 간단하지!

 

하지만 react component는 어떻게 동작할까?

 

class react component는 return을 가지고 있지 않아

이유는? function이 아니기 때문!

 

보다시피 render method를 가지고 있고, 나의 App component안에 있어

왜냐하면 내가 react component에서 확장했기 때문에

react component는 render method를 갖고 있지만, 내가 extend from을 했기 때문에

나도 이제 redner method가 있어!!

 

class component와 function component의 차이점!!

function component는 function이기 때문에 뭔가 return해 그리고 screen에 표시되지,

class component는 class야

하지만 react component로 부터 확장되고 screen에 표시되지!

우리는 그걸 render method 안에 넣어야 하는거고! 알겠쥐?

 

react는 자동적으로 모든 class component의 render method를 실행하고자 해

 

자 다시 반복해보자고!!

react는 자동적으로 나의 class component의 render method를 실행해! 자동으로!

그리고 그것이 우리가 위에 있는 코드로

결과를 얻을 수 있는 이유야!

 

뭔 소린지 모르겠다..

그래 그럼 왜 function component를 안쓰고 class component를 써?

그 답은 class component가 가진 state 때문이야!

state는 object야

state는 object고 component의 data를 넣을 공간이 있고 이 데이터는 변해

이게 우리가 class component와 state를 사용해야 하는 이유야

 

음.. counter를 만들어보자고!

방금 말한 것 처럼 바꿀 data를 state 안에 넣어야 해

그리고 state를 redner에 넣고 싶으면 이렇게 하면 돼

 

ㅋㅋㅋㅋㅋㅋ 농담이야 이건 작동하지 않아...

미안미안! 혹여나 이렇게 생각했을까봐 ^^;

 

이건 class이기 때문에 우리는 this.state.count라고 해야 해

이게 진짜얌ㅎ헤허ㅔ헣

앞에 text도 약간 수정해주고!

이렇게 되면 결과는 뚜뚠!

멋져부러잉~

그리고 앞서 말한 것 처럼 state에 바꾸고 싶은 data를 넣는거야!

 

여기서 문제는 App에서 data를 어떻게 바꿀 것인가야

이렇게 바꿔보자

보다시피, JSX는 변경되지 않았고 HTML도 정상이야

차이점이 있다면 state가 class component안에 있다는 점이지

따라서 우리는 this.state를 할 필요가 있어!

 

쉽지쉽지?

 

우리는 지금 컴포넌트의 data를 바꾸기 원해서 이 작업을 하고 있는걸 상기시켜!

 

다시!

react.js는 JS야, 우리는 JS를 쓸 수 있어!

 

이제 할 일은 2개의 function을 작성하는거야

이건 react코드가 아니라 JS코드야!

 

class 내부에 function 2개를 넣었어!

그리고 호출을 해야지?

button에는 onClick이라는 prop이 기본적으로 있어

이것은 react magic이야! 이것 하나만!

 

JS에서는 다른 onClick이나 eventListener를 등록해야 했지?

react는 자동적으로 주어진 onClick을 갖고 있어!

 

이제 누군가가 button을 클릭 할 때, 우리는 this.add를 실행할거야

여기서 질문이 있지

<button onClick={this.add}>에서 함수니까 this.add()는 안돼요?

응 안돼 돌아가 ^^

 

왜냐하면 우리가 click 했을 때만 function이 호출 되기를 원하기 때문이야!

만약 this.add()를 추가한다면 즉시 실행 되기 때문이야~

 

궁금하면 해봐~

 

이제 add와 minus를 누르고 콘솔창을 가보면 ? ㅗㅜㅑ~

 

이제 state를 업데이트 할 수 있을까?

 

그건 또 다음에서 해보자고 ^^ 힘들다 힘들어 아직 갈길이 멀어 포기하지마~~

 

 

출처: nomadcoders.co/