State
-
React 기본 : React Component에 대한 개념 (HTML속성과의 관계 및 State)과 Chrome React 확장컴퓨터 알아가기/React 2021. 6. 28. 19:30
본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성하고 있습니다. 지난시간 연습했던 React 구조로 만든 '좋아요'버튼을 보도록 하겠습니다. 다시 코드를 보면 다음과 같습니다. 버튼을 나타내는 프로그램은 상기 박스내에서 이루어집니다. HTML 코드로 예를 들면 다음과 같이 씁니다. Like 내용은 버튼을 클릭하면 콘솔에서는 clicked로 횟수가 기록이 되고 형태는 서버에 재출한다라는 내용입니다. 이 부분은 위 "null"부분에 { }로 JavaScript언어로 된 JSX 문법을 사용해야 합니다. HTML과의 차이점은 onclick이 onClick으로 camelCase를 사용했고 "="대신 ":"를 사용했네요. 브라우저에서 "좋아요"버튼을 클릭하면 개발자도구(F12) console창에서..
-
React 기본 : Event Handling(이벤트 처리) - On Off 버튼 만들고 작동하기컴퓨터 알아가기/React 2021. 6. 16. 19:30
이번 시간에는 이벤트처리에 대해 학습을 해볼겁니다. 이벤트처리라는 개념은 쉽게 생각해서 외부에서 데이터를 입력하면 어떤값이 처리가 되는 일련의 행동을 말하는데 대부분의 강좌에서 예로 다루고 있는 버튼클릭시 On -> Off 로 바뀌어지는 간단한 예제를 통해서 이해를 해보도록 할겁니다. 저같은 경우는 '나동빈'님의 강의를 기본으로 공부를 하고 있는데 이해가 되어 반영이 될때까지 몇번이나 시도를 해보고 있답니다. ▒ 고정값 이벤트 처리 버튼을 생성하고 버튼을 클릭할때 마다 콘솔창에 미리 지정한 문장 (고정값)이 나타나는 예제를 해보록 하겠습니다. 순서를 생각해 보면 다음과 같이 할 수 있을 것 같습니다. ① React component를 상속받는 class형 Component를 만든다. ② 초기화를 선언한다..
-
React 기초 : Button을 이용한 State 사용방법 이해컴퓨터 알아가기/React 2021. 6. 14. 19:30
Class용 Component인 State는 Props가 내장되어 있다는 점은 지난시간에 이야기 되었습니다. 그래서 생성자인 Constructor(props)와 초기화를 위해 super(props)를 선언하고 this.state라는 명령어를 사용 하였습니다. 그리고 항상 변화된 데이터값을 반영하기 위해 this.setState( ) 함수가 필요하다고 말씀드렸습니다. 많은 React 강의에서 State를 이해하기 위하여 대표적 예제로 다루고 있는 버튼을 활용한 State 사용방법을 정리해 보겠습니다. ▒ goBack( ) 함수 버튼을 누를때마다 30초씩 뒤로 가는 예제를 보도록 하겠습니다. 버튼은 태그를 사용합니다. ▶ 뒤로가기 함수 goBack( ) 함수 처음 시각을 한번 설정(초기화) 시켜놓고 버튼을 ..
-
React 기초 : Props (함수형 Component), State (클래스형 Component)컴퓨터 알아가기/React 2021. 6. 10. 19:30
지난 시간에 함수형 Component를 공부하면서 속성인 Props 에 대해 알아봤습니다. Props는 기본적으로 이름이나 사진 또는 타이틀과 내용같이 고정되어진 데이터를 처리하는데 사용하고 있습니다. 이번에 같이 볼 State는 말그대로 상태를 나타내는 것으로 변경될 수 있는 데이터를 처리할 때 사용합니다. State가 변경되면 render( ) 함수가 다시 실행된다는 이야기입니다. 그래서 State를 사용하게 된다면 클래스형 Component를 사용하게 된다는 점도 머리속에 저장하고 진행해 보는 걸로 하겠습니다. (참고로 Props는 함수형 Component입니다. ) 무슨뜻인지는 Codepen을 통하여 예제를 보면서 이해를 하는 것으로 해 보겠습니다. ▒ Props 개념을 이용한 시간 나타내기 2번..