📝 오늘 한 것

1. react state

2. unit converter

3. array.filter(Boolean)

📚 배운 것

1. STATE

state란 데이터가 저장되는 곳을 말한다.

바닐라 JS 코드에서는 counter를 증가시키고 이를 UI에 디스플레이 하고 있다.
이때 바뀌는 데이터가 할당되는 counter 변수를 state로 만들 수 있다.

1) counter 변수 업데이트 후 render 함수 호출

먼저, state를 사용하지 않는 방법을 살펴보자면 다음과 같다.

• counter 변수를 App 함수 밖(React JS 어플 밖)에 선언한다.
• counter 변수를 JSX에 전달하기 위해서는 {} 안에 해당 변수의 이름을 적으면 된다.
• counter 변수를 업데이트 하기 위해 countUp 함수를 선언하고 button에 click 이벤트를 등록한다.
• 마지막으로 UI에 변경 사항을 반영하기 위해서는 App을 다시 render 해야 한다.

const root = document.getElementById("root");
let counter = 0;
function countUp () {
  counter++; // 3. counter 값을 올리고
  render(); // 4. 바뀐 counter 값을 가지는 App 컴포넌트를 다시 render 한다
}
function render () {
  ReactDOM.render(<App />, root);
}
function App() {
  return (
    <div>
      <h3>Total Click: {counter}</h3>
      <button onClick={countUp}>클릭</button>
    </div>
  );
} // 2. 버튼을 클릭할 때마다 이벤트 리스너가 실행된다.
render(); // 1. 처음 App 컴포넌트를 render 하여 화면에 보여준다

다만, 이 방법을 사용할 때는 데이터가 바뀔 때마다 리렌더링 하기 위해 ReactDOM.render() 함수를 호출해야만 한다.

💡 React JS에서의 리렌더링

바닐라 JS 코드를 사용하면 지정한 요소 전체가 업데이트 된다.
개발자 도구를 통해 살펴보면 span.innerText에 의해 counter 변수만이 아니라 'Total Click' 텍스트까지 포함하여 span 요소 전체가 업데이트 되는 것을 확인할 수 있다.

반면에, React JS를 사용하면 UI에서 바뀐 부분만을 업데이트 할 수 있다.
개발자 도구를 통해 살펴보면 counter 변수에 해당하는 부분만 업데이트 되는 것을 알 수 있다.
React JS는 이전에 렌더링된 컴포넌트가 무엇인지를 확인하고, 다음에 렌더링될 컴포넌트는 무엇인지를 확인하여, 바뀐 부분만을 업데이트 해준다.

다시 말해, CountUp 함수에 의해 데이터를 바꾼 후 리렌더링 하게 되면 바뀐 데이터를 가지는 App 컴포넌트 전부가 재생성되어 root에 배치되지만, 실제로는 오로지 counter 변수만이 바뀔 뿐이다.
이는 인터렉티브한 어플리케이션을 만드는 데 매우 큰 도움이 된다.

2) React.useState() 사용

React.useState()를 사용하면 (render 함수를 계속 호출할 필요 없이) React JS 어플 내에 데이터를 보관하고, 자동으로 리렌더링을 일으킬 수 있다.

• App 함수 안(React JS 어플 안)에 React.useState()를 이용해 counter 변수와 setCounter 함수를 선언한다.
• counter 변수를 JSX에 전달하기 위해서는 {} 안에 해당 변수의 이름을 적으면 된다.
• counter 변수를 업데이트 하기 위해 button에 click 이벤트를 등록한다. 이벤트 리스너에서는 setCounter 함수를 실행하도록 함으로써 counter 변수의 값을 바꾸는 동시에 자동으로 리렌더링 되도록 한다.
• 따라서, UI에 변경 사항을 반영하기 위해 ReactDOM.render() 함수를 다시 호출할 필요가 없다.

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

React.useState()은 배열을 return 하며, 인자로는 데이터의 초기값을 전달할 수 있다.
counter는 데이터, setCounter는 데이터를 바꾸는 데 사용되는 함수이다.

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

// 위와 아래는 같은 코드이다

