[React] ReactJS로 영화 웹 서비스 만들기_(3)

강의 내용 요약
#3.4 ~ #3.9

 

○ 대충 소제목

   ※ ReactJS : 어플리케이션이 아주 interactive하도록 만들어주는 library

 

   1. state 변경하는 방법

const onClick = () => {
    setCounter(counter + 1)
    setCounter((current) => current + 1);
}

• 직접 값 설정하기
• 함수를 전달하기

  ⇒ 두 방법 모두 현재의 state를 가지고 새로운 값을 계산하지만
      함수로 전달하는 방법이 더 안전하다.

  ⇒ React가 current가 확실히 현재값이라는걸 보장하고 있기 때문

  ⇒ 예상치 못한 업데이트가 어디선가 일어나도 그게 혼동을 주는걸 방지해줌.

 

 

    2. state 적용해보기( Converter )

<div>
    <div>
        <label htmlFor="minutes">Minutes</label>
        <input
            value={inverted ? amount * 60 : amount}
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={onChange}
            disabled={inverted} />
    </div>
    <div>
        <label htmlFor="hours">Hours</label>
        <input
            value={!inverted ? Math.round(amount / 60) : amount}
            id="hours"
            placeholder="Hours"
            type="number"
            onChange={onChange}
            disabled={!inverted} />
    </div>
    <button onClick={reset}>Reset</button>
    <button onClick={onFlip}>{inverted ? "Turn back" : "Invert"}</button>
</div>

• state 만들기
• input의 value를 state로 연결하기
• onChange()함수 만들기
  → state 업데이트

 *** vanillaJS :: <label for="minutes" />    ⇒    ReactJS :: <label htmlFor="minutes" />

---

코드 챌린지
시간, 길이 Converter 만들기

https://nsj9164.github.io/react-for-beginners-challenge1/

---

 

첫 챌린지 성공적으로 마쳤다.

기능적으로는 어려움이 없었지만 디자인적으로는 고민도 많이 되어떻게할까 한참을 고민했다.