React 기본 : React State 개념, JSX문법, Babel

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

 

 

지난 시간 '좋아요'버튼의 코딩과 브라우저는 다음과 같았습니다. 

 

 

 

상기 브라우저의 State는 클릭을 하면 True로 바뀌는 반응을 개발자도구(F12)를 통해 확인할 수 있었습니다. 그렇다면 화면에 클릭을 하면 Like 에서 Liked로 바뀌는 작업을 하도록 하겠습니다. 이렇게 변경이 되는 것을 State로 보면 됩니다. 

 

화면에 직접 그려진다는 것은 Render(  ) 함수내에서 이루어진다고 말씀 드렸습니다 .

 

return a("Button", {onClick       }, "Like") 이렇게 3구역으로 나뉘어진 곳에 마지막 3번째 "Like"에 다음과 같이 코딩을 합니다. 

 

 

 

상기 코딩은 클릭을해서 현재상태가 liked가 참이면 화면에 "Liked"로 표시하라는 뜻입니다. 브라우저에서 보겠습니다. 

클릭을 하면 상태(State)가 바뀌고 상태(State)에 따라서 화면이 자동으로 바뀝니다 .

 

클릭전 화면

 

클릭후 상태(State)가 바뀐 회면

 

 

요점은 class Component인 LikeButton을 만들기 위해 constructor(props)안에 상태(this.state)를 정의하고 render(  ) 함수에서 정의만 하면 화면이 자동으로 바뀌는 React State의 강력한 기능이라고 합니다. 

 

한가지 더 이해하고 가야되는 상황은 class LikeButton 부터 render(  ) 함수 전체까지 Component라고 보면 됩니다. 

 

그런데 return a (         ); 의 내용이 보는 사람에 따라서는 복잡하게 느껴질 수 있다고 합니다. 그래서 React에서는 HTML 태그인 <button>태그로도 다음과 같이 나타낼 수 있다고 합니다. 

 

HTML 태그 자체를 사용하기 때문에 const a = React.createElement; 항목은 필요 없습니다. 이 항목은 HTML로 나타내는 명령어이기 때문입니다. 

 

 

 

 

훨씬 더 간편하게 나타낼 수 있습니다. 그리고 ReactDOM.render에서도 태그 형식으로 다음과 같이 바꾸어 줍니다. 

 

 

 

이 내용을 보니 create-reac-app을 이용하여 React의 기본구조를 공부할 때 형태가 나오는 것 같습니다. 

 

그런데 브라우저를 보니 '좋아요' 버튼이 없어졌습니다. 원인을 파악해 보니 기본적으로 JavaScript 언어안에 HTML 언어를 같이 쓸 수가 없다고 합니다. 이런 경우를 해결하기 위해 최초 Codepen에서 공부한 바와 같이 현재 index.html 파일을 Babel로 만들어 주어야 합니다. 그리고 script안에 type도 Babel을 선언해야 합니다. 

 

React와 ReactDom을 CDN 주소로 가져온 것과 같이 Babel도 가져오도록 하고 Babel 선언을 해 보겠습니다.  

 

▶ Babel CDN 찾기

 

언제나 모르는 것은 Google에 문의합니다. 

 

 

 

Script Tags에서 필요한 데이터를 복사하고 index.html로 붙혀넣기합니다. 

 

 

 

 

 

마찬가지로 ReactDOM.render의 <script>태그도 같이 적용해 줍니다. 

 

화면에 상태(State)를 변하게 만들기 위해서 다음과 같이 코딩합니다. 강의에서는 return 다음에 바로 <button>태그를 사용했는데 return(  ) 즉, 괄호안에 넣어야 에러가 안나네요...

 

전체 코딩은 다음과 같습니다.

 

 

 

상기코딩처럼 중괄호 {    }를 이용한 HTML 태그 문법을 이용한 문법을 JSX 문법이라고 합니다. 사실 더 정확히 말하면 JSX는 JavaScript와 XML 문법이라고 하네요. 아직까지는 잘 모르기때문에 편리하게 JavaScript 언어안에 HTML 문법을 이용한 문법을 JSX라고 우선 이해하는게 좋을 듯 합니다. 

 

브라우저를 보면

 

 

잘 반영이 되어 있습니다. 즉 'Like' 버튼 하나가 곧 Component입니다. 

 

Component의 장점은 편리성과 간편성 그리고 재활용성입니다. 만일 버튼을 4개 만들고 싶다고 하면 다음과 같이 하면 됩니다. 

 

 

 

브라우저에는 다음과 같이 버튼이 생기겠죠.

 

 

만일 Like를 한글로 바꾸고 싶으면 화면 content를 나타내는 곳만 수정하면 브라우저 화면은 전체가 일률로 적용됩니다. 

 

 

브라우저는 다음과 같습니다. 

 

 

이제 React에서 Component의 개념을 조금이나마 잡을 수 있을 것 같습니다. 참고로 현재 강의는 ZeroCho TV님의 React 무료강좌를 기본으로 하고 있습니다.