const data = React.useState(0);
const counter = data[0];
const setCounter = data[1];

React.useState()가 반환하는 배열의 두 번째 요소인 setCounter 함수는, counter 변수의 값을 바꾼 후, 이를 자동으로 리렌더링까지 해준다.

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

// 위와 아래는 같은 코드이다

const OnClick = () => {
  counter++;
  ReactDOM.render(<Container />, root);
};

💡 React JS에서의 리렌더링

(1)과 마찬가지로 마찬가지로 UI에서 바뀐 부분만을 업데이트 할 수 있다.

App 컴포넌트의 state, 즉 어플리케이션의 데이터가 바뀌면 App 컴포넌트 전부를 재생성(리렌더링)한다.
(App 함수에서 return 하기 전에 콘솔 로그를 추가하면 클릭할 때마다 콘솔에 값이 출력된다.)

그러나 물론 여기서도 실제로는 오로지 counter 변수만이 바뀔 뿐이다.
(개발자 도구의 elements 탭을 살펴보면 버튼을 클릭할 때마다 counter 변수 부분만이 변한다.)

🔎 이전 단계의 state를 이용해서 다음 단계의 state 바꾸기

state를 설정하는 데는 2가지 방법이 있다.
하나는 직접 state 값을 입력해주는 것이고(ex. setCounter(333)), 다른 하나는 이전 단계의 state를 이용해 다음 단계의 state를 바꾸는 것이다.(ex. setCounter(counter + 1))

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

위에서는 이전 단계의 state를 이용해서 다음 단계의 state를 바꾸기 위해 setCounter(counter + 1)를 실행한다.
그러나 이렇게 작성하면 예기치 못하게 다른 곳에서 state가 변경된 경우 예상과 다른 결과가 나올 수도 있다.
대신에 setCounter(current => current + 1)을 실행하는 것이 더 안전하다.

2. UNIT CONVERTER(단위 변환 앱) 만들기

1) minutes를 hours로 변환

(1) htmlFor / className

for과 class는 자바스크립트에도 존재하는 예약어이기 때문에 JSX 코드에서 사용하려고 하면 에러가 뜬다.
대신에 JSX 문법에 따라 htmlFor과 className을 사용해야 한다.

(2) React JS에서 form을 다루는 방법

React JS 세계에서 생성한 input의 value는 직접 통제할 수 없다.(uncontrolled input)

따라서, state를 만들어서 input의 value 속성으로 전해준 후(이때 React.useState()의 인자로 기본값을 지정해야 경고가 안뜸) 사용자가 input에 다른 값을 입력할 때마다 input의 value를 업데이트 하여(onChange 함수) 그 값을 외부에서 가져오도록 해야 한다.({minutes} 이용)

input의 value를 state와 연결시킴으로써, input의 value를 외부에서도 수정할 수 있다.

const App = () => {
  const [minutes, setMinutes] = React.useState(0);
  const onChange = (event) => setMinutes(event.target.value);
  return (
    <div>
      <label htmlFor="minutes">Minutes</label>
      <input
        value={minutes}
        id="minutes"
        placeholder="Minutes"
        type="number"
        onChange={onChange}
      />
      <label htmlFor="hours">Hours</label>
      <input id="hours" placeholder="Hours" type="number" />
      <h4>minutes input의 value는 {minutes} 입니다</h4>
    </div>
  );
};
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

onChange 함수 안에서 console.log(event) 를 실행하면 콘솔 창에 SyntheticBaseEvent 객체가 출력된다.
이는 nativeEvent를 가지는데 이 안에 target이 input을 의미하고 target은 value를 가진다.

즉, console.log(event.target.value) 를 실행하면 콘솔 창에 input의 value가 출력된다.
이제 setMinutes 함수를 이용해 minutes를 업데이트 한 후 Appp 컴포넌트를 리렌더링해야 한다.

이제 minutes input에 사용자가 값을 입력하여 input의 value가 변할 때마다 그 변화가 h4에 실시간으로 반영되어 보이게 된다.

💡 이때 onChange={onChange} 코드를 삭제하면 아무리 minutes input에서 키보드를 눌러 값을 입력해도 input 창에는 계속 0만 보인다.

