#1 기초 / HTML에서 리액트 사용

sham·2021년 8월 21일

React

[제로초] 웹게임을 만들며 배우는 React

목록 보기

1/10

인프런에 올라간 제로초님의 강의를 보고 정리한 내용입니다.
https://www.inflearn.com/course/web-game-react

#1-1

리액트는 js파일.

npm 패키지를 사용하지 않고도 html 파일에 전부 집어넣을 수도 있다.

개인적으로는 npm이 더 편하고 직관적인 듯.

#1-2 ~ 3 컴포넌트, 상태(state)

compoment, state

<html>
  <head>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <!-- react가 동작하는 핵심적인 코드가 존재 -->
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    <!-- react코드를 웹에다가 붙여주는 역할 -->
  </head>
  <body>
    <div id="root"></div>
    <script>
      const e = React.createElement; // HTML 태그를 만들어주는 함수
 
      class LikeButton extends React.Component {
        //
        constructor(props) {
          // Component가 처음 실행될 때 가장 먼저 실행되는 부분
          super(props);
		  this.state = {
			  liked : false
		  };
        }
		handleClick(){
			alert("clicked!");
		}
        render() {
          // 해당 클래스가 화면에 어떻게 표시할지 결정하는 method
          return e("button",
		  { onClick : () => {this.setState({liked: true})}, type:'submit'},
		  this.state.liked === true ? `Liked` : "Like"
		  ); 
		  // <buttonclicked!")}" type="submit">Like</button> 태그 생성
        }
      }
	  
    </script>
    <script>
      // 웹에다가 실제로 렌더링 해주는 역할, LikeButton을 root 태그에 붙임 
	  ReactDOM.render(e(LikeButton), document.querySelector("#root"));
    </script>
  </body>
</html>

클래스 함수에서는 render 함수에서 객체를 생성한다.

표기법에는 여러 가지가 존재한다.

return <button onClick={this.handleClick}>Click Me</button>;
return <button onClick={() => this.handleClick()}>Click Me</button>;

state(상태)가 존재한다.

state : 바뀌는 부분, 바뀔 여지가 있는 부분

클릭만으로 화면이 변한다, 이건 놀라운 일!

React.createElement

문자열이나 컴포넌트, props 객체, 그리고 자식 컴포넌트들을 인수로 전달받아 리액트 요소를 리턴한다.

리액트 요소는 리액트를 이용해 렌더링하고자 하는 뭔가를 표현하는 경량의 요소이다.

React.createElement( String/ReactClass type, [object props], [children...] )

type 매개 변수 : 생성할 HTML 요소의 태그 이름을 문자열로 전달하거나 리액트 클래스를 전달하면 된다.
props: 속성(properties) 의 줄임말. HTML 요소에 지정될 특성을 지정하거나 컴포넌트 클래스 인스턴스에 사용할 속성들을 지정한다.
children : 컴포넌트를 조합 할 수 있다. 매개변수에 React.createElement 함수를 중첩 호출할 수 있다.

HTML 속성을 자바스크립트로 표현할 때는 camel case(onClick)을 사용한다.

#1-4 jsx, babel

jsx, babel

<html>
  <head>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <!-- react가 동작하는 핵심적인 코드가 존재 -->
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js">
	</script>
    <!-- react코드를 웹에다가 붙여주는 역할 -->
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const e = React.createElement; // HTML 태그를 만들어주는 함수
 
      class LikeButton extends React.Component {
        //
        constructor(props) {
          // Component가 처음 실행될 때 가장 먼저 실행되는 부분
          super(props);
		  this.state = {
			  liked : false
		  };
        }
		handleClick(){
			alert("clicked!");
		}
        render() {
			return (<button type="submit" 
			onClick={() => {this.setState({liked : true})}}>
			{this.state.liked === true ? 'Liked' : 'Like'}
			</button>);
		}
      }
	  
    </script>
    <script type="text/babel">
      // 웹에다가 실제로 렌더링 해주는 역할, LikeButton을 root 태그에 붙임 
	  ReactDOM.render(<div><LikeButton /><LikeButton /><LikeButton /></div>, document.querySelector("#root"));
    </script>
  </body>
</html>

중괄호를 감쌈으로써 자바스크립트를 쓸 수 있다.

붕어빵틀처럼 컴포넌트를 찍어 낼 수 있다.

jsx

자바스크립트의 확장판 개념, html + 자바스크립트가 가능하다.

사용하기 위해서는 babel이라는 컴파일러를 사용해야 한다.

head에서 스크립트를 가져오고 또 script에서 type="text/babel" 도 주어야 한다.

#1-5 구구단 예제

state(구구단)

