[ReactJS로 영화 웹 서비스 만들기] Section 2

state는 기본적으로 데이터가 저장되는 곳

 

countUp을 호출할 때마다 ReactDOM.render부분을 다시 호출하고 싶은 것인데

먼저 애플리케이션이 시작될 때 Container를 렌더링 하고 우리가 Container를 렌더링 할 때 counter는 0

 

const root = document.getElementById("root");
let counter = 0;
function countUp() {
  counter += 1;
  render();
}
function render() {
  ReactDOM.render(<Container />, root);
}
function Container() {
  return (
    <div>
      <h3>Total clicks: {counter}</h3>
      <button onClick={countUp}>Click me</button>
    </div>
  );
}
render();

우리가 해야 하는 건 Container를 리렌더링 해주는 것인데 이 방식은 계속해서 render 해주는 것을 잊으면 안 되기 때문에 최고의 방법은 아니다

UI를 업데이트하고 싶다면, 사용자에게 무언가 변화된 부분을 보여주고 싶다면 render 함수를 다시 호출하면 된다

ReactJS는 변경된 부분만 업데이트된다!!

 

useState 함수는 초기값 설정 가능

function App() {
  const data = React.useState(0);
  console.log(data);
  return (
    <div>
      <h3>Total clicks: 0</h3>
      <button>Click me</button>
    </div>
  );
}

배열에는 초기값 0과 data의 값을 바꿀 수 있는 함수가 들어있다

 

const [counter, modifier] = React.useState(0);

 

counter라는 데이터를 받아서 return()에 그 데이터를 담고 있고 버튼이 클릭되면 counter값을 바꿔줄 setCounter함수 호출

counter의 새로운 값을 가지고 해당 함수를 호출

어떤 값을 부여하던 modifier 함수는 그 값으로 업데이트하고 리렌더링 일으킨다

이렇게 하면 우리가 직접 리렌더링 해줄 필요 X

const root = document.getElementById("root");
function App() {
  const [counter, setCounter] = React.useState(0);
  const onClick = () => {
    setCounter(counter + 1);
  };
  return (
    <div>
      <h3>Total clicks: {counter}</h3>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}
ReactDOM.render(<App />, root);

 

데이터가 바뀔 때마다 컴포넌트를 리렌더링 하고 UI를 refresh 하는 것

변수를 컴포넌트에 연결해 변수에 데이터를 담고 해당 변수에 담긴 값을 바꾸는 것

setCounter 함수를 사용해 state, 즉 애플리케이션의 데이터를 바꿀 때 새로운 값을 가지고 컴포넌트 전체가 재생성

중요한 것은 state가 바뀌면 리렌더링 일어난다는 것!!

 

// 직접 할당
setCounter(counter + 1);
// 함수 할당
setCounter((current) => current + 1);

현재 state랑 관련 없는 값을 새로운 state로 하고 싶다면 직접 할당

현재 state를 바탕으로 다음 state를 계산해 내고 함수 할당

둘 다 같은 기능을 하지만 함수 할당이 더 안전

 

unit conversion(단위 변환)는 분 단위를 넣으면 그걸 시간 단위로 값을 출력

분에서 시간으로 시간에서 분으로

 

JSX는 class 대신 className 사용, for 대신 htmlFor 사용

function 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
        value={minutes}
        id="minutes"
        placeholder="Minutes"
        type="number"
        onChange={onChange}
      />
      <h4>You want to convert {minutes}</h4>
      <label htmlFor="hours">Hours</label>
      <input id="hours" placeholder="Hours" type="number" />
    </div>
  );
}

onChange함수는 데이터(input에서 리스닝하는)를 업데이트해주는 역할을 한다

event.target.value가 바로 input value

function App() {
      const [minutes, setMinutes] = React.useState();
      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
              value={minutes}
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onChange}
            />
          </div>
          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={Math.round(minutes / 60)}
              id="hours"
              placeholder="Hours"
              type="number"
              disabled
            />
          </div>
          <button onClick={reset}>Reset</button>
        </div>
      );
    }

reset 버튼 누르면 0으로 둘 다 되돌아가도록

 

flip function은 단위 변환 뒤집기

const [amount, setAmount] = React.useState();
      const [flipped, setFlipped] = React.useState(false);
      const onChange = (event) => {
        setAmount(event.target.value);
      };
      const reset = () => setAmount(0);
      const onFlip = () => {
        reset();
        setFlipped((current) => !current);
      };
      return (
        <div>
          <h1 className="hi">Super Converter</h1>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={flipped ? amount * 60 : amount}
              id="minutes"
              placeholder="Minutes"
              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"
              disabled={!flipped}
              onChange={onChange}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>Flip</button>
        </div>
      );
    }

flipped ? amount : amount / 60

삼항연산자를 사용해 flipped 상태면 state에 있는 값 그대로 보여주고 아니라면 60으로 나눈 변환값 보여주기

 

원하는 단위 변환을 선택할 수 있도록 select 함수 만들기

const [index, setIndex] = React.useState("xx");
const onSelect = (event) => {
  setIndex(event.target.value);
};

return (
  <div>
    <h1 className="hi">Super Converter</h1>
    <select value={index} onChange={onSelect}>
      <option value="xx">Select your units</option>
      <option value="0">Minuts & Hours</option>
      <option value="1">Km & Miles</option>
    </select>
    <hr />
    {index === "xx" ? "Please select your units" : null}
    {index === "0" ? <MinutesToHours /> : null}
    {index === "1" ? <KmToMiles /> : null}
  </div>

우리가 state를 변화시킬 때 모든 게 새로고침 된다!