hooks

js 처음 공부할 때 하던 별찍기랑 사칙연산 리액트 hooks로 해보기
사실 react hooks는 쓸 때마다 헷갈리는데 이 연습문제로 조금 더 이해할 수 있었다. 어려워 ㅠㅠ

1.

1) useState()를 통해 관리되는 rowNum 상태변수를 정수형으로 생성하고 이 값을 <input>태그의 입력값이 변경될 때 갱신하시오.
2) console이라는 이름의 참조변수를 생성하여 이를 결과 출력을 위한 <div>태그에 연결하시오.
3) rowNum값이 변경되었을 때 rowNum만큼의 행을 갖는 별찍기 처리 로직을 구현하시오.

PrintStar.js

import React from 'react';

const PrintStar = () => {
  const [rowNum, setRowNum] = React.useState(0);
  const console = React.useRef();

  React.useEffect(() => {
    let str=""; 
    for (let i=0; i<rowNum; i++) {
      for (let j=0; j<i+1; j++) {
        str += "*";
      }
      str += "<br />";
    }
    console.current.innerHTML = str;
  },[rowNum]);

  const onInputChange = e => {
    setRowNum(e.currentTarget.value);
  };

  return (
    <div>
      <h2>PrintStar</h2>
      <p>useState, useEffect, useRef를 사용한 별찍기 구현</p>
      <label htmlFor="rowNumInput">rownum: </label>
      <input type='number' placeholder='input...' onChange={onInputChange} />
      <hr />
      <div ref={console}></div>
    </div>
  );
};

export default PrintStar;

2.

1) 아래와 같은 구조의 입력 양식을 순차적으로 구성합니다.
input[type='text'][ref=x]
select[ref=exec]
input[type='text'[ref=y]
button[onclick=onButtonClick]
2) 드롭다운은 +,-,*,/를 선택할 수 있습니다.
3) getResultValue()라는 리듀서 함수에 의해 갱신되는 resultValue라는 상태값을 정의합니다.
4) getResultValue()리듀서 함수는 액션값으로 x의 입력값, y의 입력값, exec의 선택항목을 전달받아 exec에 선택된 기호에 따라 적합한 사칙연산을 수행하고 그 결과를 반환합니다.
5) 버튼이 클릭외었을 때 resultValue를 갱신할 수 있는 이벤트 핸들러를 최적화 된 형태로 구현하세요.
6) 별도의 HTML DOM요소를 정의하고 resultValue를 출력합니다.
7) 이 때 resultValue가 짝수이면 #f60으로 처리하고 홀수이면 #06f의 색상값을 저장하는 color상태변수를 만드세요.
8) color 색상값은 resultValue가 이전과 같은 값일 경우 동작하지 않아야 합니다.
9) 도출된 color 값을 결과 출력을 위한 DOM요소에서 style을 통한 글자 색상으로 적용하세요.

Calc.js

import React from 'react';

const Calc = () => {
  const x = React.useRef();
  const y = React.useRef();
  const exec = React.useRef();
  const console = React.useRef();

  function getResultValue(state,action) {
    const X = parseInt(x.current.value);
    const Y = parseInt(y.current.value);
    switch (action) {
      case 'PLUS':
        return X+Y;
      case 'MINUS':
        return X-Y;
      case 'SUM':
        return X*Y;
      case 'DIV':
        return X/Y;
    }
  }

  const [resultValue, setResultValue] = React.useReducer(getResultValue,0);

  React.useMemo(() => {
    if (resultValue % 2 == 0) {
      console.color = 'red';
    } else {
      console.color = 'blue';
    }
  },[resultValue]);

  return (
    <div>
      <h2>Calc</h2>
      <p>useReducer, useMemo, useCallback을 활용한 사칙연산</p>
      <input type='text' ref={x} />
      <select ref={exec}>
        <option value="PLUS">+</option>
        <option value="MINUS">-</option>
        <option value="SUM">*</option>
        <option value="DIV">/</option>
      </select>
      <input type='text' ref={y} />
      <button type='button' onClick={e => {
        setResultValue(exec.current.value);
      }}>결과확인</button>
      <hr />
      <div ref={console}>결과값 : {resultValue}</div>
    </div>
  );
};

export default Calc;

실행화면