코딩파인애플

리액트[React]_함수컴포넌트와 useState를 활용한 구구단 프로그램 만들기(feat. Fragment 활용) 오늘은 리액트 함수컴포넌트와 useState를 활용하여 구구단 프로그램을 만들어보고 더욱 깔끔한 클린코딩을 위한 Fragment활용에 대해서도 함께 알아보도록 하겠습니다. 함수 컴포넌트 생성 과정 및 방법 위처럼 함수를 하나 만들고 const를 통해 변수를 만든다. const에 [useState(변수), setuseState(저정할 변수값)] = React.useState(['1', '2', '3', '4', '5',]) if(useState) 를 통해 조건을 만들어 줄 수 있다. 즉, useState일떄 return에 무엇을 표시할지 정한다. 마지막 retrun에는 조건문에도 걸리지 않는..

웹/React 2023. 2. 20. 00:52

class ReactButton extends React.Component { }; function ReactButton() { }; // 대부분 화살표 방식으로 사용 const ReactButton = () => {}; 리액트 구성방식 3가지 리액트에서 사용할 방식중에 클래식방식, 함수 방식, 애로우 방식이 있습니다. 실무 및 현재 가장 많이 사용되는 방법은 애로우 방식으로 3번째 => 를 이용한 방식을 대부분 채택하고 있습니다. 위의 코드가 실행되게 되면 아래의 오류가 발생하는데 현재는 리액트 18버전으로 업데이트 되어 이전 17버전을 사용할 수 없습니다. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot inste..

웹/React 2023. 2. 19. 16:52

DOM(Document Object Model)과 Document.ready와 Window.onload의 차이에 대해서 알아보도록 하겠습니다. DOM(Document Object Model) DOM(Document Object Model) 즉, 돔이라고 일반적으로 말하며 돔(DOM)은 일반적으로 우리가 쉽게 접하는 인터넷 브라우저 안의 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 구조 및 이미지, 색상, 그리고 프로그램의 기본적은 틀의 구조를 구성하게 해주며 자신이 원하는 페이지의 구조와 이미지 등을 꾸며주는 CSS 즉, 스타일을 읽고 조작할 수 있도록 API를 제공하고 있습니다. DOM(Document Object Model) 객체를 이용한 웹페이지 생성 과정 웹 브라우저가..

웹/React 2023. 2. 18. 16:16

jQuery를 통해 내가 원하는 영역을 선택하고 선택한 영역안에 직접 작성한 HTML 구문 삽입하기 자바스크립트 영역에서 제이쿼리를 이용하여 selectDivId의 영역을 지정하고 .html()을 통해 내가 직접 작성한 HTML 구문을 삽입할 수 있다. .html()내부에 $('#choseForm') 이라는 id를 가진 html 구문을 삽입할 수 있으며 해당 영역에 .tmpl 이라는 템플릿을 통해 해당 영역에 객체를 전달하여 객체 내부에 들어있는 변수 값들을 {{= }}을 이용해 표현할 수 있다. 갑자기 의문이 드는 점이 생겨났습니다. 자주 보지 못했던 HTML 태그안에 data-변수명이 있었습니다. jQuery data-변수명 속성을 추가하는 data()함수 HTML5는 DOM 객체에 데이터를 저장해두..

웹/Spring 2023. 2. 17. 13:43

자바스크립트(JAVASCRIPT)로 HTML 코드 삽입하기 일반적으로 매번 document.getElementById()를 이용하요 요소를 선택하고 그 요소에 내가 원하는 HTML을 .innerHTML을 이용하여 입력하게 할 수 있습니다. 저도 위의 방식으로 간편하게 만들고 싶을때 innerHTML 방법을 이용합니다. let button = document.createElement('input'); input.innerHTML = 'text'; document.getElementById('selectTagId').appendChild(input); 다음으로 .appendChild() 방식으로 가장 일반적이고 유용하게 쓸 수 있는 함수입니다. document.createElement(' ')를 이용하여 내..

웹/Spring 2023. 2. 17. 10:50