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..
-
React 기본 : 구구단 프로그램을 통한 React State와 Class Method 개념 이해컴퓨터 알아가기/React 2021. 6. 30. 19:30
본 써머리는 ZeroCho TV의 React 강의를 기본으로 작성하고 있습니다. React를 배워보고자 하지만 워낙 잘 알지도 못하기때문에 코딩 하나하나 좀 더 파악하고 가는게 목적입니다. 구구단 프로그램을 통해서 코딩 한줄한줄이 어떤 의미인지 알고자 하는게 더 큰 목적이라고 볼 수 있습니다. React에서 State란 변할수 있는 여지가 있는 것이라고 했습니다. 하나의 Form에 구구단의 답을 입력해서 정답과 오답을 나타낸다고 가정할 때 정답과 오답은 변할 수 있는 상태이므로 State라고 할 수 있겠습니다. 기본적인 태그를 나타내 보겠습니다. ① 구구단 클래스 Component를 정의하고 ② 이 내용을 화면에 그리겠다 라는 기본 틀은 다음과 같습니다. ③ this.state를 통해 바뀌는 부분을 정의..