SPA/React

[React] 게임으로 배우는 리액트 - 숫자야구

NumberBaseball.jsx import React, { Component, createRef } from 'react'; import Try from './Try'; // 숫자 네 개를 겹치지 않고 랜덤하게 뽑는 함수 function getNumbers() { const candidate = [1,2,3,4,5,6,7,8,9]; const array = []; for (let i = 0; i < 4; i += 1) { const chosen = candidate.splice(Math.floor(Math.random() * (9 - i)), 1)[0]; array.push(chosen); } return array; } class NumberBaseball extends Component { sta..

[React] 게임으로 배우는 리액트 - JSX에서 주석

JSX에서의 주석은 JS에서와는 다르게 //를 사용하면 에러가 발생하며 /**/를 사용해야합니다. 자바로 치자면 한줄주석 말고 여러줄 주석을 사용해야합니다. 단! {} 중괄호로 한번더 감싸주어야합니다. {/* 주석처리할 내용 */} 의 형태가 되겠습니다!

[React] 게임으로 배우는 리액트 - 컴포넌트 분리와 props

앞선 포스팅에서의 코드를 살짝 수정했습니다. 코드를 좀더 깔끔하게 보고 가독성을 위해 배열을 위에 따로 빼두었고 태그를 다른 파일로 뺴두었습니다. ​ 해당 코드처럼 따로 분리를 해두었고 NumberBaseball.jsx에서는 import Try를 해주었습니다. 이렇게 분리를 하는것을 컴포넌트 분리라고 합니다. 코드가 너무 길어진다 싶을때 이런식으로 분리를 해두면 유지보수도 조금 더 수월하겠죠? ​ Try.jsx 파일에서 v와 i는 선언되어있지 않아서 사실 사용할수 없습니다. 하지만 NumberBaseball.jsx파일에서 가 아닌 를 사용함으로서 Try.jsx파일에서도 사용할수 있도록 만들어 줍니다. 이러한 것을 Props라고 합니다. HTML에서는 Attribute라고 하는데 리액트에서는 Props라고..

[React] 게임으로 배우는 리액트 - 반복문 (map, key)

render(){ return ( {this.state.result} 시도 : {this.state.tries.length} {['딸기','당근','수박','참외','메론'].map((v) => { return ( {v} ); })} ) } 빨간색 영역부분에 배열이 있습니다. 이런 배열을 반복하여 출력하는 문법이 map이라고 볼수 있습니다. 태그에 저 배열들을 담아야 하는데 map((v) => {}) map에 v를 담아서 {v}로 출력하게 됩니다. 이렇게 출력이 됩니다! 원래 이러한 방식으로 출력을 시키기 위해서는 딸기 당근 수박 참외 메론 이러한 방식으로 써야하지만 코드가 복잡해지면 매우 불편하겠죠?? ​ ​ 딸기 - 빨강 당근 - 주황 수박 - 초록 참외 - 노랑 메론 - 연두 그런데 이렇게 만들려면..

[React] 게임으로 배우는 리액트 - import와 require 비교

import는 리액트에 딱히 필요는 없지만 지금 많은 소스코드들이 require보다 import로 많이 작성되어있습니다. 우선 import와 require 모두 외부 파일이나 라이브러리를 불러올 때 사용하는 모듈 키워드입니다. ​ require부터 알아보자면 require는 노드의 모듈 시스템입니다. ​ const React = require('react'); const WordRelay = () => { return ( ) } module.exports = WordRelay; 이런 형태의 jsx파일이 있다고 했을때 WordRelay라는 이름으로 모듈화를 해놓았기 떄문에 다른 파일에서 이 파일을 불러 올때 const WordRelay = require('./WordRealy'); 이와 같은 방식으로 불러..

[React] 게임으로 배우는 리액트 - Webpack(웹팩)