<html>
  <head>
	  <meta charset="utf-8" />
	  <title>구구단</title>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <!-- react가 동작하는 핵심적인 코드가 존재 -->
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js">
	</script>
    <!-- react코드를 웹에다가 붙여주는 역할 -->
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const e = React.createElement; // HTML 태그를 만들어주는 함수
 
      class GuGuDan extends React.Component {
		  constructor(props) {
			  super(props)
			  this.state = {
				num1 : Math.ceil(Math.random() * 9),
				num2 : Math.ceil(Math.random() * 9),
				value : '',
				result : ''
				//Math.ceil() : 양수는 올림, 음수는 내림
				// Math.random() : 0부터 1 중의 난수

			  }
		  }
		   onSubmit = (e) =>{
			e.preventDefault();

			   const answer = this.state.num1 * this.state.num2;
			   if (parseInt(this.state.value) === answer) {
				   //parseInt : 자료를 int형으로 변환
				   this.setState({
					num1 : Math.ceil(Math.random() * 9),
				num2 : Math.ceil(Math.random() * 9),
				value : '',
				result : '정답!'
				   })
				}
				else {
					this.setState({
						value : '',
				result : '오답...'
					})
				}

			   }

		
		  
		   onChange = (e) => {
				this.setState({value: e.target.value});
		   };
		  render() {
			  return (
				  <div>
					<h1>{this.state.num1} 곱하기 {this.state.num2} 은?</h1>
					<form onSubmit={this.onSubmit}>
						<input type="number" value={this.state.value} onChange={this.onChange}/>
						<button>submit</button>
						</form>
						<h3>{this.state.result}</h3>
					</div>
			  )
		  }
	  }
	  
	  function Test() {
		  return <h1>test</h1>
	  }
    </script>
    <script type="text/babel">
      // 웹에다가 실제로 렌더링 해주는 역할, LikeButton을 root 태그에 붙임 
	  ReactDOM.render(<GuGuDan/>, document.querySelector("#root"));
    </script>
  </body>
</html>

바뀌는 것들은 state로

html 태그인 onClick, onChange를 클래스 내부의 메소드를 호출하게끔

페이지가 새로 고침하는 것을 막기 위해서 e.preventDefault();

여기서의 e는 React.createElement가 아니라 해당 이벤트를 가리킨다. 즉 onSubmit을 호출한 form 태그 자체와 onChange를 호출한 input 태그를 각각 가리키는 것.

정답일 시 값 초기화, 문제 초기화와 정답 출력, 오답일 시 오답만 출력

# 1-8 Fragment

Fragment

render() 에서 리턴할 때 하나의 div 태그로 감싸주어야 한다.

babel이 지원한다는 전제하에 <></> 빈 태그로 감싸도 된다.

클래스의 메소드에서 화살표 함수가 아닌 function을 사용하면 this가 가리키는 값이 달라진다.

<html>
  <head>
	  <meta charset="utf-8" />
	  <title>구구단</title>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <!-- react가 동작하는 핵심적인 코드가 존재 -->
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js">
	</script>
    <!-- react코드를 웹에다가 붙여주는 역할 -->
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const e = React.createElement; // HTML 태그를 만들어주는 함수
 
      class GuGuDan extends React.Component {
		  constructor(props) {
			  super(props)
			  this.state = {
				num1 : Math.ceil(Math.random() * 9),
				num2 : Math.ceil(Math.random() * 9),
				value : '',
				result : '',
				win : 0,
				//Math.ceil() : 양수는 올림, 음수는 내림
				// Math.random() : 0부터 1 중의 난수

			  }
		  }

		   onSubmit = (e) =>{
			e.preventDefault();

			   const answer = this.state.num1 * this.state.num2;
			   const cur_win = this.state.win;
			   if (parseInt(this.state.value) === answer) {
				   //parseInt : 자료를 int형으로 변환

				   this.setState((prevState) => {
					   return {
					num1 : Math.ceil(Math.random() * 9),
				num2 : Math.ceil(Math.random() * 9),
				value : '',
				result : `${prevState.value} 정답!`,
				win : cur_win + 1

					   }
				   				   })
				}
				else {
					this.setState({
						value : '',
				result : `오답...`,
				win : 0
					})
				}

			   }

		
		  
		   onChange = (e) => {
			   console.log(e);
				this.setState({value: e.target.value});
		   };
		  render() {
			  return (
				  <>
					<h1>{this.state.num1} 곱하기 {this.state.num2} 은?</h1>
					<form onSubmit={this.onSubmit}>
						<input type="number" value={this.state.value} onChange={this.onChange}/>
						<button>submit</button>
						</form>
						<h3>{this.state.result}</h3>
						<h4>{this.state.win} 연속 정답!</h4>
					</>
			  )
		  }
	  }
	  
	  function Test() {
		  return <h1>test</h1>
	  }
    </script>
    <script type="text/babel">
      // 웹에다가 실제로 렌더링 해주는 역할, LikeButton을 root 태그에 붙임 
	  ReactDOM.render(<GuGuDan/> , document.querySelector("#root"));
    </script>
  </body>
</html>

this.state의 값을 변경해야 할 때는 this.setState(e) ⇒ {} 를 써서 값을 리턴시키기.

setState가 비동기적으로 처리되기 때문에 콜백?해주어야 함.

sham

씨앗 개발자

다음 포스트