[TIL] 20.12.01

🧐 님 오늘 뭐함?

• 리액트 토이 프로젝트 '알바비를 계산해줘' 개발
  -> 그동안 시급, 일일 근무시간, 주당 근무 일수의 입력값을 바꾸는 부분에서 막혔는데 해결함.

parent component

// AlbaCalc.jsx
const handleUpdate = (e) => {
    setField({
      ...field,
      [e.target.name]: e.target.value,
    });
  };

// (code...

<FormInput name='wage' value={field.wage} onChange={handleUpdate} />

여기서 FormInput 컴포넌트에 onChange를 props로 넘겨줬다.

child component

// FormInput.jsx
const FormInput = React.memo(({ value, name, onChange }) => {
  return (
    <>
      <form>
        <div className='labelBox'>
          <label className='labelInfo'>
            <h3>{name}</h3>
            <input
              name={[name]}
              type='text'
              min='1'
              value={value}
              onChange={onChange} // 여기 부분
            />
          </label>
        </div>
      </form>
    </>
  );
});

여기에서 막힌거였는데.. change 관련 다른 함수를 추가할 것도 없었다. 그냥 props로 넘겨 받은 onChange를 가져다 쓰면 되는거였다. 이렇게 황당할 수가. 난 뭘 더 처리해야 한다고 생각했는데..

이제 기본 기능은 완성했으니 추가 기능을 넣어야겠다 😊

✍️ 앞으로의 계획

• 결과값을 백 단위로 잘라서 콤마 찍어주기
• 세금 적용
• 주휴수당 적용
• bootstrap 적용
• 결과값 계산 버튼 클릭하면 이펙트 추가

✨ 느낀점은?

이벤트 발생 처리가 생각보다 어렵다. 그래도 내가 원하는 데로 구현이 되고 있어서 뿌듯하다. 내일은 세금 적용하는 기능을 완성해야지.