React 기본 : React Component에 대한 개념 (HTML속성과의 관계 및 State)과 Chrome React 확장

본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성하고 있습니다. 

 

 

 

지난시간 연습했던 React 구조로 만든 '좋아요'버튼을 보도록 하겠습니다. 

다시 코드를 보면 다음과 같습니다. 

 

 

 

버튼을 나타내는 프로그램은 상기 박스내에서 이루어집니다. HTML 코드로 예를 들면 다음과 같이 씁니다. 

 

<button onclick ="(  ) => { console.log("clicked") }" type = "submit">Like</button>

 

내용은 버튼을 클릭하면 콘솔에서는 clicked로 횟수가 기록이 되고 형태는 서버에 재출한다라는 내용입니다. 

 

이 부분은 위 "null"부분에 {    }로 JavaScript언어로 된 JSX 문법을 사용해야 합니다. 

 

 

HTML과의 차이점은 onclick이 onClick으로 camelCase를 사용했고 "="대신 ":"를 사용했네요. 

 

브라우저에서 "좋아요"버튼을 클릭하면 개발자도구(F12) console창에서 클릭이 카운트됩니다.

 

 

 

 

▒ React에서 State란 

 

 

상기 예제를 기준으로 React에서 State에 대한 개념을 다시 잡아 보겠습니다. State는 상태라는 뜻이지요. 상기 예제에서 'Like'를 누르면 'Liked'로 바뀌게 만들면 그 부분이 State 상태가 되는겁니다. 즉, 바뀔 여지가 있는 부분이 State입니다. 

 

class Component 안에 State에 해당하는 내용을 적어줍니다. 

 

순서는 this.state {      } 내에 상태기본값을 넣어주고 클릭을 했을때 반응을 하기 위해 this.setState {     }로 코딩합니다. 위치는 console.log(   )에 합니다. 

 

 

개발자도구에서 보겠습니다. console.log를 없앴기때문에 Like를 눌러도 State변화를 알 수 없습니다. 그래서 React확장을 설치하도록 하겠습니다. 

 

React 확장이 없는 브라우저

 

---

 

 

▒ Chrome React 확장 

 

Chrome 브라우저에 React 확장툴을 적용하겠습니다. 

 

구글에서 Chrome React Extension을 검색합니다. 

 

 

 

Chrome에 추가합니다. 

 

 

 

URL 주소에 chrome://extensions로 기입하고 이동하여 세부정보 클릭합니다. 

 

 

파일 URL에 대한 엑세스를 허용합니다. 

 

 

 

상기 React 버튼 코딩의 브라우저에 개발자도구(F12)로 들어가면 Components와 Profiler가 설치되어 있으면 정상적으로 확장설치가 된겁니다. 

 

 

 

---

 

다시 코딩으로 돌아와서 브라우저를 열고 개발자도구(F12)로 들어가서 Components를 클릭하면 Props, State등이 나옵니다. 

 

 

 

왼쪽 Like 버튼을 클릭해 봅니다. 상태가 True로 바뀝니다. 

 

 

 

이렇게 개발자도구(F12)에서 React가 반영되는 것을 확인할 수 있습니다.