-
React 업데이트 : 클래스 형태 React 복습 - React Component 이용 '좋아요 버튼 동작' : Class 이용, JSX 이용컴퓨터 알아가기/React 2022. 11. 17. 19:30728x90반응형
자바스크립트를 공부하기 전 무작정 React를 공부한 적이 있습니다. 블로그에도 34개의 글도 연재하였구요. 그러다 기초가 없다보니 어느순간 막히더라구요. 그 이후 시간을 내서 자바스크립트를 먼저 조금이라도 알고 가자 생각을 해서 순서를 바꾸었구요.
다시 제로초 TV 강의를 통해 React에 대해 알고자 합니다.
1. React란
사실 React에 대해 여기에 정의하는 것은 부정확하고 무의미하다고 봅니다. 다음 링크를 통해 정확하게 뜻과 내용들을 보면서 공부하는게 맞다고 보여지고요. 저는 리액트론 된 웹게임에 관심이 있기때문에 그 진도만 별도로 나가고자 합니다.
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (reactjs.org)
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.reactjs.org
간단히 말해 React는 자바스크립트 라이브러리입니다. 다른말로 HTML, CSS, JavaScript언어로 이루어진 라이브러리입니다.
강좌를 통해 복습과 새로운 학습을 해 나가면서 기존에 썼던 블로그도 같이 참조하니 이해가 조금은 더 가능해지네요.
2. React 구조 (클래스 사용시)
기본적으로 React는 데이터 영역과 화면에 반영되는 영역을 나타내는 Component 와 실질적으로 화면에 나타내는 Rendering으로 나뉘어 집니다. 이는 HTML id에 반영된 <div>태그에 Rendering이 되고 보통 id는 root로 많이 사용합니다.
기본 틀은 다음과 같다고 보면 됩니다. 1번 정의에서 말씀드린대로 React는 HTML구문이 기본입니다.
상기 클래스 구문으로 이루어진 React 구문을 설명하자면
① HTML
이 영역에는 ReactDOM에서 그려지는 화면을 반영하는 곳입니다.
② React 주소
React의 다양한 라이브러리를 이용할 수 있는 주소로 연결을 시켜줘야 합니다. 주소를 보면 알겠지만 react.development.js라고 되어 있는 주소는 개발용으로 사용하는 것이며 만들어진 React 결과물을 공유하거나 배포할 경우 밑에 주석처리 되어진 production으로 바꾸어줘야 합니다.
③ 클래스형 기본 구문
Component 영역으로 클래스를 사용할 경우의 React 구조는 생성자인 constructor(props)와 초기화에 사용되는 super(props) 그리고 실행하는 state로 되어 있습니다. 여기까지가 데이터를 담당하고 화면에 표시되는 함수 등은 render( ) 영역에서 담당하는데 setState로 데이터 영역의 state와 연동됩니다 .
④ ReactDOM.render( )
마지막으로 HTML에 그려지는 명령함수 영역입니다.
3. 클래스 이용 버튼클릭 React (예제)
예제를 보면서 React를 보도록 하겠습니다.
브라우저에 좋아요 버튼을 만들고 버튼을 클릭하면 좋아요 글이 나오게 React로 만들어 보겠습니다. 상기 기본 클래스형으로 대입을 하면 다음과 같이 나옵니다.
상기 그림에서 어떻게 반영이 되는지 콘솔에서 보도록 하겠습니다. 위에서 설명한 ReactDOM이전 script태그를 Component라고 불렀습니다. 이는 크롬 브라우저에서 확장을 해야 확인할 수 있습니다.
크롬확장 관련 내용은 아래 링크를 참조하세요. 이 곳에서는 최초 React Component 개념도 같이 정리해 놓았습니다.
React 기본 : React Component에 대한 개념 (HTML속성과의 관계 및 State)과 Chrome React 확장
본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성하고 있습니다. 지난시간 연습했던 React 구조로 만든 '좋아요'버튼을 보도록 하겠습니다. 다시 코드를 보면 다음과 같습니다. 버튼을 나타내
happygunja.tistory.com
콘솔을 보면 좋아요 버튼과 콘솔 Component 항목에서 보면 누르기 전에는 기본 false로 되어 있지만 클릭하면 화면과 콘솔이 변하는 것을 볼 수 있습니다.
관련코드 전체는 다음을 참조하세요.
<html> <head> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!--<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>--> <!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>--> <script> 'use strict'; const a = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = {liked: false}; } render() { if (this.state.liked) { return '여기가 좋겠네~'; } return a('button', {onClick: () => this.setState({liked: true})}, '좋아요'); } } </script> <script> ReactDOM.render(a(LikeButton), document.querySelector('#root')); </script> </body> </html>4. JSX를 이용한 React
상기 3번은 React 형식을 따르고 있지만 굳이 표현하면 자바스크립트 class 문법이라고 보면 됩니다. React에서는 HTML 문법을 태그 문법으로 사용할 수 있는데요. 이는 가독성을 위해 별도로 만들어진 문법입니다. 이를 JSX문법이라고 합니다.
JSX문법은 XML과 JavaScript를 합쳤다고 볼 수 있습니다. 상기 코드를 다음과 같이 사용할 수 있습니다.
JSX를 사용하면 React.createElement라는 메소드도 생략할 수 있습니다.
전체코드에서 수정되는 항목은 다음 네모친 곳입니다.
① JSX를 사용하기 위해 외부 Babel 라이브러리를 인용
② React.createElement 대신 JSX 태그 문법 사용
③ 사용되는 script 태그에 Babel type사용
JSX문법을 통하여 다음과 같이 변경이 가능합니다.
브라우저를 보면 다음과 같이 잘 돌아는 가는데 경고창이 뜹니다.
상기와 같은 경고창은 React 버전을 18버전으로 해서 나온 경고입니다. React 17까지는 경고창이 뜨지 않는데요. 마지막 ReactDOM에서 내용을 다음과 같이 바꾸어줘야 React18 버전을 사용할 수 있습니다.
상기 return에 사용될 JSX 문법의 주의할 점은 다음과 같습니다.
① Component의 문자는 대문자로 시작 : LikeButton 처럼
② return 내용의 태그는 소문자 : <button> 처럼
③ 하나만 사용하는 태그는 닫는 태크로 : <LikeButton /> 처럼
④ JavaScript 코드 부분은 중괄호로 : onClick = {() => this.setState({liked: true})} 처럼
⑤ if문을 사용할 수 없기에 삼항연산자로 사용
⑥ 형제 태그는 나란히 쓸 수 없으므로 전체를 <div>태그 또는 Fragment < >태그로 감싸준다.
좀 더 자세한 내용은 과거 React 관련 내용 정리를 링크합니다.
2021.06.29 - [컴퓨터 알아가기/React] - React 기본 : React State 개념, JSX문법, Babel
React 기본 : React State 개념, JSX문법, Babel
본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성하고 있습니다. 지난 시간 '좋아요'버튼의 코딩과 브라우저는 다음과 같았습니다. 상기 브라우저의 State는 클릭을 하면 True로 바뀌는 반응을
happygunja.tistory.com
마지막으로 화면에 보여지는 render에서 버튼을 중복으로 만들고 싶으면 <div>태그내 다음과 같이 반영하면 됩니다.
브라우저는 다음과 같이 나타나겠죠.
향후 배우는 React의 기본이 될 예정입니다.
전체코드는 다음과 같습니다.
<html> <head> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!--<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>--> <!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>--> <!-- cdn library --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> 'use strict'; class LikeButton extends React.Component { constructor(props) { super(props); this.state = {liked: false}; } render() { if (this.state.liked) { return '여기가 좋겠네~'; } return ( <button onClick = {() => this.setState({liked: true})}> 좋아요 </button> ); // return a('button', {onClick: () => this.setState({liked: true})}, '좋아요'); } } </script> <script type="text/babel"> // ReactDOM.render(<LikeButton />, document.querySelector('#root')); // React 18 버전 ReactDOM.createRoot(document.querySelector('#root')).render( <div> <LikeButton /> <LikeButton /> <LikeButton /> </div> ); </script> </body> </html>반응형'컴퓨터 알아가기 > React' 카테고리의 다른 글
[React 기초] React 기본 포맷 (0) 2023.12.12 React 업데이트 : 함수 컴포넌트 구조 (2) 2022.11.23 React 기본 : 끝말잇기 Hooks 로 전환 후 에러 수정 - Uncaught TypeError : value is not a function (2) (0) 2021.09.14 React 기본 : 끝말잇기 Hooks로 전환 후 에러 수정 - EADDRINUSE, Address already in use (0) 2021.09.09 React 기본 : 끝말잇기 Hooks로 전환 후 에러 수정 - Uncaught TypeError : value is not a function (0) 2021.09.07