2022년 04월 13일

📚 오늘 도전하고, 배운 것

• BAEKJOON-15649

React

JSX에서 루트 div가 하나여야 하는 이유

JSX가 Js로 변환될 때 React.createElement를 사용하기 때문이다. 2가지 이상의 엘리먼트가 루트에 있으면 문법에 어긋나게 된다. 루트에 있는 2가지 엘리먼트를 div로 React.createElement를 이용해 하나로 묶어주면 문법 오류 없이 변환이 가능하다. 문법은 Virtual-DOM 참고하기

State

React가 무언가를 바꾸고 특정 컴포넌트가 다시 계산되어야 한다는 것을 알릴 방법이 필요하다. 그래야 화면이 업데이트될 수 있는데 여기서 상태(State)라는 특별한 개념이 도입되었다.

useState

• React 라이브러리가 제공하는 함수
• useState는 리액트 훅(React Hooks)이다. 다른 Hook들도 있다.
  • hook들은 use라는 접두사를 사용한다. 그래서 알아볼 수 있다. React 컴포넌트 내에서만 불러올 수 있다.
• 왜 useState의 반환값은 상수를 사용할까?
  • =로 값을 할당하지 않았다는 사실에 주목하기
  • useState를 사용하면서 React에게 값을 관리해줘야 한다는 것을 알려준다. 함수(modifier)를 사용하고 =를 사용하지 않기 위해 상수(const)를 사용한다.
• 개발할 때 해야할 것 -> 상태값을 사용할 때마다 useState가 반환하는 배열의 첫번째 요소를 사용하는 것. 나머지는 React가 알아서 해준다. 해당 컴포넌트 함수를 재실행해준다. (상태가 변할 때마다)
• "상태"가 애플리케이션에 reactivity를 더해준다.
• useState의 상태 변경 함수로 바로 데이터가 변경되진 않는다. console.log로 확인해보면 그렇다.
  • 바로 변경되는 것이 아니라 상태 업데이트 스케줄에 등록이 되는 것!
• 컴포넌트마다 여러 개의 state를 가질 수 있다.
  • useState를 각각 나눠서 하는 방법도 있고,
  • 객체로 묶어서 한꺼번에 사용하는 방법도 있다.
  • 개발 방식에 따라 다름!
• 앞서 살펴본 것처럼 리액트가 상태 업데이트 스케줄을 가지고 있어서 현재 최신 스냅샷이라는 걸 보장해주지 않는다.
  • 그래서 이론적으로 동시에 수많은 상태 업데이트를 계획한다면?
    • 잘못된 스냅샷에 의존할 수 있다.
    • 하지만 함수를 사용하면 리액트는 최신 상태의 스냅샷이라는 것을 보장해준다.
    • 따라서 이전 상태에 의존한 경우 업데이트시 함수를 사용해야 한다.

// 함수를 넘기지 않고 업데이트
setUserInput({
  ...userInput,
  enteredTitle: event.target.value,
})

// 함수를 사용한 업데이트
setUserInput((prevState) => {
  return { ...prevState, enteredTitle: event.target.value }
})

양방향 바인딩

• input의 변화만 listen 해서 상태를 업데이트만 하는 것이 아니라 상태를 입력으로 다시 피드백해주는 것을 말한다.
• 상태 변화시 input도 업데이트가 된다.
• input 데이터를 하나로 모으고 쉽게 초기화도 가능

🤔 학습하면서 궁금하거나 어려웠던 점

🌅 내일은 무엇을?

• 백준 알고리즘 문제 풀기
• React 학습

🖋 log

• 큰아버지께서 보내주신 소포가 도착했다. 바지를 득템한 날이다. 기분이 좋다.