2024-09-22

공부

제어 컴포넌트

📘React 공식 문서에서 설명하는 제어 컴포넌트
제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다.
React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 됩니다.
이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 "제어 컴포넌트(Controlled Component)"라고 합니다.
https://ko.reactjs.org/docs/forms.html#controlled-components

위 코드는 제어 컴포넌트의 예시이다.
위 코드에서 제어 컴포넌트가 동작하는 순서는 아래와 같다.
(1) 사용자가 input에 값을 입력한다.
(2) 사용자가 값을 입력할 때마다 onChange 이벤트 핸들러가 발생하여, setName()을 통해 변수가 name인 state 값을 변경한다.
(3) 변경된 state값을 input value에 할당한다.

사용자가 input에 값을 입력할 때마다 값이 변경되는 것을 console 창을 통해 알 수 있다.

그리고 확인 버튼을 클릭하면 사진과 같이 alert 창이 나온다.

비제어 컴포넌트

📘비제어 컴포넌트
비제어 컴포넌트는 기존의 바닐라 자바스크립트와 크게 다르지 않은 방식으로 우리는 바닐라 자바스크립트를 사용하여 폼을 제출할 때 특정 이벤트가 발생 시(submit button을 클릭할 때) 요소 내부의 값을 가져왔습니다.
비제어 컴포넌트 또한 이와 유사한 방식으로 사용됩니다.
비제어 컴포넌트 방식을 사용할 땐, 제어 컴포넌트 방식에서 사용한 setState()를 쓰지 않고 ref(React에서 Dom을 직접 핸들링할 때 사용)를 사용해서 값을 얻습니다.

비제어 컴포넌트는 제어 컴포넌트와 달리 값이 실시간으로 동기화되지 않습니다.
그래서 만약 a와 b라는 컴포넌트가 있을 때, a에 대한 변화를 즉각적으로 b가 영향을 받아야 할 때에는 비제어 컴포넌트를 사용하면 이런 방식에 대한 대응을 할 수 없습니다.

제어 컴포넌트가 사용자가 입력을 하는 액션이 발생될 때마다 리렌더링을 발생시키는 반면, 비제어 컴포넌트는 사용자가 직접 트리거하기 전까지는 리렌더링을 발생시키지도 않고 값을 동기화도 시키지 않습니다.

위 코드는 이름을 기록하는 비제어 컴포넌트의 예시이다.
위 코드에서 비제어 컴포넌트가 동작하는 순서는 아래와 같다.
(1) 사용자가 input에 값을 입력한다.
(2) 사용자가 Add 버튼을 클릭하면 ref를 통해 값을 얻는다.

input에 값을 입력하고 Add 버튼을 클릭하면 alert 창이 뜨는 것을 확인할 수 있다.

제어 컴포넌트와 비제어 컴포넌트의 차이

• 제어 컴포넌트
  제어 컴포넌트의 값은 항상 최신값을 유지하며 새로운 입력 값이 생길 때마다 상태를 새롭게 갱신합니다. 이는 데이터와 UI에서 입력한 값이 항상 동기화됨을 알 수 있습니다.

• 비제어 컴포넌트
  form의 button을 클릭하기 전까진 값을 알 수 없다. button을 클릭해야 비로소 값을 가져올 수 있다.

• 실시간으로 값이 필요할 때는 제어 컴포넌트를 사용하고,
  불필요한 재렌더링을 줄이고 제출 시에만 값이 필요할 때는 비제어 컴포넌트를 사용하는 것이 좋다.

운동

• 이번 주에 추석 연휴가 있어서 그때 헬스장이 문을 열지 않아서 이번 주는 주말에도 헬스장을 방문했다. 원래 월화 목금 이런 식으로 평일에만 가다가 주말에 진짜 오랜만에 갔는데 사람이 많을까 봐 걱정이 많이 되었는데 오픈 시간에 맞춰서 가니 다행히 많지 않아서 나름 쾌적하게 운동을 했다.👍👍

• 새로 알게 된 하체 운동이 있어서 하체하는 날에 바로 해봤는데 계단을 이용할 때 다리가 엄청 후들후들 거려서 내가 마치 갓 태어난 기린이 된 것 같았다

취업

기타