useState 로 운세 프로그램 만들기

useState 써먹기 - 2022 남은 운세 알아보기 small project

---

⭐ 구조

input	state	output
태어난 년도	(맨끝숫자) year	first[year]
태어난 달	month	second[month-1]
태어난 일	day	third[day-1]

• first = [ '다음달에', '갑자기', '연말에', ...] : 시간
• second = [ '해변', '병원', '집', '바닷가', ...] : 장소
• third = [ '칭찬받는다', '살이 찐다', '돈을 줍는다', ...] : 사건

➡️ 운세 결과 : 시간 + 장소 + 사건 = first + second + third

⭐ state & functions

states

  const [year, setYear] = useState(-1);
  const [month, setMonth] = useState(0);
  const [day, setDay] = useState(0);
  const [resultShow, setResultShow] = useState(false);

• year, month, day = 운세 문자열의 index 역할을 하는 state
  year는 0부터 시작하기 때문에 초기값 = -1 → useState(-1)

• resultShow = boolean 값으로 결과화면 도출 여부를 전달

functions

changeYear(year)

  const changeYear = (year) => {
    let yearNum = year.slice(3,4);
    setYear(yearNum);
    setResultShow(!resultShow);
  }

• 결과보기 버튼을 누르면 실행되는 function

• 입력받은 태어난년도 year 를 자르고, 자른 숫자 yearNum 을 setYear 로 전달

• resultShow 를 true 로 변경
  
  

restart()

  const restart = () => {
    setYear(-1);
    setMonth(0);
    setDay(0);
    setResultShow(!resultShow);
  }

• 다시하기 버튼을 누르면 실행되는 function

• year, month, day 초기화

• resultShow 를 false 로 변경

⭐ inputBox & resultBox

InputBox component

  <InputBox>
	  <Content>
      	  <Input placeholder="태어난 년도를 입력하세요" type="text" 
                 onChange={(event) => setYear(event.target.value)} />
		  <div>년</div>
	  </Content>
	  <Content>
		  <Input placeholder="태어난 달을 입력하세요" type="number" 
                 onChange={(event) => setMonth(event.target.value)} />
          <div>월</div>
      </Content>
      <Content>
          <Input placeholder="태어난 날을 입력하세요" type="number" 
                 onChange={(event) => setDay(event.target.value)} />
          <div>일</div>
      </Content>
  </InputBox>

• onChange= { input value : 각각의 state ( year, month, day ) 로 전달 }

ResultBox component

  <ResultBox>
	<p>{ words.first[year] }</p>
	<p>{ words.second[month-1] }에서</p>
	<p>{ words.third[day-1] }</p>
  </ResultBox>

• word obj 안의 first[year] second[month-1] third[day-1] 합쳐서 결과 출력
  
  

⭐ 완성 !

⭐ 회고

• 한창 useState 에 대해 공부하고 있을 때, 만들어봤던 토이 프로젝트 !

• 다낭 여행 가기 전 친구집에서 갑자기 호닥닥 만들어버린 ...

• 운세 쳐돌이에게는 아주 재밌는 프로젝트였ㄷㅏ !
  나는 눈깜빡할새에 화장실에서 복권이 당첨된다 라는 ㅋㅋㅋ

• 나중에는 게임 닉네임 생성기 만들어보고 싶다 ! 롤 닉네임 크롤링.. 가능?ㅎ