자판기 이벤트 구현 순서 정하기

1. Input 컴포넌트 (재사용 컴포넌트들의 state 관리)

   1. Input컴포넌트를 만들어 여러번 사용
   2. 각 컴포넌트들의 state관리 필요

   
   // 자식 컴포넌트
   <Input name='A' value=inputA_Value></Input>
   <Input name='B' value=inputB_Value></Input>
   const [inputA_Value,setinputA_Value] = useState(0);
   const [inputB_Value,setinputB_Value] = useState(0);
   
   //Input 컴포넌트
   const Input = () => {
   	const onChangeEv= (e) => {
   	    switch (props.name) {
   	      case 'A':
   	        props.setinputA_Value(() => e.target.value);
   	        break;
   	      case 'B':
   	        props.setinputB_Value(() => e.target.value);
   	        break;
   	      default:
   	    }
   	  };
   
   	return<Input onChange={onChangeEv}>{inputValue}</Input>
   }
   
   부모가 같은 컴포넌트들은 부모를 공유함 
   => 컴포넌트가 나눠져도 별개의 컴포넌트가 아님
   => 여러곳에서 사용해도 부모에서 선언한 state는 사용된 컴포넌트에 따로 파생되지 않음
   
   해결방법
   => 부모컴포넌트가 아닌 외부 컴포넌트에 각자 state 선언
   => 부모컴포넌트에서 이벤트 설정 시 컴포넌트들마다 porps.name을 지정하여 구분한다
   => switch문을 이용해 사용한다
   
   

2. 코인변환

   1. onClick이벤트 주의
      1. calmelCase 적용 잘하기 (onClick O, onclick X)
   2. useReducer 사용
      1. 사용이유: 사용된 button 컴포넌트가 여러 곳에서 사용되고 많은 이벤트 역할을 해야 하기 때문에