코딩파인애플

리액트[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