[개발스터디] week4: React Quiz

2021-07-06 Week 4

✔ 스터디 내용

React Quiz 1
React Quiz 2

1. React Quiz

1.1 Quiz 1

Q. plus, minus button

다음 기본 코드로 해당 사이트처럼 만들기

❗ 조건
- 작성된 기본 코드를 삭제하지 않고 오로지 코드를 추가하여 완성해야 한다.

/* eslint-disable react/prefer-stateless-function */
/* eslint-disable object-curly-newline */
/* eslint-disable arrow-body-style */
import React from 'react';

const buttonStyle = {
  fontSize: '40px',
  width: '60px',
  height: '60px',
  backgroundColor: 'black',
  color: 'white',
  borderRadius: '12px',
};

const resultStyle = {
  fontSize: '20px',
  margin: '0px 32px',
};

const pageStyle = {
  width: '100vw',
  height: '100vh',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
};

const PlusButton = () => {
  return <button type="button" style={buttonStyle}>+</button>;
};

const MinusButton = () => {
  return <button type="button" style={buttonStyle}>-</button>;
};

const Result = () => {
  return (
    <div style={resultStyle}>0</div>
  );
};

class Page extends React.Component {
  render() {
    return (
      <div style={pageStyle}>
        <MinusButton />
        <Result />
        <PlusButton />
      </div>
    );
  }
}

export default Page;

Sol

/* eslint-disable react/prefer-stateless-function */
/* eslint-disable object-curly-newline */
/* eslint-disable arrow-body-style */
import React from 'react';

const buttonStyle = {
  fontSize: '40px',
  width: '60px',
  height: '60px',
  backgroundColor: 'black',
  color: 'white',
  borderRadius: '12px',
};

const resultStyle = {
  fontSize: '20px',
  margin: '0px 32px',
};

const pageStyle = {
  width: '100vw',
  height: '100vh',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
};

const PlusButton = (props) => {
  return <button type="button" style={buttonStyle} onClick={() => props.onClick(1)}>+</button>;
};

const MinusButton = (props) => {
  return <button type="button" style={buttonStyle} onClick={() => props.onClick(-1)}>-</button>;
};

const Result = (props) => {
  return (
    <div style={resultStyle}>{props.number}</div>
  );
};

class Page extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 0
        };
    }

    handleClick = (i) => {
        this.setState({
            number: this.state.number + i
        });
    }

    render() {
        return (
        <div style={pageStyle}>
            <MinusButton onClick={this.handleClick}/>
            <Result number={this.state.number}/>
            <PlusButton onClick={this.handleClick} />
        </div>
        );
    }
}

export default Page;

result

1.2 Quiz 2

Q. 가위 바위 보

다음 코드로 가위 바위 보 게임 웹 만들기

❗ 조건
- 작성된 기본 코드를 삭제하지 않고 오로지 코드를 추가하여 완성해야 한다.
- 컴퓨터가 내는 값은 랜덤이다.
- 사용자가 '가위','바위','보' 중 하나를 누르자마자 컴퓨터가 내는 값이 결정되고, 승리여부가 결정된다.

import React from 'react';

const pageStyle = {
  width: '100vw',
  height: '100vh',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'space-between',
};

const selectorWrapperStyle = {
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'space-around',
}

const selectorStyle = {
  width: '128px',
  height: '128px',
  borderRadius: '64px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  border: '1px solid #000',
}

const row = {
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
}

const column = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
}

const labelStyle = {
  fontSize: '24px',
  fontWeight: 'bold',
  marginBottom: '16px',
}

const print = () => {
  const output = Math.round((Math.random() * 10) + 1) % 3;
  if (output === 0) return '가위';
  else if (output === 1) return '바위';
  else return '보';
}

const ComputerSection = () => {
  return (
    <div style={row}>
      <div style={selectorStyle}>가위</div>
    </div>
  )
}

const ResultSection = () => {
  return (
    <div>
      컴퓨터 승
    </div>
  )
}

const UserSection = () => {
  return (
    <div>
      <Selector />
    </div>
  )
}

const Selector = () => {
  return (
    <div style={column}>
      <div style={labelStyle}>선택하세요</div>
      <div style={selectorWrapperStyle}>
        <div style={selectorStyle}>가위</div>
        <div style={selectorStyle}>바위</div>
        <div style={selectorStyle}>보</div>
      </div>
    </div>

  )
}

class Home extends React.Component {
  render() {
    return (
      <div style={pageStyle}>
        <ComputerSection />
        <ResultSection />
        <UserSection />
      </div>
    )
  }
}

export default Home;

Sol

import React from 'react';

const pageStyle = {
  width: '100vw',
  height: '100vh',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'space-between',
};

const selectorWrapperStyle = {
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'space-around',
}

const selectorStyle = {
  width: '128px',
  height: '128px',
  borderRadius: '64px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  border: '1px solid #000',
}

const row = {
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
}

const column = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
}

const labelStyle = {
  fontSize: '24px',
  fontWeight: 'bold',
  marginBottom: '16px',
}

