React : input and state

<angeLog/>·2024년 2월 18일

REACT

목록 보기

5/25

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

unite converter(단위변환기) 만들기

const root = document.getElementById("root");
const App = () => {
  return (
    <div>
    <h1 class="hi">Super Converter</h1>
    <label for="minutes">Minutes</label>
    <input type="number" placeholder="Minutes" id="minutes"/>
    <label for="hours">Hours</label>
    <input type="number" placeholder="Hours" id="hours"/>
    </div>
  );
};
ReactDOM.render(<App />, root);

이렇게 작성하는 것이 문제 없어 보이겠지만 react에서는 완전히 틀린 방식이다. 하지만 콘솔에서 에러는 보여지지 않는데 react.production.min.js을 사용하기 때문이다.

react.development.js를 사용하게 되면 유효하지 않은 DOM property 'for'과 'class'가 있다는 에러가 출력되는데, 이것이 왜 문제가 되냐면 javascript에서 이미 선점된 용어이기 때문이다.
jsx에서 몇가지 기억해야하는 부분이 있는데, class, for을 사용할 수 없다는 것이다.
그렇다면 jsx에서 class와 for은 어떻게 표현해야할까?

const root = document.getElementById("root");
const App = () => {
  return (
    <div>
      <h1 className="hi">Super Converter</h1>
      <label htmlFor="minutes">Minutes</label>
      <input type="number" placeholder="Minutes" id="minutes" />
      <label htmlFor="hours">Hours</label>
      <input type="number" placeholder="Hours" id="hours" />
    </div>
  );
};
ReactDOM.render(<App />, root);

class는 className으로, for은 htmlFor로 대체해서 작성해야한다.

production 과 development의 차이
production은 배포 모드, development는 개발 모드를 의미한다.
개발모드는 버그로 이어질 수 있는 요소를 미리 경고하는 검증 코드가 포함되어있지만, 번들 크기를 증가시켜 앱 속도를 느리게 할 수 있다.
👉🏻참고 : 개발모드는 어떻게 작동할까?

input의 state 출력하기

jsx이 친숙한 이유는 몇가지 차이를 제외하면 javascript와 거의 같기 때문이다.
이전에 공부했던 react문법과 js와 jsx의 약간의 차이점을 기억하며 input의 state를 onChange이벤트로 setMinutes를 실행하고 전달인자 event를 통해 target의 value를 가져온다.

const App = () => {
  const [minutes, setMinutes] = React.useState();
  const onChange = (event) => {
    setMinutes(event.target.value);
  };
  return (
    <div>
      <h1 className="hi">Super Converter</h1>
      <label htmlFor="minutes">Minutes</label>
      <input
        type="number"
        placeholder="Minutes"
        id="minutes"
        value={minutes}
        onChange={onChange}
        />
      <h4>너는 이걸 쓰고 싶지? {minutes}</h4>
      <label htmlFor="hours">Hours</label>
      <input type="number" placeholder="Hours" id="hours" />
    </div>
  );
};
ReactDOM.render(<App />, root);

그런데 이 코드를 실행하면 작동은 하지만 다음과 같은 에러가 출력된다.
react-dom.development.js:73 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
거두절미하고 본론만 말한다면 초기값이 없기 때문에 생긴 문제라는 뜻이다.

const [minutes, setMinutes] = React.useState(0);

React.useState()에 초기값을 입력하고 실행하면 에러없이 작동하는 것을 확인할 수 있다.

input의 state출력하기 2

minute를 hours로 변경하는 코드를 작성해본다.
간단하다. minute와 동일한 value를 hours에 할당하고, value / 60 을 실행하면 된다.

<div>
  <h1 className="hi">Super Converter</h1>
  <label htmlFor="minutes">Minutes</label>
  <input
    type="number"
    placeholder="Minutes"
    id="minutes"
    value={minutes}
    onChange={onChange}
    />
  <label htmlFor="hours">Hours</label>
  <input
    type="number"
    placeholder="Hours"
    id="hours"
    value={minutes / 60}
    />
</div>

하지만 문제가 발생한다. 작동에는 문제가 없지만 콘솔에 에러가 생긴다.
id=hours가 입력할 수 있는 input인데 value는 minutes에서 받아온 값을 사용하기 때문이다.
이경우는 콘솔에서 준 hint대로 readOnly를 추가로 입력해주면 해결된다.

