FRAGMENT
-
[React 기초] React 간단 예제 - 구구단 게임 : React Hooks컴퓨터 알아가기/React 2023. 12. 25. 19:30
구구단 게임은 임의의 랜덤한 두개의 숫자가 화면에 보이면 답을 입력하여 정답 또는 오답을 나타내는 간단한 웹게임입니다. 지난 시간 자바스크립트로 구성을 복습 하였기에 이제 본 목적인 React로 만들어 보도록 합니다. 본 내역은 제로초 TV의 리액트 강좌를 기본으로 하고 있숩니다. ▒ React Hooks 구구단 게임 처음으로 React Hooks라는 말을 사용하는데 사실 함수Component로 되어 있는 React를 React Hooks라고 칭합니다. 1. React Hooks의 기본 구조 이전 시간 Class Component와 함수 Component의 기본구조를 보았습니다. 거기서 차용을 해오면 아래와 같은 기본틀을 기억해야 합니다. 2. React 특성 우리가 만들고자 하는 결과물은 지난시간 자바..
-
React 기본 : 함수형 setState, < >태그, Fragment, 함수형 Ref컴퓨터 알아가기/React 2021. 7. 1. 19:30
본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성되고 있습니다. 지난시간 아래와 같이 구구단 형식을 React를 통해 만들어 보았습니다. 여기서 만일 15인 정답을 입력하면 정답: 15로 나오는 것을 숙제로 받았었는데 코딩에서 다음과 같이 써주면 됩니다. 그럼 브라우저상에는 다음과 같이 나옵니다. ▒ setState함수 : prevState 상기 코딩을 보면 this.state.value는 예전값을 나타내고 나머지는 프로그램상 이루어지는 미래값이 같이 혼용이 되어 쓰이고 있습니다. 구구단 정도에서는 상관이 없는데 프로그램이 무거워지고 복잡해지면 예전값을 return받을 수 있는 로직으로 만들어 주는게 좋다고 합니다. 즉, 다음과 같이 코딩을 해줍니다. 중요포인트는 this.setStat..