[React] 241016 TIL

안셩·2024년 10월 16일

React

복습내용

목록 보기

26/27

1. <></> fragment 태그

이름 없는 태그

사용하는 이유

: 리액트 내부적으로는 render라는 함수를 실행시켜 주는데,
매개변수로 인자를 하나씩만 넣어줄 수 있기 때문에 하나의 인자를 만들어주려면 하나의 부모로 감싸줘야 한다.

태그 대신 이름 없는 태그로 쓸 수 있다.

2. useState의 비동기성

setState(상태변경함수)로 상태를 업데이트하면, 리액트는 즉시 상태를 변경하지 않는다
setState는 일반업데이트 / 함수형업데이트 두가지 방법으로 사용하는데,
일반업데이트는 내부적으로 여러 가지 일을 처리하기 때문에 단번에 변경되는 것이 아니다! 일괄처리하는 배치업데이트를 한다.

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
};

return (
  <button onClick={handleClick}>Count: {count}</button>
);

보통 count가 3씩 증가할 것이라고 예상하지만, 실제로는 count가 1씩 증가한다.
setCount 함수가 호출될 때마다 상태 업데이트가 큐(queue)에 등록되지만, 같은 렌더링 사이클 내에서는 count 상태가 여전히 동일한 값(이 경우 0)을 참조하기 때문입니다.
동일 요청으로 받아들여서 마지막 setCount만 반영(배치업데이트)

리액트는 여러 개의 상태 업데이트를 하나의 렌더링 사이클에서 처리합니다.
큐(queue)에 있는 모든 상태 업데이트가 처리된 후에야 리액트는 컴포넌트를 다시 렌더링합니다.

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
};

return (
  <button onClick={handleClick}>Count: {count}</button>
);

위 코드에서는 setCount에 콜백 함수를 전달하고 있다.
(함수형 업데이트: 배치업데이트를 거스르고 싶을 때 사용)
이 콜백 함수는 상태의 이전 값(prevCount)을 인자로 받아, 그 값을 기반으로 새로운 상태를 만든다.
콜백 함수를 인자로 넘겨주는 방식은 prevCount는 항상 최신 상태 값을 참조하기 때문에 중요하다.

결과:

이 코드를 실행하면, 버튼을 클릭할 때 count가 3씩 증가한다.
이는 각 setCount 호출이 이전 상태 값을 정확히 참조하기 때문이다.

콜백 함수의 필요성:

콜백 함수는 상태 업데이트 시 이전(최신) 상태 값을 참조할 수 있게 해줍니다.

3. 컴포넌트의 종류

컨테이너 컴포넌트: 비즈니스 로직과 상태관리를 담당
프레젠트 컴포넌트: UI를 렌더링하는 역할

4. 컴포넌트 분리의 장점

모듈화
가독성 향상
유지 보수성
확장성
재사용성

5. 제어컴포넌트 / 비제어컴포넌트

<제어컴포넌트>

리액트 상태에 의해 그 값이 제어되는 입력 요소를 의미.
입력 필드의 값은 항상 리액트 상태(useState 등)에 의해 관리되며, 사용자가 입력한 값이 리액트의 상태로 동기화된다.
언제 사용하나요?
- 실시간 데이터 검증이 필요할 때
: 사용자가 입력하는 데이터를 실시간으로 검증하거나, 입력에 따라 동적으로 UI를 업데이트하고자 할 때.
- 양방향 데이터 바인딩
: 입력값이 리액트 상태에 반영되고, 리액트 상태가 입력값에 반영되는 양방향 데이터 바인딩이 필요할 때.

<비제어컴포넌트>

DOM 요소 자체가 값을 관리하는 입력 요소를 의미.
리액트 상태로 입력 필드의 값을 관리하지 않고, 직접 DOM 요소에 접근하여 값을 가져온다.
언제 사용하나요?
- 코드 최적화가 필요할 때
: 리액트의 상태 관리 오버헤드 없이 직접 DOM 요소에 접근 하여 데이터를 처리하고자 할 때
- 레거시 코드와 통합하거나 외부 라이브러리를 사용할 때
: 리액트 상태와 상관없이 DOM 요소의 값만 필요할 때 사용.

6. preventDefault 함수의 역할

리액트로 투두리스트 만들기를 하면서,
input창에 입력한 값을 추가버튼을 클릭하면서 'handleSubmit'의 추가함수에서 e.preventDefault();를 해야한다.
preventDefault 함수는 기본 동작을 실행하지 않도록 한다.
onSubmit의 기본 동작은 새로고침이라 e.preventDefault()를 실행하면 새로고침 하는 것을 방지한다.