I am an amazing person.

2 분 소요

STATE

3.0 Understanding State

  • state는 data가 저장되는 곳

  • 만들고 싶은 기능: button 클릭 횟수를 세는 counter

    • (구린) 방법 1

      1. let counter로 변수 선언
      2. countUP 함수
      3. button에 event listener를 달아 countUp 함수와 함께 호출

      => counter 기능은 수행하지만, UI는 update 되지 않음

  • counter 값이 계속 update 되려면?

    • (구린) 방법 1
      • countUp 함수가 호출되면, rerender 시행
      • 하지만 값이 바뀔 때마다 rendering 되는 것은 좋은 방법이 아님

  • React의 장점!

    • Vanilla Js와 달리, rendering 할 때 값이 달라지는 부분만 update 됨
    • 이러한 기능은 UI를 interactive 할 수 있게 만드는데 큰 강점을 가짐 ***
    • 추가적인 내용 - 일반 javascript를 쓴 browser는 노드 정보가 바뀔 때마다 노드 트리를 처음부터 다시 생성 - react는 가상 DOM을 써서 우리 시야에 보이는 부분만 수정해서 보여주고, 모든 update가 끝나면 일괄로 합쳐 실제 DOM으로 전달한다고 함 브라우저 렌더링 과정, Virtual DOM 참고 자료

3.1 setState part One ~ 3.2 setState part Two

  • useState()

    • react에서 기본적으로 지원하는 Hooks 중 하나
    • array 형태를 반환 [data, f]
    • data: state 변수

    • f: data를 바꿀 때 사용하는 함수 (주로 set변수명 으로 작성함)

      • data 를 update 하고 rerendering 수행
      • 함수의 첫번째 인자는 현재 data (state) 변수

      (state 와 UI update를 한번에)

3.4 State Functions

  • 3.3 은 Recap 입니다.
const [counter, setCounter] = React.useState(0);
setCounter(counter + 1);
  • 위와 같이 setCounter를 작성했을 때 문제점
    • counter 변수는 다른 곳에서 update 될 수 있어 안정적이지 않음
const [counter, setCounter] = React.useState(0);
setCounter((current) => current + 1);
  • 따라서 위 코드와 같이 작성하는 것이 안정적이다.
  • setCounter 함수의 첫번째 인자는 counter 변수 (state 변수)

3.5 Inputs and State

  • 만들어 볼 것: 분 -> 시 변환기

  • HTML에서는 input과 label을 이런식으로 사용함

function App() {
  return (
    <div>
      <h1>Super Converter</h1>
      <label for="minutes">Minutes</label>
      <input id="minutes" placeholder="Minutes" type="number" />
      <label for="hours">Hours</label>
      <input id="hours" placeholder="Hours" type="number" />
    </div>
  );
}
  • input에 id를 부여하고, label에서 for을 이용하여 그 id를 가져옴
  • jsx에서는 이렇게 사용하지 않음.
  1. minutes에 입력이 들어오는 것을 감지
    • input onChange에 대한 event listener 등록
    • input value를 state 변수로 설정
  • 코드 일부
const [minutes, setMinutes] = React.useState();

<input
  value={minutes}
  id="minutes"
  placeholder="Minutes"
  type="number"
  onChange={onChange}
/>;
  1. minutes에 들어온 내용이 뭔지 알아내기
    • event의 target 값을 통해 불러올 수 있음
const onChange = (event) => {
  setMinutes(event.target.value);
};

3.6 State Practice part One ~ 3.7 State Practice part Two

  • input 에 입력한 값을 가져오는 방법

    • input의 value에 state 변수 설정

    • input의 event를 감지하는 listener 할당

      • event listener는 event의 target 값을 통해 입력한 내용을 가져온다

      => state update

  • 분 <-> 시간 양방향 변환기를 만드려면?

    • flip을 위한 boolean 값을 담는 state 변수를 선언하면 됨

    • 예시

    value={flipped ? amount * 60 : amount}

    3.9 Final Practice and Recap

    • 3.8은 Recap입니다.

    • (시-분 변환기), (km - mile 변환기), … 등 여러가지 변환기를 버튼을 통해 관리하고 싶음

      • 해당 버튼을 누르면 해당 계산기가 나타나는 형태

      => Component 안에 또 다른 Component rendering 하기

      • 부모 component: App

      • 자식 component: MinutesToHours, kmToMile, …

      • 구현 방법
        • select 의 index를 관리하는 state 변수 선언
        • 해당 index에 해당하는 component만 rendering
      • 코드 일부
      const [index, setIndex] = React.useState("0");

const onSelect = (event) => {
    setIndex(event.target.value);
  };

<select value={index} name="converter" onChange={onSelect}>

{index === "0" ? <MinutesToHours /> : null}
      • {} 를 씌우면 js 로 코딩할 수 있다.

참고