이는 원래 input의 value인 {minutes}의 기본값을 0으로 설정한 후
사용자가 키보드를 눌러 값을 변경할 때마다 onChange 이벤트 리스너에 의해 minutes 값이 변경됨으로써
input의 value도 변경되고 App 컴포넌트가 리렌더링되도록 했는데

onChange 이벤트 리스너를 삭제했기 때문에 minutes의 값이 0인 상태에서 업데이트 되지 않기 때문이다.

다시 말해, minutes input의 경우 ① 먼저 change event도 리스닝 해야 하고, ② change event가 발생했을 때 input의 value를 업데이트 하고 UI에 보여주기도 해야 한다.
hours input의 경우 input 창을 수정할 수 없도록 change event를 리스닝하지 않게끔 했다.

(3) 단위 변환 / 리셋 버튼 구현

const App = () => {
  const [minutes, setMinutes] = React.useState(0);
  const onChange = (event) => setMinutes(event.target.value);
  const onClick = () => setMinutes(0); // reset 버튼 클릭 시 minutes(input의 value) 초기화
  return (
    <div>
      <h1>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"
        />
      </div>
      <button onClick={onClick}>Reset</button>
    </div>
  );
};
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

2) hours를 minutes로 변환

(1) disabled의 적용 여부를 결정하는 flip 버튼

기본적으로 hours input에 disabled를 적용하고 minutes input은 enabled 상태로 둔다.
state를 하나 더 만들어 flip 버튼을 누르면 flipped 변수의 값이 반대가 되도록 한다.

const App () => {
  ...
  const [flipped, setFlipped] = React.useState(false); // 기본값 false
  const onFlip = () => setFlipped(current => !current); // flipped 변수 값 업데이트 & App 컴포넌트 리렌더링
  return (
    <div>
      <div>
        <label htmlFor="minutes">Minutes</label>
        <input
        id="minutes"
        ...
        disabled={flipped} // {flipped === true} 와 같다
        />
      </div>
      <div>
        <label htmlFor="hours">Hours</label>
        <input
        id="hours"
        ...
        disabled={!flipped} // {flipped === false} 와 같다
        />
      </div>
      ...
      <button onClick={onFlip}>{flipped ? "Turn back" : "Flip"}</button>
    </div>
  );
};

(2) hours input에 onChange 이벤트 등록하기

minutes input에 값을 입력했을 때에만 hours input에 {Math.round(minutes / 60)}의 값이 보여지도록 하고, hours input에 값을 입력했을 때는 hours input에 입력한 값을 그대로 보여주도록 해야 한다.
minutes input의 경우에도 마찬가지이다.

이를 위해 flipped 변수의 값을 이용해 조건부 삼항 연산자를 사용한 코드로 수정할 수 있다.

코드의 혼동을 피하기 위해 위에서 선언한 minutes를 amount로, setMinutes를 setAmount로 바꿔주었다.

그런데 이렇게 작성하면 문제가 하나 있다.
flip 버튼을 클릭하면 활성화된 input의 value에 amount 변수의 값이 할당되어 보이게 된다.
이를 해결하기 위해 onFlip 함수에 reset() 코드를 추가했다.

const onFlip = () => {
  setAmount(current => !current);
  reset();
};
...
<input
  value={!flipped ? amount : amount * 60}
  id="minutes"
  ...
  disabled={flipped}
/>
...
<input
  value={flipped ? amount : Math.round(amount / 60)}
  id="hours"
  ...
  disabled={!flipped}
/>

3. airbnb/javascript: JavaScript Style Guide

1) array.filter(Boolean)

const array = [1, "hi", null, ``, false];

const truthyCount = array.filter(Boolean).length;
// 위 아래는 같은 코드이다.
// Boolean()은 그 인자가 true일 땐 true를, false일 땐 false를 리턴하는 함수이다.
const truthyCount = array.filter((item) => Boolean(item)).length;

console.log(truthyCount); // 배열 [1, "hi"]의 길이는 2

✨ 내일 할 것

1. 단위 변환 앱 완성