TypeScript+React+emotion+redux 간단한 사용 예시 🤗

기업협업을 시작하면서 TypeScript,Emotion,Redux를 새로배워서 코딩중이다! 💯💯
원리는 정리했으니 어떻게 코드에 접목했는지 알아보자!

작성 하려는 코드

지금 개발하는 것은 무인 카페 키오스크에서 고객이 휴대폰 번호를 입력 하는 화면이다.

먼저 해당component에서 hooks(useState)로 input 값을 관리하고, input 값의 length가 번호 조건에 해당하면 state에 업데이트 시킴과 동시에 input 값의 state가 바뀌었을 때 useEffect 를 사용하여 redux의 useDispatch를 실행시키면 store값에 phoneNum을 저장하는 코드를 작성했다.🆗

//  번호 입력  창
function ModalMembershipSignIn() {
  const phoneNumState = useSelector((state) => state);
  //store에 접근할 수 있도록 useSelector 에 작성한 값이 들어가도록 설정 해놓고 
  const dispatch = useDispatch();
// 디스패치 함수를 변수화 한다. 
  const [input, setInput] = useState(PLANZ_SIGNIN_NUMBER);
//여기서 대문자 한 내용은 일정 수를 상수화 해놓은 것으로 json 형태로 따로 저장해둔 시작 값이다. 
  //지금의 경우 번호가 항상 010- 로 시작하므로 PLANZ_SIGIN_NUMBER는 010이 상수 화 되었다
  const numClickHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
    //화살표 함수에 parameter에 어떤이벤트가 어디서 일어나는지 typecheck를 해준다. 
    const { length } = input;
    const target = event.target as HTMLInputElement;
    //event.target이 어디서 나는것인지 또한 typecheck해준다. 
    const inputVal = target.innerText;
    length < 11 && setInput(input + inputVal);
  };
//각 버튼에 있는 클릭핸들러 함수로서 input 값이 11보다 작을때 해당 값을 state에 업데이트 시키는 함수이다.
  
  
  useEffect(() => {
    if (input.length === 11) {
      dispatch(initPhoneNum(input));
    }
  }, [input]);
  
  //useEffect state에 업데이트 될때, dispatch하는 함수이고 ,initPhoneNum은 phoneNum을 validate화하는 함수이고 외부에서 import해서 사용하였다. 
  //현재 구조에서는 큰 의미가 없으므로 따로 기입하지 않았다. 


  return (
   중략 
            <div css={signin__right__button__section}>
              <button role="button" onClick={numClickHandler} css={signin__right__button__left}>
                1
              </button>
    
    //여러 버튼 중 숫자 1에 해당하는 버튼이고 role="button"은 jest testing 인식을 위해 기입해 둔 것이고 
    // 각각 emotion 속성을 입력하여 style을 아래와 같이 수정하였다. 
            중략 
  );
}

const signin__right__button__section = css`
  display: flex;
  flex-wrap: wrap;
  width: 310px;
  height: 294px;

  button {
    width: 33.333%;
    flex: 1 0 33.333%;
    height: 25%;
    font-family: Spoqa Hans Sans;
    font-size: 30px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #333333;
    background: none;
    outline: none;
    border: none;
    &:focus {
      outline: none;
    }
  }
  div {
    width: 33.333%;
    flex: 1 0 33.333%;
    height: 25%;
  }
`;
const signin__right__button__left = css`
  text-align: left;
`;

export default ModalMembershipSignIn;