웹팩을 쓰는이유? 개발을 실제로 할때 HTML파일 하나만 있어도 자바스크립트를 쓸수 있지만 실제 실무에서는 컴포넌트가 하나가 아니다. 컴포넌트가 20개라고 치면 하나의 HTML파일에 엄청나게 긴 코드가 있을것이고 코드의 유지보수가 매우 힘들어질 것입니다. 페이스북으로 예를 들면 페이스북의 컴포넌트는 20000개가 넘는다고합니다(지금은 바뀌었을수도 있습니다) ​ index에서 보면 문제가 script에서 js파일을 하나만 끌어올수 있다는 것입니다. 웹팩을 이용해 js파일들을 하나로 묶어주기 위함이라고 했었죠?? ​ ​ ​ ​ webpack.config.js const path = require('path'); // 노드에서 경로를 쉽게 가져오도록 도와주는 것 module.exports = { name: '..

[React] 게임으로 배우는 리액트 - Hooks

Hooks는 class와는 다르게 const로 함수를 선언합니다. 이러한 방식이 없었던 것은 아니고 class에서는 setState를 사용했지만 setState를 사용하지 않을경우 이와 같은 방법을 사용합니다. 하지만 함수방식을 좋아하는 사람들이 함수방식 안에서도 setState를 사용할수 있도록 만들어 달라고 요구했으며 함수 형태에서도 state와 ref를 사용할수 있게 되었습니다. 이것이 React Hooks입니다. ​ class와 hooks는 취향차이이긴 하지만 리액트에서는 hooks를 권장하고 있습니다. 하지만 현재 작성되어있는 대부분의 코드는 class방식으로 작성이 되어있기 때문에 class방식으로 리액트 문법을 작성하는 것도 알고 있어야합니다. ​ 앞선 포스팅의 구구단 코드를 class에서 ..

[React] 게임으로 배우는 리액트 - ref로 초점맞추기

어떤 행동을 수행한뒤 포커스를 해당 input 태그에 맞추고 싶다면 ref를 사용하면됩니다. input; render(){ return ( {this.state.first}곱하기{this.state.second}는? {this.input = c;}} type="number" value={this.state.value} onChange={this.onChange}/> 입력! {this.state.result} ); } 해당 랜더 부분에서 input 태그 바로 뒤에 ref라는 속성이 있습니다. ref={(c) => {this.input = c;}} ref속성안에 함수를 하나 넣어주었는데요. (c)의 c는 아무거나 넣어줘도 되는 일종의 변수같은것입니다. {this.input = c;}는 해당 input이 c가..

[React] 게임으로 배우는 리액트 - Fragment, setState

render(){ return ( {this.state.first}곱하기{this.state.second}는? 입력! {this.state.result} ); } 앞선 포스팅의 구구단 게임 만들기에서 render부분입니다. 해당 코드에서 필요없는 div로 감싸져 있습니다. 이 div가 없으면 에러가 발생하는데요. 과거에는 리액트의 단점이라고 할수 있겠습니다. 해당 div가 있으면 css를 적용할때도 번거롭고 불편할수 있는데요. 이 부분이 보완되었습니다. ​ div 대신 React.Fragment를 작성해주면 됩니다. 불필요한 div영역은 사라지도 에러도 발생하지 않습니다. ​ ​ onSubmit = (e) => { e.preventDefault(); if(parseInt(this.state.value) ..

[React] 게임으로 배우는 리액트 - 구구단게임 만들기

리액트문법을 이용해서 간단한 구구단 게임을 만들려고 합니다! ​ 우선 코드와 실행결과인데요 간단한 코드 설명을 조금 해볼까요?? this.state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', result: '', }; 우선 class안에 this.state는 변화되는것을 의미합니다. 구구단 게임을 만들것이기 때문에 1부터 9까지의 랜덤 숫자를 2개 만들기 위해 first와 second라는 이름으로 숫자를 만들었습니다. ​ onSubmit = (e) => { e.preventDefault(); if(parseInt(this.state.value) === this.state.first * t..