setState
-
[React 기초] React Component 구성 - Class형 Component와 함수 Component컴퓨터 알아가기/React 2023. 12. 13. 19:30
React를 구성하고 작동하게 하는 영역이 있습니다. 그 영역을 콤포넌트(Componenrt)라고 하는데 오늘은 간단하게 Component를 이해해 보도록 합니다. 본 내역은 제로초 TV의 React 무료 웹게임을 기본으로 좀 더 자신의 것으로 만들어 보고자 정리한 것입니다. 1. Component 구성방법 구성방법을 알아 보기전에 거의 모든 산업군에 쓰이는 용어가 영어로 되어있음을 인지해야 합니다. 만국 공통어이기도 하지만 해외에서 활발하게 활동과 개발이 이루어지면서 공통언어인 영어로 대부분 사용이 되어 상호간 커뮤니케이션이 문제가 없게 되는 현상입니다. 영어라는 학문은 어떠한 경우에도 다방면으로 도움이 되니 반드시 적응하도록 노력할 필요가 있습니다. 각설하고, Component는 '요소, 항목'이라는..
-
React 기본 : 구구단 프로그램을 통한 React State와 Class Method 개념 이해컴퓨터 알아가기/React 2021. 6. 30. 19:30
본 써머리는 ZeroCho TV의 React 강의를 기본으로 작성하고 있습니다. React를 배워보고자 하지만 워낙 잘 알지도 못하기때문에 코딩 하나하나 좀 더 파악하고 가는게 목적입니다. 구구단 프로그램을 통해서 코딩 한줄한줄이 어떤 의미인지 알고자 하는게 더 큰 목적이라고 볼 수 있습니다. React에서 State란 변할수 있는 여지가 있는 것이라고 했습니다. 하나의 Form에 구구단의 답을 입력해서 정답과 오답을 나타낸다고 가정할 때 정답과 오답은 변할 수 있는 상태이므로 State라고 할 수 있겠습니다. 기본적인 태그를 나타내 보겠습니다. ① 구구단 클래스 Component를 정의하고 ② 이 내용을 화면에 그리겠다 라는 기본 틀은 다음과 같습니다. ③ this.state를 통해 바뀌는 부분을 정의..
-
React 기본 : Event Handling(이벤트 처리) - On Off 버튼 만들고 작동하기컴퓨터 알아가기/React 2021. 6. 16. 19:30
이번 시간에는 이벤트처리에 대해 학습을 해볼겁니다. 이벤트처리라는 개념은 쉽게 생각해서 외부에서 데이터를 입력하면 어떤값이 처리가 되는 일련의 행동을 말하는데 대부분의 강좌에서 예로 다루고 있는 버튼클릭시 On -> Off 로 바뀌어지는 간단한 예제를 통해서 이해를 해보도록 할겁니다. 저같은 경우는 '나동빈'님의 강의를 기본으로 공부를 하고 있는데 이해가 되어 반영이 될때까지 몇번이나 시도를 해보고 있답니다. ▒ 고정값 이벤트 처리 버튼을 생성하고 버튼을 클릭할때 마다 콘솔창에 미리 지정한 문장 (고정값)이 나타나는 예제를 해보록 하겠습니다. 순서를 생각해 보면 다음과 같이 할 수 있을 것 같습니다. ① React component를 상속받는 class형 Component를 만든다. ② 초기화를 선언한다..
-
React 기초 : Props (함수형 Component), State (클래스형 Component)컴퓨터 알아가기/React 2021. 6. 10. 19:30
지난 시간에 함수형 Component를 공부하면서 속성인 Props 에 대해 알아봤습니다. Props는 기본적으로 이름이나 사진 또는 타이틀과 내용같이 고정되어진 데이터를 처리하는데 사용하고 있습니다. 이번에 같이 볼 State는 말그대로 상태를 나타내는 것으로 변경될 수 있는 데이터를 처리할 때 사용합니다. State가 변경되면 render( ) 함수가 다시 실행된다는 이야기입니다. 그래서 State를 사용하게 된다면 클래스형 Component를 사용하게 된다는 점도 머리속에 저장하고 진행해 보는 걸로 하겠습니다. (참고로 Props는 함수형 Component입니다. ) 무슨뜻인지는 Codepen을 통하여 예제를 보면서 이해를 하는 것으로 해 보겠습니다. ▒ Props 개념을 이용한 시간 나타내기 2번..