[ReactJS] React로 영화 서비스 만들기 : 3.2. Input과 State

작성: 2022.03.26

업데이트: 2022.03.26

JSX과 input

JSX에서는 input과 label의 for을 사용하면 안된다. 왜?

for은 이미 JavaScript에서 사용하고 있는 예약어이다.
html 문법으로 작성하면 문제가 될 수 있다.
html 문법이 아닌 JSX 문법으로 작성해야 한다.

기존 HTML

<h1 class="hi">Super Converter</h1>
<label for="minutes">Minutes</label>
<input id="minutes" placeholder="Miniutes" type="number" />
<label for="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />

JSX 문법

<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input id="minutes" placeholder="Miniutes" type="number" />
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />

input과 state

input이 있는데 왜 state를 써야하는거죠?

React JS 입장에서 이 input은 uncontrolled 요소
input의 value를 통제할 수 없다는 말
state를 이용해 value를 control하자!

function App() {
  const [minutes, setMinutes] = React.useState();
  const onChange = () => {
    console.log("wrote");
  };
  return (
    <div>
      <h1 className="hi">Super Converter</h1>
      <label htmlFor="minutes">Minutes</label>
      <input
        value={minutes}
        id="minutes"
        placeholder="Miniutes"
        type="number"
        onChange={onChange}
      />
      <label htmlFor="hours">Hours</label>
      <input id="hours" placeholder="Hours" type="number" />
    </div>
  );
}

onChange 함수에 의해 minutes의 value가 바뀔 때마다 함수가 호출, console에 wrote 출력

SyntheticBaseEvent

onChange 함수를 다음과 같이 바꿔보자.

const onChange = (event) => {
  console.log(event);
};

event 매개변수를 이용해 event에 대한 정보를 받아와 console에 출력한다.
위와 같이 바꾸고 console을 다시 보면 아래와 같은 모습을 볼 수 있다.

뭐죠 이건?

합성 이벤트(SyntheticEvent)이다.
ReactJS는 event를 최적화하는 과정을 거치기 때문에 가짜 이벤트를 발생
이 내부의 nativeEvent가 우리가 알던 event정보
이 nativeEvent 내부의 target의 value가 input 내부의 값

Then How?

아래와 같이 작성하면 input 내부의 값을 console에 출력할 수 있다.

const onChange = (event) => {
  console.log(event.target.value);
};

setState와 input value

저는 event 내부 input의 value를 화면에 띄우고 싶어요.

setState 함수를 이용해 event 정보로부터 state를 정의해 render해보자.

const onChange = (event) => {
  setMinutes(event.target.value);
};

그러면 setMinutes의 state인 minutes에 event.target.value 값 지정 후 render

input value는 이미 차있으므로, input value로부터 값을 받아 minutes에 저장한 후 render할 다른 컴포넌트를 만들어 확인
아래는 “You want to convert ???”로 render하는 방식

<label htmlFor="minutes">Minutes</label>
<input value={minutes} id="minutes" placeholder="Miniutes" type="number" onChange={onChange}/>
<h4>You want to convert {minutes}</h4>

state를 이용해 이 input은 controlled 요소가 되었다.

분 -> 시 변환에 적용해보자.

<div>
  <label htmlFor="minutes">Minutes</label>
  <input value={minutes} id="minutes" placeholder="Miniutes" type="number" onChange={onChange}/>
</div>

<div>
  <label htmlFor="hours">Hours</label>
  <input value={minutes/60} id="hours" placeholder="Hours" type="number" disabled />
</div>

변수 값을 적절히 나누어 이와 같이 작성하였다.
hours 부분은 disabled 속성을 두어 입력하지 못하도록 하였다.

Hours 부분

저는 분에서 시 변환 뿐만 아니라 반대로 시에서 분 변환도 하고 싶은데요?

disabled props와 Flip 버튼을 이용해 활성화-비활성화를 변경해보자.

const [flipped, setFlipped] = React.useState(false);
const onFlip = () => setFlipped((current) => !current);
return (
  <div>
    <h1 className="hi">Super Converter</h1>
    <div>
      <label htmlFor="minutes">Minutes</label>
      <input
        value={minutes}
        id="minutes"
        placeholder="Miniutes"
        type="number"
        onChange={onChange}
        disabled={!flipped}
      />
    </div>

    <div>
      <label htmlFor="hours">Hours</label>
      <input
        value={minutes / 60}
        id="hours"
        placeholder="Hours"
        type="number"
        disabled={flipped}
      />
    </div>
    <button onClick={reset}>Reset</button>
    <button onClick={onFlip}>Filp</button>
  </div>
);

disabled 속성은 bool 형식을 이용해 그 자체를 활성화/비활성화가 가능
onFlip 함수를 이용해 flipped state를 true/false를 교환
이 상태에 대한 조건문을 disabled에 적용하거나 boolean형 변수를 적용해 default disabled 상태 정의
flipped가 최초 false에서 true가 되면 disabled 적용도 반대 상태

조건문과 삼항연산자

활성화/비활성화가 아니라 시 부분에서 값을 바꾸고 싶다니까요?

hours의 value에 값을 입력하면 minutes도 *60 되어서 적용되어야 한다.
filpped 상태에 따라 이를 적용하는 건 어떨까?
삼항연산자를 활용해서 flipped 상태에 따라 공식 적용을 달리 해보자.

문법

조건 ? true일 때 : false일 때

// input#hours의 value prop

// 적용 전
value ={Math.round(amount / 60)}

// 적용 후
value={flipped ? amount : Math.round(amount / 60)}

