this.setState
-
[React 기초] React 간단 예제 - 버튼 클릭하기 : Class형 Component컴퓨터 알아가기/React 2023. 12. 20. 19:30
지난 시간 버튼 클릭이벤트에 대한 자바스크립트 부분을 복습한 내용에 대해 React에서는 어떻게 표현되는지 확인해 보도록 하겠습니다. React의 기본내역은 제로초 TV의 React강좌를 보고 공부하고 있습니다. ▒ Class형 Component 구조 우선 Class Component의 기본구조를 다시 복습해 봅니다. 참고로 Component는 데이터영역과 화면영역을 같이 묶어놓은 것을 말합니다. 상기 구조에 버튼을 누르면 '환영합니다.'라는 메시지가 출력될 수 있도록 만들어 봅니다. Component명은 Welcome으로 사용하면 기본형은 다음과 같습니다. 마지막 Component를 받는 DOM에도 적용해 줍니다. 이제 기본틀은 완성했으니 코드를 고민해 보도록 하죠. 1. 데이타 영역 데이터 영역은 지..
-
React 기본 : React Component에 대한 개념 (HTML속성과의 관계 및 State)과 Chrome React 확장컴퓨터 알아가기/React 2021. 6. 28. 19:30
본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성하고 있습니다. 지난시간 연습했던 React 구조로 만든 '좋아요'버튼을 보도록 하겠습니다. 다시 코드를 보면 다음과 같습니다. 버튼을 나타내는 프로그램은 상기 박스내에서 이루어집니다. HTML 코드로 예를 들면 다음과 같이 씁니다. Like 내용은 버튼을 클릭하면 콘솔에서는 clicked로 횟수가 기록이 되고 형태는 서버에 재출한다라는 내용입니다. 이 부분은 위 "null"부분에 { }로 JavaScript언어로 된 JSX 문법을 사용해야 합니다. HTML과의 차이점은 onclick이 onClick으로 camelCase를 사용했고 "="대신 ":"를 사용했네요. 브라우저에서 "좋아요"버튼을 클릭하면 개발자도구(F12) console창에서..
-
React 기초 : Props (함수형 Component), State (클래스형 Component)컴퓨터 알아가기/React 2021. 6. 10. 19:30
지난 시간에 함수형 Component를 공부하면서 속성인 Props 에 대해 알아봤습니다. Props는 기본적으로 이름이나 사진 또는 타이틀과 내용같이 고정되어진 데이터를 처리하는데 사용하고 있습니다. 이번에 같이 볼 State는 말그대로 상태를 나타내는 것으로 변경될 수 있는 데이터를 처리할 때 사용합니다. State가 변경되면 render( ) 함수가 다시 실행된다는 이야기입니다. 그래서 State를 사용하게 된다면 클래스형 Component를 사용하게 된다는 점도 머리속에 저장하고 진행해 보는 걸로 하겠습니다. (참고로 Props는 함수형 Component입니다. ) 무슨뜻인지는 Codepen을 통하여 예제를 보면서 이해를 하는 것으로 해 보겠습니다. ▒ Props 개념을 이용한 시간 나타내기 2번..