React_component
-
[React 기초] React Component 구성 - Class형 Component와 함수 Component컴퓨터 알아가기/React 2023. 12. 13. 19:30
React를 구성하고 작동하게 하는 영역이 있습니다. 그 영역을 콤포넌트(Componenrt)라고 하는데 오늘은 간단하게 Component를 이해해 보도록 합니다. 본 내역은 제로초 TV의 React 무료 웹게임을 기본으로 좀 더 자신의 것으로 만들어 보고자 정리한 것입니다. 1. Component 구성방법 구성방법을 알아 보기전에 거의 모든 산업군에 쓰이는 용어가 영어로 되어있음을 인지해야 합니다. 만국 공통어이기도 하지만 해외에서 활발하게 활동과 개발이 이루어지면서 공통언어인 영어로 대부분 사용이 되어 상호간 커뮤니케이션이 문제가 없게 되는 현상입니다. 영어라는 학문은 어떠한 경우에도 다방면으로 도움이 되니 반드시 적응하도록 노력할 필요가 있습니다. 각설하고, Component는 '요소, 항목'이라는..
-
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 기본 : React Component에 대한 개념 (React 기본구조)컴퓨터 알아가기/React 2021. 6. 24. 19:30
지난시간까지 React 기본에 대해 무조건 따라헤보다가 Material UI 를 이용하여 테이블 구성에서 에러에 빠졌습니다. 좀 더 기본을 공부해야할 필요성을 느꼈습니다. 여기저기 무료강좌를 찾아보다가 일부 무료강좌를 하고계신 'ZeroCho TV'를 통해 좀 더 기본 개념을 잡아보도록 하겠습니다. 특히, 저처럼 React와 관련되어 아무 개념이 없는 사람에게는 또 한번 놀랄일이 지금껏 React 환경을 만들기 위해 create-react-app을 사용하였는데 처음부터 HTML을 이용하여 React 구성을 마치는 과정이었습니다. ▒ React 기본 구조 React는 프로그래밍 언어라기 보다는 React 홈페이지에 나와 있는 대로 '사용자 인터페이스를 만들기 위한 JavaScript 라이브러리'인게 조금 ..