단위 변환의 혼동이 있을 수 있어 minutes와 setMinutes 부분을 amount와 setAmount로 변경
flipped가 true라면 amount, false라면 Math.round(amount / 60)
flipped가 false : 초기상태(분 -> 시)
flipped가 true : flip상태(시 -> 분)

select와 JSX

시분 변환 말고 다른 변환도 쓸 수는 없나요?

HTML의 select 태그를 이용해서 다른 변환을 선택해보자.

컴포넌트 분리

지금까지 시분 변환을 App 컴포넌트 내에서 작성
이제 App은 전체 컨테이너로 사용하고, 변환 항목마다 컴포넌트화 실시
MinutesToHours 컴포넌트로 분리

function App() {
  return (
    <div>
      <h1>Super Converter</h1>
      <MinutesToHours />
      <KmToMiles />
    </div>
  );
}

App은 단순히 컴포넌트를 담는 컨테이너의 역할
MinutesToHours 컴포넌트에서 h1을 제거하고 다음과 같이 쓰면 이전의 모습과 동일
다른 변환 예시인 KmToMiles 컴포넌트를 만들었다고 가정

select 태그 사용

function App() {
  const [index, setIndex] = React.useState("0");
  const onSelect = (event) => {
    setIndex(event.target.value);
  };
  return (
    <div>
      <h1>Super Converter</h1>
      <select value={index} onChange={onSelect}>
        <option value="0">Minutes & Hours</option>
        <option value="1">Km & Miles</option>
      </select>
      {index === "0" ? <MinutesToHours /> : null}
      {index === "1" ? <KmToMiles /> : null}
    </div>
  );
}

select마다 선택사항인 option을 두어 어떤 컴포넌트 활성화할건지 선택
변화가 생길 때마다(onSelect) value(index)를 받아 setIndex(setState) 함수로 전달해 index(state)에 반영
삼항연산자 조건문을 이용해 컴포넌트 포함할지 말지 결정
JSX 내부에 그냥 글을 쓰면 HTML로 인식, 중괄호({}) 내에 쓰면 JS로 인식

전체 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.17.8/babel.min.js"></script>
  <script type="text/babel">
    function MinutesToHours() {
      const [amount, setAmount] = React.useState();
      const [flipped, setFlipped] = React.useState(false);
      const onChange = (event) => {
        setAmount(event.target.value);
      };
      // minutes의 값을 0으로 초기화
      const reset = () => setAmount(0);

      const onFlip = () => {
        // flip 시 값을 초기화하기 위해 reset() 함수 호출
        reset();
        // 현재 flipped state의 상태와 반대인 bool을 state에 지정
        //const onFlip = () => setFlipped(!flipped);
        // flipped state의 정말 현재 상태를 가져오기 위해 arrow 함수 사용
        setFlipped((current) => !current);
      };

      return (
        <div>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={flipped ? amount * 60 : amount}
              id="minutes"
              placeholder="Miniutes"
              type="number"
              onChange={onChange}
              disabled={flipped}
            />
          </div>

          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={flipped ? amount : Math.round(amount / 60)}
              id="hours"
              placeholder="Hours"
              type="number"
              onChange={onChange}
              disabled={!flipped}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>{flipped ? "Filp Back" : "Flip"}</button>
        </div>
      );
    }
    function KmToMiles() {
      return <h3>KM 2 Miles</h3>;
    }

    function App() {
      const [index, setIndex] = React.useState("0");
      const onSelect = (event) => {
        setIndex(event.target.value);
      };
      return (
        <div>
          <h1>Super Converter</h1>
          <select value={index} onChange={onSelect}>
            <option value="0">Minutes & Hours</option>
            <option value="1">Km & Miles</option>
          </select>
          <hr />
          {index === "0" ? <MinutesToHours /> : null}
          {index === "1" ? <KmToMiles /> : null}
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

Twitter Facebook LinkedIn

Orchemi

[ReactJS] React로 영화 서비스 만들기 : 3.2. Input과 State

JSX과 input

기존 HTML

JSX 문법

input과 state

SyntheticBaseEvent

setState와 input value

Hours 부분

조건문과 삼항연산자

select와 JSX

컴포넌트 분리

select 태그 사용

전체 코드

공유하기

댓글남기기

참고

2024.01.20
[Next.js] 쓸데없이 error.ts로 파일 만들지 마라

2024.01.07
[Git] protocol ‘https’ is not supported 에러

2023.11.02
[TS] 유틸리티 타입(Utility Types)

2023.10.11
[VSCode/ESLint] VSCode tsx 컴포넌트 props 자동완성시 중괄호 생성하기

Orchemi

JSX과 input

기존 HTML

JSX 문법

input과 state

SyntheticBaseEvent

setState와 input value

Hours 부분

조건문과 삼항연산자

select와 JSX

컴포넌트 분리

select 태그 사용

전체 코드

공유하기

댓글남기기

참고

2024.01.20 [Next.js] 쓸데없이 error.ts로 파일 만들지 마라

2024.01.07 [Git] protocol ‘https’ is not supported 에러

2023.11.02 [TS] 유틸리티 타입(Utility Types)

2023.10.11 [VSCode/ESLint] VSCode tsx 컴포넌트 props 자동완성시 중괄호 생성하기

2024.01.20
[Next.js] 쓸데없이 error.ts로 파일 만들지 마라

2024.01.07
[Git] protocol ‘https’ is not supported 에러

2023.11.02
[TS] 유틸리티 타입(Utility Types)

2023.10.11
[VSCode/ESLint] VSCode tsx 컴포넌트 props 자동완성시 중괄호 생성하기