<input
  type="number"
  placeholder="Hours"
  id="hours"
  value={minutes / 60}
  readOnly
  />

value={minutes / 60}를 사용하면 minutes의 값에 따라 소숫점으로 떨어질 수 있다.
Math.round()를 사용하여 연산결과를 반올림하며 정수로 만들어주면 훨씬 깔끔하다.

state Reset하기

모든것을 초기화하는 버튼을 만들어본다.

const [minutes, setMinutes] = React.useState(0);
const onChange = (event) => {
  setMinutes(event.target.value);
};
const reset = () => {
  setMinutes(0);
};
return (
  <div>
    <h1 className="hi">Super Converter</h1>
    <div>
      <label htmlFor="minutes">Minutes</label>
      <input
        type="number"
        placeholder="Minutes"
        id="minutes"
        value={minutes}
        onChange={onChange}
        />
      <label htmlFor="hours">Hours</label>
      <input
        type="number"
        placeholder="Hours"
        id="hours"
        value={Math.round(minutes / 60)}
        readOnly
        />
      <button onClick={reset}>초기화</button>
    </div>
  </div>
);

reset이라는 함수를 담고있는 btn을 클릭하면 setMinutes(0)가 실행되고, 초기값인 0으로 state가 변경된다.

state Filp 뒤집기

const [filpped, setFilpped] = React.useState(false);

기본값이 false인 state를 하나 생성하고, 이 state에 따라서 filp하는 코드를 작성한다.

const onFilp = () => {
  setFilpped((current) => !current);
};
<button onClick={onFilp}>뒤집기</button>

hours와 minutes의 활성화, 비활성화 상태를 바꾸고 시간을 분 단위로, 분을 시간 단위로 바꾸는 버튼과 함수 onFilp을 만들었다. onFilp에서 실행되는 setFilpped는 함수형태로 만들어 current라는 전달인자에 현재의 state값을 안정적으로 받아오고, 함수가 실행되면 current의 반대의 값을 current로 stateUpdate하도록 했다.
current가 false 이면 true, current가 true이면 false로 반복적으로 변경된다.

<div>
  <label htmlFor="minutes">Minutes</label>
  <input
    type="number"
    placeholder="Minutes"
    id="minutes"
    value={minutes}
    onChange={onChange}
    />
  <label htmlFor="hours">Hours</label>
  <input
    type="number"
    placeholder="Hours"
    id="hours"
    value={Math.round(minutes / 60)}
    onChange={onChange}
    disabled
    />
  <button onClick={reset}>초기화</button>
  <button onClick={onFilp}>뒤집기</button>
</div>

input id="minutes"와 input id="hours"의 활성 비활성화 상태를 한눈에 보기 쉽도록 readOnly에서 disabled로 변경했다.
이제 삼항연산자를 활용하여 state를 upDate해본다.

//초기값
const [filpped, setFilpped] = React.useState(false);

//실행되는 함수
const onFilp = () => {
  setFilpped((current) => !current);
};

<div>
  <h1 className="hi">Super Converter</h1>
  <div>
    <label htmlFor="minutes">Minutes</label>
    <input
      type="number"
      placeholder="Minutes"
      id="minutes"
      
      //filpped가 true이면 Math.round(minutes * 60) 실행. 아니라면 minutes를 보여준다.
      value={filpped ? Math.round(minutes * 60) : minutes}
      
      onChange={onChange}
      
      //filpped가 true일때 disabled처리된다.
      disabled={filpped}
      />
    <label htmlFor="hours">Hours</label>
    <input
      type="number"
      placeholder="Hours"
      id="hours"
      
      //filpped가 true이면 minutes를 보여주고, 아니라면 Math.round(minutes * 60) 실행.
      value={filpped ? minutes : Math.round(minutes / 60)}
      
      onChange={onChange}
      //filpped가 false일때 disabled처리된다.
      disabled={!filpped}
      />
    <button onClick={reset}>초기화</button>
    <button onClick={onFilp}>뒤집기</button>
  </div>
</div>