const print = () => {
  const output = Math.round((Math.random() * 10) + 1) % 3;
  if (output === 0) return '가위';
  else if (output === 1) return '바위';
  else return '보';
}

const ComputerSection = (props) => {
  return (
    <div style={row}>
      <div style={selectorStyle}>{props.computer}</div>
    </div>
  )
}

const ResultSection = (props) => {
  return (
    <div>
      {props.result}
    </div>
  )
}

const UserSection = (props) => {
  return (
    <div>
      <Selector onClick={props.onClick}/>
    </div>
  )
}

const Selector = (props) => {
  return (
    <div style={column}>
      <div style={labelStyle}>선택하세요</div>
      <div style={selectorWrapperStyle}>
        <div style={selectorStyle} onClick={() => props.onClick('가위')}>가위</div>
        <div style={selectorStyle} onClick={() => props.onClick('바위')}>바위</div>
        <div style={selectorStyle} onClick={() => props.onClick('보')}>보</div>
      </div>
    </div>
  )
}

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            result: null,
            computer: null
        }
    }

    handleClick = (i) => {
        const comp = print();

        let result;
        const win = '컴퓨터 패';
        const lose = '컴퓨터 승';
        const draw = '비김';

        console.log('comp: ', comp, ', user: ', i);
        if (i === '가위') {
            if (comp === '가위') {
                result = draw;
            } else if (comp === '바위') {
                result = lose;
            } else {
                result = win;
            }
        } else if (i === '바위') {
            if (comp === '가위') {
                result = win;
            } else if(comp === '바위') {
                result = draw;
            } else {
                result = lose;
            }
        } else { //보
            if(comp === '가위'){
                result = lose;
            } else if(comp === '바위') {
                result = win;
            } else {
                result = draw;
            }
        }
        this.setState({
            result: result,
            computer: comp
        })
    } 

    render() {
        return (
        <div style={pageStyle}>
            <ComputerSection computer={this.state.computer}/>
            <ResultSection result={this.state.result}/>
            <UserSection user={this.state.user} onClick={this.handleClick}/>
        </div>
        )
    }
}

export default Home;

result

2. HomeWork

2.1 immutable

https://immutable-js.com/ 해당 웹 페이지 글을 읽고 공부하기

2.2 My Posts 웹 만들기

problem.1
메모를 삭제하면 아래에 놓인 메모에 closePost 효과가 적용된다. 그래서 둘 다 사라지는 것처럼 보인다.

(+) 배열, 객체 데이터 유실 방지 [...data] {...data}

const base = {
   a: 1,
   b:3,
};
// cas 1
const prev = {
   a: 1,
   b:3,
   c: 2,
};
// cas 2
const prev = {
   ...base,
   c: 2,
}

목적은 base에 담긴 데이터를 prev에 복사하는 것이다.

case1처럼 변수에 값을 그냥 넣어서 지정하는 경우에는 데이터가 유실될 수도 있다. 왜냐하면 값을 복사하여 'base' 에 넣는 것이 아니라, 메모리의 주소값을 가져오는 것이기 때문이다.

따라서 case2처럼 . . . 을 사용하여 작성해야 한다. 이렇게 작성하면 base에 담긴 데이터가 복사되어 prev에 따로 저장된다.

이러한 방식은 배열과 객체에 사용될 수 있고, case2처럼 값을 덧붙일 수도 있다. 아예 똑같은 데이터로 복사하고 싶다면 다음과 같이 작성한다.

const prev = [...base] // base가 배열인 경우
const prev = {...base} // base가 객체인 경우

저작자표시

'Education' 카테고리의 다른 글

[엑셀보다 쉬운 SQL] week2: Group by, Order by (0)	2022.03.22
[엑셀보다 쉬운 SQL] week1: Select, Where (0)	2022.03.21
[개발스터디] week3: Next.js로 서버 만들기 / React.js (0)	2021.06.30
[웹개발종합반] 강의을 마치며 (0)	2021.06.27
[개발스터디] week2: Skeleton Loading / DynamoDB / node-fetch (0)	2021.06.23

타닥타닥

[개발스터디] week4: React Quiz

1. React Quiz

1.1 Quiz 1

Q. plus, minus button

Sol

result

1.2 Quiz 2

Q. 가위 바위 보

Sol

result

2. HomeWork

2.1 immutable

2.2 My Posts 웹 만들기

(+) 배열, 객체 데이터 유실 방지 [...data] {...data}

'Education' 카테고리의 다른 글

티스토리툴바

[개발스터디] week4: React Quiz

1. React Quiz

1.1 Quiz 1

Q. plus, minus button

Sol

result

1.2 Quiz 2

Q. 가위 바위 보

Sol

result

2. HomeWork

2.1 immutable

2.2 My Posts 웹 만들기

(+) 배열, 객체 데이터 유실 방지 [...data] {...data}

'Education' 카테고리의 다른 글

'Education' Related Articles

티스토리툴바

[개발스터디] week4: React Quiz