TRY REACT! FIRST React.app 😎

▶︎ Go to Project

페이지 소개

리액트의 기본 기능을 연습하고 state 개념을 다잡기 위한 1page 단위변환기 웹앱

• Reset 버튼
• Invert 버튼

기술 스택

• CSS / REACT(JS, JSX) / netlify

구현 기능

기능1: Reset 버튼

• 버튼 클릭 시 스테이트를 0으로 변환

기능2: Invert 버튼

• 버튼 클릭 시 입력 가능한 인풋 박스 전환 (활성화/비활성화 및 인풋에 따른 변환 데이터 변화)

기능3: 셀렉트 박스를 활용한 호출 함수 전환

• html과 유사한 형태의 JSX를 활용하여 셀렉트 박스를 구현하고,
  각 옵션별로 호출되는 함수를 달리하여 선택값에 따른 단위변환기가 노출되도록 구현했습니다.

배운점 & 아쉬운점

배운점👍

• html 파일에는
  만 존재하는데, js 파일에서 html 소스를 대체하여 입력하는
  JSX 를 처음으로 활용해본 리액트 작업물로, 낯설지만 프레임워크 맛보기 프로젝트로 적절한 볼륨이었습니다.
• 셀렉트 박스, 단위변환, 인풋박스 활성화 전환 등 여러가지 기능을 구현하기 위해 state 개념을 반복적으로 사용함으로써
  React.useState 함수를 사용하는 방식을 익히고, state 개념을 확실하게 이해하는데 도움이 되었습니다.

아쉬운점👀

• 아직 개념을 다잡는 단계로, 직접 기획한 프로젝트가 아닌 강의를 보며 따라하는 방식으로 진행한 미니 실습 프로젝트라,
  약간의 아쉬움이 남기는 하지만, 추가적인 css 추가작업을 통해 전체 코드를 반복적으로 확인하고, 개인 작업물로 가져갈 수 있도록 가공하였습니다.