//전체코드
const root = document.getElementById("root");
const App = () => {
  const [minutes, setMinutes] = React.useState(0);
  const [filpped, setFilpped] = React.useState(false);
  const onChange = (event) => {
    setMinutes(event.target.value);
  };
  const reset = () => {
    setMinutes(0);
  };
  const onFilp = () => {
    setFilpped((current) => !current);
  };
  return (
    <div>
      <h1 className="hi">Super Converter</h1>
      <div>
        <label htmlFor="minutes">Minutes</label>
        <input
          type="number"
          placeholder="Minutes"
          id="minutes"
          //value={filpped ? minutes * 60 : minutes}
          value={filpped ? Math.round(minutes * 60) : minutes}
          onChange={onChange}
          disabled={filpped}
          />
        <label htmlFor="hours">Hours</label>
        <input
          type="number"
          placeholder="Hours"
          id="hours"
          value={filpped ? minutes : Math.round(minutes / 60)}
          onChange={onChange}
          disabled={!filpped}
          />
        <button onClick={reset}>초기화</button>
        <button onClick={onFilp}>뒤집기</button>
      </div>
    </div>
  );

응용

조건에 따라 compornent를 show할 수 있다.

const root = document.getElementById("root");

//compornent1
function MinutesToHours() {
  const [minutes, setMinutes] = React.useState(0);
  const [filpped, setFilpped] = React.useState(false);
  const onChange = (event) => {
    setMinutes(event.target.value);
  };
  const reset = () => {
    setMinutes(0);
  };
  const onFilp = () => {
    setFilpped((current) => !current);
  };
  return (
    <div>
      <div>
        <label htmlFor="minutes">Minutes</label>
        <input
          type="number"
          placeholder="Minutes"
          id="minutes"
          value={filpped ? Math.round(minutes / 60) : minutes}
          onChange={onChange}
          disabled={filpped}
          />
        <label htmlFor="hours">Hours</label>
        <input
          type="number"
          placeholder="Hours"
          id="hours"
          value={filpped ? minutes : Math.round(minutes / 60)}
          onChange={onChange}
          disabled={!filpped}
          />
        <button onClick={reset}>초기화</button>
        <button onClick={onFilp}>뒤집기</button>
      </div>
    </div>
  );
}
//compornent2
function KmToMiles() {
  return <h3>Km 2 Miles</h3>;
}

//compornent3
//compornent3안에서 조건에 따라 compornent1,2 render.
function App() {
  const [index, setIndex] = React.useState("2");
  const onSelect = (e) => {
    setIndex(e.target.value);
  };
  return (
    <div>
      <h1 className="hi">Super Converter</h1>
      <select value={index} onChange={onSelect}>
        <option value="0">MinutesToHours</option>
        <option value="1">KmToMiles</option>
        <option value="2">선택해줘잉</option>
      </select>
      
      // jsx문법에서는 {중괄호}안에서 javascript를 작성할 수 있다.
      // 삼항연산자를 중첩으로 사용했다.
      {index === "2" ? (
        "선택해줘잉"
      ) : index === "0" ? (
        <MinutesToHours />
      ) : (
        <KmToMiles />
      )}
    </div>
  );
}
ReactDOM.render(<App />, root);

CODE CHALLENGE

니꼬쌤의 챌린지! 혼자 km to mile 컴포넌트 만들어보기.

function KmToMiles() {
  const [kmState, setKmState] = React.useState(0);
  const [inputAble, setInputAble] = React.useState(false);
  const onChange = (e) => {
    setKmState(e.target.value);
    console.log(e.target.value);
  };
  const reset = () => {
    setKmState(0);
  };
  const filp = () => {
    setInputAble((current) => !current);
  };
  return (
    <div>
      <h3>km to mile</h3>
      <div>
        <label htmlFor="km">킬로미터</label>
        <input
          type="number"
          placeholder="킬로미터"
          id="km"
          value={inputAble ? kmState * 1.609 : kmState}
          onChange={onChange}
          disabled={inputAble}
          />
      </div>
      <div>
        <label htmlFor="mile">마일</label>
        <input
          type="number"
          placeholder="마일"
          id="mile"
          value={inputAble ? kmState : kmState * 0.609}
          onChange={onChange}
          disabled={!inputAble}
          />
      </div>
      <button onClick={reset}>초기화</button>
      <button onClick={filp}>뒤집기</button>
    </div>
  );
}

성공✨

일단 해볼게요!✍🏻

이전 포스트

React : state Function

다음 포스트