React_State
-
React 기본 : 구구단 프로그램을 통한 React State와 Class Method 개념 이해컴퓨터 알아가기/React 2021. 6. 30. 19:30
본 써머리는 ZeroCho TV의 React 강의를 기본으로 작성하고 있습니다. React를 배워보고자 하지만 워낙 잘 알지도 못하기때문에 코딩 하나하나 좀 더 파악하고 가는게 목적입니다. 구구단 프로그램을 통해서 코딩 한줄한줄이 어떤 의미인지 알고자 하는게 더 큰 목적이라고 볼 수 있습니다. React에서 State란 변할수 있는 여지가 있는 것이라고 했습니다. 하나의 Form에 구구단의 답을 입력해서 정답과 오답을 나타낸다고 가정할 때 정답과 오답은 변할 수 있는 상태이므로 State라고 할 수 있겠습니다. 기본적인 태그를 나타내 보겠습니다. ① 구구단 클래스 Component를 정의하고 ② 이 내용을 화면에 그리겠다 라는 기본 틀은 다음과 같습니다. ③ this.state를 통해 바뀌는 부분을 정의..
-
React 기본 : React State 개념, JSX문법, Babel컴퓨터 알아가기/React 2021. 6. 29. 19:30
본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성하고 있습니다. 지난 시간 '좋아요'버튼의 코딩과 브라우저는 다음과 같았습니다. 상기 브라우저의 State는 클릭을 하면 True로 바뀌는 반응을 개발자도구(F12)를 통해 확인할 수 있었습니다. 그렇다면 화면에 클릭을 하면 Like 에서 Liked로 바뀌는 작업을 하도록 하겠습니다. 이렇게 변경이 되는 것을 State로 보면 됩니다. 화면에 직접 그려진다는 것은 Render( ) 함수내에서 이루어진다고 말씀 드렸습니다 . return a("Button", {onClick }, "Like") 이렇게 3구역으로 나뉘어진 곳에 마지막 3번째 "Like"에 다음과 같이 코딩을 합니다. 상기 코딩은 클릭을해서 현재상태가 liked가 참이면 화면에..